Examples
Every example below is a live WebGPU scene, drawn by shaders written in TypeScript and compiled to WGSL at build time.
Basics
- Rotating CubeHello world: one spinning cube, a TypeScript shader, and the WebGPU runtime.
- Lots of Cubes125,000 independently tumbling cubes in a single draw call — rotation computed on the GPU.
- CameraInteractive camera: position and rotation sliders driving a cached view-projection matrix.
- LightBlinn-Phong lighting on solid-colored faces with a movable point light.
- TextureA lit, textured cube — move the light and pick from nine CC0 textures.
- GeometryEvery built-in geometry — cube, sphere, torus knot, and friends — with a live selector.
- ShadowShadow mapping in two passes — the scene rendered from the light into a depth-tested render target, then sampled back with 9-tap PCF.
- BlendOne shader, three blend modes — opaque, alpha transparency, and additive glow, switched with a program option.
- ModelA textured spaceship loaded from a .glb file with loadGlb — CC0 model by Quaternius.
Shaders
- Shader FunctionsA visual reference example for every function in brometal/shader-functions — noise, easing, color, lighting, SDFs.
- Shader Library30 prebuilt shaders shipped in brometal/shaders — fire, raymarching, fractals, image effects — zero compilation in your app.
- Custom ShaderProcedural plasma written in plain TypeScript — helper functions, let, and for loops compiled to WGSL.
Advanced
- TerrainA 65k-vertex plane sculpted into rolling terrain by fbm noise running in the vertex shader.
- RipplesElastic ripples rolling across a surface — easing functions driving per-vertex animation on the GPU.
- Night OceanA moonlit ocean — Gerstner waves in the vertex shader, fbm micro-ripples, fresnel, and a specular glint per pixel.
- Day OceanShallow tropical water in daylight — eight Gerstner waves with an exact analytic normal, a refracted seabed with per-channel absorption, caustics, and foam that keys off steepness rather than height.
- Ball PhysicsBalls colliding in a glass tank, simulated entirely on the GPU — state lives in a float render target and never touches the CPU.
Games
- BrocraftA blocky voxel world you can fly through — the terrain, every block material, and all the culling are computed in the vertex shader.
- Star BroA playable flight experience — fly the Spitfire through an instanced asteroid field with an additive engine trail and a follow camera.
- Legend of BroA top-down overworld you can walk around — a tilemap and every animated sprite drawn from one atlas in two instanced draw calls.