This is a place to prototype using WebGPU on the web. It uses JavaScript (compiled from Typescript) to create a WebGPU context in a <canvas> element and .wgsl shaders.
- Clone repo
yarnyarn dev- Open up http://localhost:5173/
This is a standard WebGPU setup on the web, mostly inspired by tutorials and MDN examples.
The WebGPU renderer code lives in src/main.ts and runs when page loads. That script is imported into the index.html, which contains our <canvas>.
The renderer looks for a <canvas> element with the ID #gpu-canvas to create the context, or it creates a new canvas inside the #app element (usually the root <div> on the page).
We use .wgsl files for shaders. If you're using VSCode, you can get the WGSL extension to enable syntax highlighting.
Keep in mind however that this extension doesn't lint or validate your WGSL code, so you may incorrectly format something without realizing.