WebGPU Shading Language

Not to be confused with OpenGL Shading Language or High-Level Shader Language.

Top View

WebGPU Shading Language

Latest version	W3C Candidate recommendation (As of 2025)
Organization	W3C
Committee	GPU for the Web WG GPU for the Web CG
Domain	Shading language

WebGPU Shading Language (WGSL) is a high-level shading language with a syntax inspired by Rust. It was initially developed by the W3C GPU for the Web Community Group to provide developers with a modern, safe, and portable shading language for the WebGPU API. WGSL is designed to be compiled to SPIR-V or other intermediate representations, enabling execution across different graphics hardware while maintaining security and portability requirements essential for web applications.

Traditional web graphics programming relied on WebGL, which used GLSL ES for shader programming. However, as web applications became more sophisticated and demanded better performance, the need for a more modern graphics API became apparent. WebGPU was developed to address these needs, providing access to modern GPU features while maintaining the security and portability requirements of the web platform.

WGSL supports multiple shader stages:

Process individual vertices, transforming positions and computing per-vertex data for rasterization.

/* Transforms incoming positions by an MVP matrix and    passes per-vertex color through to the fragment stage. */  struct VertexInput {   @location(0) position : vec3<f32>,   @location(1) color : vec3<f32>, };  struct VertexOutput {   @builtin(position) clip_position : vec4<f32>,   @location(0) color : vec3<f32>, };  @group(0) @binding(0) var<uniform> mvp : mat4x4<f32>;  @vertex fn main(v_in : VertexInput) -> VertexOutput {   var v_out : VertexOutput;   v_out.clip_position = mvp * vec4<f32>(v_in.position, 1.0);   v_out.color = v_in.color;   return v_out; } 

Execute for each fragment, computing final color values and depth information.

/* Receives interpolated color and    writes it to the framebuffer. */  @fragment fn main(@location(0) color : vec3f) -> @location(0) vec4f {   return vec4<f32>(color, 1.0); // add opaque alpha } 

Perform general-purpose parallel computations on the GPU, supporting various algorithms beyond traditional graphics rendering.

/* Doubles every element in an input buffer and    stores the result in an output buffer. */  struct Params {   element_count : u32, };  @group(0) @binding(0) var<storage, read> in_data : array<f32>; @group(0) @binding(1) var<storage, read_write> out_data : array<f32>; @group(0) @binding(2) var<uniform> params : Params;  @compute @workgroup_size(64) fn main(@builtin(global_invocation_id) gid : vec3<u32>) {   let idx : u32 = gid.x;   if (idx >= params.element_count) {     return;   }   out_data[idx] = in_data[idx] * 2.0; } 

• WebGPU, the graphics API that uses WGSL
• SPIR-V, intermediate shader representation
• W3C, the organization developing WebGPU and WGSL

• GLSL, shading language for OpenGL
• HLSL, Microsoft's shading language for Direct3D
• Metal Shading Language, Apple's shading language for Metal
• Cg, NVIDIA's C-based shading language
• Open Shading Language, offline rendering shading language

• WebGPU Shading Language Specification - Official W3C specification
• WebGPU Specification - The broader WebGPU API specification
• WebGPU Working Group on GitHub - Development repository