Matera Digital

Triangle Shader Lab

Project Write-up

Triangle Shader Lab · WebGPU learning lab with Next.js and WGSL

A WebGPU learning lab built with Next.js, TypeScript, WGSL, and Bun. Two canonical demos — a hello triangle and a textured cube — with source-first exploration and code-to-render correlation. Minimal UI focused on the canvas. Static export to GitHub Pages.
Problem

User need

I wanted to learn WebGPU from the ground up — not by reading specs in isolation, but by writing real WGSL shaders and seeing them render immediately. The lab needed to be source-first: every demo should correlate directly to the code that produced it, with a minimal UI that keeps the focus on the canvas.

Solution

What I built

A WebGPU learning lab built with Next.js, TypeScript, WGSL, and Bun. It ships two canonical demos — a hello triangle and a textured cube — each with source-first exploration so you can trace code to render output. The UI is intentionally minimal, focused on the canvas. The project was originally forked from leaf-js but has been completely rewritten with no shared code. It static-exports to docs/ for GitHub Pages via bun run build:pages.

Demos

  • Hello triangle — the canonical WebGPU first render
  • Textured cube — vertex buffers, uniforms, and texture sampling
  • Source-first exploration with code-to-render correlation
  • Minimal UI focused on the canvas

Architecture

  • lib/webgpu/triangle-demo.ts — adapter/device setup, render loop
  • lib/webgpu/samples/hello-triangle/main.ts — triangle demo entry
  • lib/webgpu/samples/textured-cube/main.ts — cube demo entry
  • components/sections/webgpu-showcase.tsx — canvas-focused UI
  • GitHub Pages static export to docs/
  • Build: bun run build:pages
My Role

What I did

  • Completely rewrote the project from a leaf-js fork — no shared code remains
  • Built the WebGPU adapter/device setup and render loop in triangle-demo.ts
  • Implemented the hello triangle and textured cube demos in WGSL
  • Built the canvas-focused showcase component
  • Configured GitHub Pages static export to docs/
  • Collaborated with contributors: deondreE (21 commits), BradleyMatera (16), Copilot (10), The-Unknown-Terrian (7)
What's in the Repo

Real artifacts you can verify

  • GitHub repo: github.com/BradleyMatera/TriangleDemo
  • Live demo: bradleymatera.github.io/TriangleDemo
  • Created: January 12, 2025
  • Commits: 63 commits
  • Contributors: deondreE (21), BradleyMatera (16), Copilot (10), The-Unknown-Terrian (7)
  • Key files: lib/webgpu/triangle-demo.ts, lib/webgpu/samples/textured-cube/main.ts, lib/webgpu/samples/hello-triangle/main.ts, components/sections/webgpu-showcase.tsx
  • Build: bun run build:pages — static export to docs/
  • Honest limitations: "This branch is not affiliated with or endorsed by the original leaf-js or its author. It's a full rewrite for experimentation and learning." "This project is not a graphics engine. It is not a beginner-friendly version of something bigger. It is a small WebGPU learning space."
Tech Stack

Technologies used

Next.jsTypeScriptWGSLWebGPUBunGitHub Pages