WebGPU Shader Playground - Online WGSL Editor

WGSL (WebGPU Shading Language) is the official shading language for WebGPU, designed for the web. Unlike GLSL (used in OpenGL/WebGL), WGSL uses a Rust-inspired syntax with explicit types, structured entry points, and built-in safety guarantees. Key differences include: @vertex / @fragment attributes for entry points, @location() for I/O, @group() and @binding() for resource bindings, and var<uniform> for uniform buffers. WGSL compiles to SPIR-V internally, making it portable across GPU vendors.

WebGPU is currently supported in Google Chrome 113+, Microsoft Edge 113+, and Opera 99+. Firefox and Safari are actively working on WebGPU support (available behind experimental flags). For the best experience, ensure your browser is up to date and WebGPU is enabled. You can check caniuse.com/webgpu for the latest compatibility status.

Start by selecting a preset from the dropdown menu to explore different WGSL techniques. Edit the fragment shader code in the left panel — changes are compiled in real-time with a short debounce. Use Ctrl+Enter (or Cmd+Enter on Mac) to trigger an immediate recompile. The uniforms struct provides time (in seconds) and resolution (canvas pixel size). Toggle the pause button to stop/resume animation. Copy your shader code with the copy button for use in your own projects.

The playground provides a full-screen quad with the following inputs to your fragment shader:

@location(0) uv: vec2<f32> — Normalized UV coordinates (0.0 to 1.0) across the canvas.
@group(0) @binding(0) uniforms — A uniform buffer containing:
  time: f32 — Elapsed time in seconds (updates every frame when animation is enabled)
  resolution: vec2<f32> — Canvas width and height in pixels

Your fragment shader must return @location(0) vec4<f32> representing the RGBA color output.

Common WGSL compilation errors include: type mismatches (e.g., using vec3 where vec4 is expected), missing entry point attributes (@fragment), incorrect binding declarations, and syntax errors like missing semicolons. The error panel below the toolbar will display the exact line number and description of any compilation issues. Ensure your function signature matches the expected format and all types are explicitly declared. WGSL is strictly typed — implicit conversions are not allowed.

This playground is specifically designed for fragment shaders rendering to a full-screen quad. For compute shaders (@compute entry points), a different pipeline setup is required with dispatch commands and storage buffers. However, many visual algorithms that work in compute shaders can be adapted to fragment shaders by working with UV coordinates and the uniform time value. For a dedicated compute shader playground, additional buffer management and readback capabilities would be needed.

WebGPU offers significant advantages over WebGL: lower overhead with explicit device management, modern GPU features like compute shaders and storage buffers, better error handling with detailed compilation messages, and improved multi-threading support. WebGPU's WGSL language is more consistent and safer than GLSL, with clearer resource binding models. While WebGL remains more widely supported, WebGPU represents the future of GPU programming on the web with performance closer to native APIs like Vulkan and Metal.

Excellent resources for learning WGSL include: the official W3C WGSL specification, Google's Tour of WGSL, the MDN WebGPU documentation, and community shader collections on platforms like Shadertoy (which is being adapted for WGSL). This playground itself is a great way to experiment — try modifying the presets and observe the results in real-time!