Examples
Every example below is a live WebGL2 or WebGPU scene, drawn by shaders written in TypeScript and compiled to GLSL and WGSL at build time. Each one picks whichever backend your browser supports and shows which it chose.
Basics
- Rotating CubeHello world: one spinning cube, a TypeScript shader, and the WebGL2 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 GLSL.
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.
- OceanA moonlit ocean — Gerstner waves in the vertex shader, fbm micro-ripples, fresnel, and specular glint per pixel.
- BrocraftA blocky voxel world you can fly through — the terrain, every block material, and all the culling are computed in the vertex shader.
- Ball PhysicsBalls colliding in a glass tank, simulated entirely on the GPU — state lives in a float render target and never touches the CPU.
- Star BroA playable flight experience — fly the Spitfire through an instanced asteroid field with an additive engine trail and a follow camera.