01 · Worlds

Worlds
in shaders

Four live pieces, each written in GLSL and drawn by three.js, fresh every frame. Nothing here is a video.

  1. Terrain

    W.01

    Layered value noise raymarched as a height field. Fog by distance, light by slope. A whole landscape in about sixty lines of GLSL.

    fbm · raymarch · height field

  2. Liquid chrome

    W.02

    A sphere displaced by simplex noise, reflecting a procedural studio environment. No textures, no HDR file. The environment is a function.

    simplex · reflection · procedural env

  3. Corridor

    W.03

    An infinite repeated SDF. The camera moves forward through a space that is defined once and folded forever by domain repetition.

    sdf · domain repetition · ao

  4. Orbit

    W.04

    Twelve thousand points on a sphere, five thousand on a phone, offset by noise in a vertex shader and lit by a single hard light. Worlds do not need surfaces.

    points · noise · three.js

Notes

How a world gets built.

  1. N.01

    Start with a distance function

    Describe the world as a function that returns how far any point is from the nearest surface. Everything else, lighting, shadows, fog, falls out of that one function.

  2. N.02

    Light by hand

    No imported environment maps. The light is written as a function of direction, so it can be tuned in the same file as the geometry it lights.

  3. N.03

    Keep the frame budget visible

    Every piece runs at a fixed internal resolution and a known step count. If it cannot hold sixty frames on a phone, it is not finished.

Next

Interaction