metal essays
Six self-contained interactive lessons that teach Metal and macOS GPU programming from first principles. The native target is Apple Silicon; here in the browser they run as WebGL2, which preserves the same shader-pipeline mental model — vertex, fragment, uniform, draw — minus the Swift glue.
The native essays live as single main.swift files you can read top to bottom; MSL shaders are embedded as Swift strings and compiled at runtime via device.makeLibrary(source:options:). The page below is the same pipeline architecture realised in WebGL2 + GLSL ES 3.00. Edit the shader, press recompile, watch the GPU listen.
hello triangle device · queue · pipeline
A triangle, three vertex colors, the fragment shader linearly interpolates them. The smallest renderer that demonstrates the whole pipeline is two shaders and a draw call.
shader playground uniform · resolution · time
A full-screen quad. The fragment shader runs once per pixel. Edit the GLSL on the left; press ⌘↵ (or the recompile button) to swap it in. Compile errors surface below.
particle system compute · 8 192 points
Eight thousand particles, position + velocity updated every frame. In Metal this is a MTLComputePipelineState dispatched on a 1D threadgroup; here it's GPU vertex transform with attractor uniforms. Click the canvas to attract.
image processing fragment · convolution kernels
A procedural test image, processed by a fragment shader. Each kernel is a different convolution; in Metal this is a 2D compute dispatch reading a texture2d<float, access::read> and writing to access::write. Same idea, fragment-shader form.