Top Qs
Timeline
Chat
Perspective

WebGPU Shading Language

Shading language for WebGPU From Wikipedia, the free encyclopedia

Remove ads

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]

Quick Facts Latest version, Organization ...
Remove ads

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.[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]

Remove ads

Shader types

Summarize
Perspective

WGSL supports multiple shader stages:[1]

Vertex shaders

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

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<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;
}

Fragment shaders

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

Fragment shader example

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

Compute shaders

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

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<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;
}
Remove ads

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

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads