GluePuddingTool

WebGPU Compute Shader Demo

Browse full WGSL shader source and WebGPU JavaScript call code for matrix addition, dot product, and reduction sum, with a JavaScript-computed CPU reference result. Detects real WebGPU browser support but does not actually dispatch the shaders to a GPU.

FreeOnline Tool
Loading…

How to Use

  1. The top of the page automatically detects whether your browser supports WebGPU (navigator.gpu) and shows the corresponding status (supported by default in Chrome/Edge 113+).
  2. Switch between three tabs — Matrix Addition, Dot Product, Reduction Sum — each showing the matching WGSL compute shader source and a complete WebGPU JavaScript API call example.
  3. Adjust the matrix size / vector length / array length dropdown, or click "Load Sample Data" — the tool generates a random matrix or vector locally in JavaScript and computes the result (sum, dot product, reduction) as a CPU-side reference for comparison against the GPU version.
  4. Click "Copy Code" in the top-right of any code block to copy the WGSL shader source or the JavaScript call code into your own project for real WebGPU integration.

Features

  • Detects genuine WebGPU support in your browser (navigator.gpu) and displays a clear supported/unsupported message.
  • Provides 3 complete educational WGSL compute shaders: matrix addition (one thread per element), vector dot product (atomic-add reduction), and reduction sum (workgroup shared-memory tree reduction).
  • Provides matching end-to-end WebGPU JavaScript API code — device/buffer/pipeline/bindGroup creation, dispatchWorkgroups, reading back results — ready to copy into a real project.
  • Computes real matrix-add/dot-product/reduction-sum results locally in pure JavaScript (via logic.js) as a CPU reference value to compare against a GPU implementation, generating random test matrices/vectors and showing formatted results.
  • Matrix size / vector length / array length are all adjustable to see input/output at different scales.
  • Every code block supports one-click copy.
  • Important boundary: this tool never actually submits the WGSL shaders to a GPU for execution. Even when WebGPU is detected as supported, the "CPU result" shown is a pure-JavaScript reference value, not a real GPU compute result. The WGSL and WebGPU JS code are reference text for copying — nothing runs on the GPU from this page.

Use Cases

Learn basic WGSL compute shader syntax
New to WebGPU and want to see how classic parallel-compute problems — matrix addition, dot product, reduction sum — are written in WGSL; study the syntax directly from the complete shader source on the page.
Get complete boilerplate for the WebGPU JavaScript API
Know you need WebGPU but aren't familiar with the full device/buffer/pipeline/bindGroup setup flow — copy the provided end-to-end call code as a starting point for your own project.
Verify your own GPU shader against a CPU reference result
Run your own WebGPU matrix-addition implementation, then compare its output against this tool's CPU-computed reference for the same random matrix to quickly spot logic bugs in your shader.
Check whether the current browser/device supports WebGPU
Before deciding to add WebGPU acceleration to a project, open this tool and check the support-detection banner at the top to confirm your target browser environment actually has WebGPU.

FAQ

Does this tool actually run these computations on my GPU?
No. Even if your browser reports WebGPU support, the "CPU result" shown here is computed in plain JavaScript on the CPU. The WGSL shader code and WebGPU API call code are static reference text for learning and copying — the page itself never creates a GPU device or submits a compute job.
Can I still use this tool if my browser says WebGPU isn't supported?
Yes. The WGSL source display, the JS call code display, and the CPU-side reference computation all work regardless of actual WebGPU support — only the support banner text at the top changes.
Why does the dot-product shader use "atomic-add reduction" with a comment saying "f32 atomic only, requires support"?
That's a reminder that floating-point atomic operations (f32 atomic) in WGSL aren't supported on every GPU/driver. The code comment also notes the fallback (a stepped reduction) — a real compatibility concern in WGSL development.
Why does the matrix size dropdown max out at 16x16?
The 4x4/8x8/16x16 presets exist so the matrix can be displayed fully and readably on the page — it isn't a size limit imposed by WebGPU itself.