Login
Login

WebGPU Shading Language

{{Short description|Shading language for WebGPU}}

{{distinguish|OpenGL Shading Language|High-Level Shader Language}}

{{Infobox technology standard

| name = WebGPU Shading Language (WGSL)

| version = W3C Candidate recommendation

| version_date = (As of 2025)

| domain = {{Plainlist|

}}

| organization = {{Plainlist|

}}

| committee = {{Plainlist|

  • GPU for the Web {{abbr|WG|Working Group}}
  • GPU for the Web {{abbr|CG|Community Group}}

}}

| editors =

}}

WebGPU Shading Language (WGSL) is a high-level shading language with a syntax inspired by Rust.{{cite web |title=WebGPU Shading Language |url=https://www.w3.org/TR/WGSL/ |publisher=W3C |access-date=2024-01-20}} 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.{{cite web |title=WebGPU Explainer |url=https://gpuweb.github.io/gpuweb/explainer/ |publisher=W3C GPU for the Web Community Group |access-date=2024-01-20}} 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.

Background

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.{{cite web |title=WebGPU |url=https://www.w3.org/TR/webgpu/ |publisher=W3C |access-date=2024-01-20}} WebGPU was developed to address these needs, providing access to modern GPU features while maintaining the security and portability requirements of the web platform.

Shader types

WGSL supports multiple shader stages:

=Vertex shaders=

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

==Vertex shader example==

/* Transforms incoming positions by an MVP matrix and

passes per-vertex color through to the fragment stage. */

struct VertexInput {

@location(0) position : vec3,

@location(1) color : vec3,

};

struct VertexOutput {

@builtin(position) clip_position : vec4,

@location(0) color : vec3,

};

@group(0) @binding(0)

var mvp : mat4x4;

@vertex

fn main(v_in : VertexInput) -> VertexOutput {

var v_out : VertexOutput;

v_out.clip_position = mvp * vec4(v_in.position, 1.0);

v_out.color = v_in.color;

return v_out;

}

=Fragment shaders=

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

==Fragment shader example==

/* Receives interpolated color and writes it to the framebuffer. */

@fragment

fn main(@location(0) color : vec3)

-> @location(0) vec4 {

return vec4(color, 1.0); // add opaque alpha

}

=Compute shaders=

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

==Compute shader example==

/* 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 in_data : array;

@group(0) @binding(1) var out_data : array;

@group(0) @binding(2) var params : Params;

@compute @workgroup_size(64)

fn main(@builtin(global_invocation_id) gid : vec3) {

let idx : u32 = gid.x;

if (idx >= params.element_count) {

return;

}

out_data[idx] = in_data[idx] * 2.0;

}

See also

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

=Other shading languages=

References

{{Reflist}}

External links

  • [https://www.w3.org/TR/WGSL/ WebGPU Shading Language Specification] - Official W3C specification
  • [https://gpuweb.github.io/gpuweb/ WebGPU Specification] - The broader WebGPU API specification
  • [https://github.com/gpuweb/gpuweb/tree/main/wgsl WebGPU Working Group on GitHub] - Development repository

{{W3C standards}}

{{Computer graphics}}

{{DEFAULTSORT:WebGPU Shading Language}}

Category:Shading languages

Category:Web standards

Category:World Wide Web Consortium standards

Category:Computer graphics