WebGPU Shading Language

WebGPU Shading Language (WGSL) is a high-level shading language with a syntax inspired by Rust.^[1] 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.^[2] 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.^[1]

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.^[3] WebGPU was developed to address these needs, providing access to modern GPU features while maintaining the security and portability requirements of the web platform.^[2]

WGSL supports multiple shader stages:^[1]

Process individual vertices, transforming positions and computing per-vertex data for rasterization.^[1]

/* 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.^[1]

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

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

/* 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