shadertown

3D backgrounds with nothing to load

A 3D animation background usually means a scene: models to load, materials to set up, a camera to place, a library to do it with. These have depth and none of that — the geometry is a formula the GPU walks per pixel.

Depth without a scene

Raymarching asks a different question than a scene graph does. Instead of drawing triangles, each pixel steps a ray forward until it hits a surface described by an equation — so black-stone terraces receding into the dark, or rolling grassland under a low sun, are a handful of lines rather than a mesh. Nothing is downloaded, because there is no model to download.

What that buys

No asset pipeline, no loading state, and no three.js in the dependency tree. The whole background is the WGSL and its uniforms, which means the camera, the light and the terrain are numbers you can drag — and the pointer can move any of them. It renders at the resolution of the element, so it is exact on a retina screen instead of upscaled.

What it does not buy

A raymarched background cannot show your product, your logo in three dimensions, or anything an artist modelled. If the scene has to be a particular object, a real 3D pipeline is the right tool and this is not it. What is here is atmosphere with depth in it — a place for the headline to sit in front of.

Walk a ray through one

Open a 3D shader and drag the pointer. Camera, light and terrain are all on sliders, free in the browser.