WebGPU Shading Language

Shading language for WebGPU

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

WebGPU Shading Language (WGSL)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, internet media type: `text/wgsl`) is a high-level shading language and the normative shader language for the WebGPU API on the web.[1][2] WGSL’s syntax is influenced by Rust and is designed with strong static validation, explicit resource binding, and portability in mind for secure execution in browsers.[1] In web contexts, WebGPU implementations accept WGSL source and perform compilation to platform-specific intermediate forms (for example, to SPIR‑V, DXIL, or MSL via the user agent), but such backends are not exposed to web content.[2][3]

## History and background

[edit]

Graphics on the web historically used WebGL, with shaders written in GLSL ES. As applications demanded more modern GPU features and finer control over compute and graphics pipelines, the W3C’s GPU for the Web Community Group and Working Group created WebGPU and its companion shading language, WGSL, to provide a secure, portable model suitable for the web platform.[4][2] WGSL was developed to be human-readable, avoid undefined behavior common in legacy shading languages, and align closely with WebGPU’s resource and validation model.[1]

## Design goals

[edit]

WGSL’s design emphasizes:

* Safety and determinism suitable for web security constraints (extensive static validation and well-defined semantics).[1]
* Portability across diverse GPU backends via an abstract resource model shared with WebGPU.[2]
* Readability and explicitness (no preprocessor, minimal implicit conversions, explicit address spaces and bindings).[1]
* Alignment with modern GPU features (compute, storage buffers, textures, atomics) while retaining a familiar C/Rust-like syntax.[1]

## Language overview

[edit]

### Types and values

[edit]

Core scalar types include `bool`, `i32`, `u32`, and `f32`. Vectors (e.g., `vec2`, `vec3`, `vec4`) and matrices (up to 4×4) are available for floating-point element types. Optional `f16` (half precision) may be enabled via a WebGPU feature; availability is implementation-dependent.[1][2] Atomic types (`atomic<i32>`, `atomic<u32>`) support limited atomic operations in qualified address spaces.[1]

### Variables and address spaces

[edit]

Variables are declared with `let` (immutable), `var` (mutable), or `const` (compile-time constant). Storage classes (address spaces) include `function`, `private`, `workgroup`, `uniform`, and `storage` with `read` or `read_write` access as applicable.[1] WGSL defines explicit layout and alignment rules; attributes such as `@align`, `@size`, and `@stride` control data layout for buffer interoperability.[1]

### Functions and control flow

[edit]

Functions use explicit parameter and return types. Control flow includes `if`, `switch`, `for`, `while`, and `loop` constructs, with `break`/`continue`. Recursion is disallowed; entry-point call graphs must be acyclic.[1]

### Entry points and attributes

[edit]

Shaders define stage entry points with `@vertex`, `@fragment`, or `@compute`. Attributes annotate bindings and interfaces, including `@group`, `@binding` (resource binding), `@location` (user-defined I/O), `@builtin` (stage built-ins such as `position` or `global_invocation_id`), `@interpolate`, and `@workgroup_size`.[1]

### Resources

[edit]

WGSL exposes buffers (`uniform`, `storage`), textures (sampled, storage, and multisampled variants), and samplers (filtering/non-filtering/comparison). The binding model is explicit via descriptor sets called groups and bindings, matching WebGPU’s pipeline layout model.[2][1]

## Compilation and validation

[edit]

Browsers compile WGSL to platform-appropriate representations and native driver formats; the specific compilation pipeline is not observable by web content.[2] WGSL source undergoes strict parsing and static validation, and WebGPU enforces robust resource access rules to avoid out-of-bounds memory hazards, contributing to predictable behavior across implementations.[2][1]

## Shader stages

[edit]

WGSL supports three pipeline stages: vertex, fragment, and compute.[1]

### Vertex shaders

[edit]

Vertex shaders transform per-vertex inputs and produce values for rasterization, including a clip-space position written to the `position` builtin.[1]

#### Example

[edit]

/* Transforms positions by an MVP matrix and passes through color. */

struct VertexInput {
@location(0) position : vec3f,
@location(1) color : vec3f,

struct VertexOutput {
@builtin(position) clip_position : vec4f,
@location(0) color : vec3f,

@group(0) @binding(0)
var<uniform> mvp : mat4x4f;

@vertex
fn main(v_in : VertexInput) -> VertexOutput {
var v_out : VertexOutput;
v_out.clip_position = mvp * vec4f(v_in.position, 1.0);
v_out.color = v_in.color;
return v_out;

### Fragment shaders

[edit]

Fragment shaders run per-fragment and compute color (and optionally depth) outputs written to color attachments.[1]

#### Example

[edit]

/* Writes an interpolated color with opaque alpha. */

@fragment
fn main(@location(0) color : vec3f) -> @location(0) vec4f {
return vec4f(color, 1.0);

### Compute shaders

[edit]

Compute shaders run in workgroups and are used for general-purpose GPU computations.[1]

#### Example

[edit]

/* Doubles elements from an input buffer into 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;

## Differences from GLSL and HLSL

[edit]

Compared with legacy shading languages, WGSL:

* Omits a preprocessor and requires explicit types and conversions.[1]
* Uses explicit address spaces and binding annotations aligned with WebGPU’s model.[2]
* Enforces strict validation to avoid undefined behavior common in other shading languages.[1]
* Defines a portable, web-focused feature set; 16-bit types and other features are opt-in and may depend on device capabilities.[2]

## See also

[edit]

* WebGPU
* SPIR-V
* W3C

### Other shading languages

[edit]

* 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

## References

[edit]

1. ^ a b c d e f g h i j k l m n o p q r s t "WebGPU Shading Language (WGSL)". W3C. Retrieved 2025-08-07.
2. ^ a b c d e f g h i j "WebGPU". W3C. Retrieved 2025-08-07.
3. ^ "WGSL (WebGPU Shading Language)". MDN Web Docs. Retrieved 2025-08-07.
4. ^ "WebGPU Explainer". W3C GPU for the Web Community Group. Retrieved 2025-08-07.

## External links

[edit]

* WebGPU Shading Language Specification – Official W3C specification
* WebGPU Specification – WebGPU API specification
* WGSL in the GPU for the Web repository – Development directory of the WGSL specification
* MDN: WGSL (WebGPU Shading Language)

* v
* t
* e

World Wide Web Consortium (W3C)

Products,
standards|

| Recommendations|

* ActivityPub
* Activity Streams
* ARIA
* Canonical XML
* CDF
* CSS
* Animations
* Flexbox
* Grid
* DOM
* EXI
* EmotionML
* Geolocation API
* HTML
* HTML5
* IndexedDB
* ITS
* JSON-LD
* Linked Data Notifications
* MathML
* Micropub
* OWL
* PLS
* RDF
* Schema
* RDFa
* SISR
* SKOS
* SMIL
* SOAP
* SRGS
* SRI
* SSML
* SVG
* Filter Effects
* SCXML
* SHACL
* SPARQL
* Timed text
* VoiceXML
* WebAssembly
* WoT
* TD
* Web storage
* WSDL
* Webmention
* WebSub
* WebVTT
* WOFF
* XHTML
* +RDFa
* XML
* Base
* Encryption
* Events
* Information Set
* Namespace
* Schema
* Signature
* XForms
* XInclude
* XLink
* XOP
* XPath
* 2.0
* 3.x
* XPointer
* XProc
* XQuery
* XSL
* XSL-FO
* XSLT
* elements

|

Notes|

* IndieAuth
* XAdES
* XBL
* XHTML+SMIL
* XUP

Working drafts|

* CCXML
* CURIE
* EME
* InkML
* MSE
* RIF
* SMIL Timesheets
* sXBL
* WebGPU
* WebXR
* XFDL
* XFrames
* XMLHttpRequest

Guidelines|

* Web Content Accessibility Guidelines

Initiative|

* Markup Validation Service
* Web Accessibility Initiative
* Web Components

Deprecated|

* C-HTML
* HDML
* JSSS
* PGML
* VML
* WebPlatform

Obsoleted|

* P3P
* XHTML+MathML+SVG

Groups,
organizations|

* WHATWG
* Defunct: World Wide Web Foundation

Elected|

* AB
* Board
* TAG

Working|

* CSS
* SVG
* WebAssembly
* WebAuthn

Community, business|

* Web Advertising BG
* WebAssembly CG

Closed|

* Device Description (DDWG)
* HTML
* Multimodal Interaction Activity (MMI)

Software|

* CERN httpd
* Libwww

Browsers|

* Line Mode (1990–)
* Arena (1993–98)
* Agora (1994–97)
* Argo (1994–97)
* Amaya (browser/editor, 1996–2012)

Conferences|

* International World Wide Web Conference (IW3C)
* Steering Committee (IW3C2)
* First conference ("WWW1", 1994)

* v
* t
* e

Computer graphics

Vector graphics|

* Diffusion curve
* Pixel

2D graphics|

* Alpha compositing
* Layers
* Text-to-image

| 2.5D|

* Isometric graphics
* Mode 7
* Parallax scrolling
* Ray casting
* Skybox

|

3D graphics|

* 3D projection
* 3D rendering
* (Image-based
* Spectral
* Unbiased)
* Aliasing
* Anisotropic filtering
* Cel shading
* Fluid animation
* Lighting
* Global illumination
* Hidden-surface determination
* Polygon mesh
* (Triangle mesh)
* Shading
* Deferred
* Surface triangulation
* Wire-frame model

Concepts|

* Affine transformation
* Back-face culling
* Clipping
* Collision detection
* Planar projection
* Reflection
* Rendering
* Beam tracing
* Cone tracing
* Checkerboard rendering
* Ray tracing
* Path tracing
* Ray casting
* Scanline rendering
* Rotation
* Scaling
* Shadow mapping
* Shadow volume
* Shear matrix
* Shader
* Texel
* Translation
* Volume rendering
* Voxel

Graphics software|

* 3D computer graphics software
* animation
* modeling
* rendering
* Raster graphics editors
* Vector graphics editors

Algorithms|

* List of computer graphics algorithms

*[WG]: Working Group
*[CG]: Community Group
*[v]: View this template
*[t]: Discuss this template
*[e]: Edit this template