Technique reference

Five ways to put 3D
on a website

Each section is a different answer to the same question. Four run in real time in your browser and download nothing at all — the GPU generates every pixel from maths. The fifth plays back fully rendered frames. They have very different costs, which is the point of putting them side by side.

Start scrolling

01 — Scroll driven

Geometry that answers the scrollbar

02 — Interactive

65,536 particles, simulated on the GPU

Position and velocity live in floating-point textures. Every frame runs two fragment-shader passes over them — curl-noise flow, a spring back to the knot, and repulsion from your cursor. Drag to orbit.

03 — Ambient

A background that is actually 3D

No mesh, no vertices. Every pixel fires a ray into a signed distance field and marches until it hits a surface. The blobs are a torus and three spheres fused with a smooth-minimum operator.

Your content sits on top as ordinary HTML — selectable, indexable and accessible.

04 — Configurator

Real-time material and lighting

One mesh, four finishes, three lighting rigs. Each environment is a few emissive planes baked to a cube map in-scene, so there is no HDRI to download.

Colour
Finish
Lighting

Drag the product to orbit. Scroll to zoom.

05 — Rendered sequence

A Cinema 4D render, scrubbed by scroll

Real-time WebGL cannot do global illumination, caustics or true motion blur. This path can — because the frames come straight out of Redshift or Octane. The cost is interactivity and payload.

Checking for a sequence…