Triangle Shader Lab learning WebGPU: seeing the code and render together.
This site shows the WebGPU hello triangle and textured cube examples in a clean web layout. You can see the live render and the code that makes it work at the same time.
A simple WebGPU study
Triangle Shader Lab is a small project built to help understand WebGPU basics. It shows the canonical hello triangle and textured cube demos with a clean UI so you can see the code and render together.
Independent lineage
Originally forked years ago, this branch no longer shares code, intent, or affiliation with the upstream leaf-js project. Treat it as a standalone WebGPU study.
Code-first orientation
Every section points back to the compact WebGPU implementations in lib/webgpu/triangle-demo.ts, samples/textured-cube/main.ts, and samples/hello-triangle/main.ts.
Focused demos
We keep both the textured cube and hello triangle on tap so it is easy to trace how buffers, shaders, and command submission interact.
Reproducible setup
Bun scripts and static export targets make it simple to run locally, rebuild, and share experiments on WebGPU-capable browsers.
Expect a clear starting point rather than a broad engine. The UI helps you map WebGPU setup calls, but the work happens in the source. This branch is independent from the original leaf-js lineage—use it freely as a sandbox to tinker with buffers, color outputs, or shader code and watch each demo respond.
See the WebGPU code and render together
Triangle Shader Lab shows the WebGPU hello triangle and textured cube demos in a clean layout. You can see the live render and the code that makes it work at the same time. Everything you see on this page maps directly to code in lib/webgpu/triangle-demo.ts.
Textured Cube
Port of the WebGPU texturedCube sample. Demonstrates textured geometry, rotating model matrices, and uniform updates each frame (see samples/textured-cube/main.ts).
Code: samples/textured-cube/main.ts
Clear setup steps
See how the adapter, device, and render pass are created in lib/webgpu/triangle-demo.ts. The code is simple and focused on the core WebGPU concepts.
Easy to modify
Change the WGSL shaders in samples/textured-cube/main.ts or samples/hello-triangle/main.ts and rebuild to see your changes right away.
Initializing…
Tip: Use a WebGPU-enabled browser (Chrome 113+, Edge 113+, Safari TP) to see the hardware-accelerated render. Modify the WGSL in samples/textured-cube/main.ts and rebuild to watch the pipeline respond.
Reference: WebGPU Samples — Textured Cube
Standard web stack with WebGPU
This project uses common web technologies with WebGPU for graphics. The focus is on showing WebGPU demos clearly, with the other tools supporting that goal without getting in the way.
WebGPU
Next-generation graphics API powering consistent, low-latency rendering across modern browsers.
TypeScript
Type-safe foundation for both client demos and server-rendered components with shared utilities.
Next.js 16 + NextUI
App Router architecture, themable design system, and dark/light modes crafted for polish.
Bun Runtime
Lightning-fast scripts for development, linting, and GitHub Pages static exports.
How the pieces cooperate
From device negotiation to command submission, the UI exists to expose the WebGPU wiring. Use these notes as a checklist while you read through the source files.
Straightforward answers
Here are the questions that usually come up when developers look at WebGPU hello triangle or textured cube samples for the first time.
Explore the WebGPU code
Start with lib/webgpu/triangle-demo.ts to see how we set up the WebGPU device and submit frames. Check out samples/textured-cube/main.ts or samples/hello-triangle/main.ts to see the WGSL shaders. These files contain the core WebGPU implementation.