Dappled Studio, Melbourne Digital Agency
A scroll journey down a creek in the Macedon Ranges, an hour north of Melbourne.
Rundown of how it’s built:
Rendering
- Everything visible is GL_POINTS, around 420k of them
- Water, banks, grass, canopy, mist and dust are all points, each with its own
shader
- Custom GLSL per subsystem rather than any built-in materials
- Simplex noise in the vertex shaders drives shimmer, dapple, and wind gusts
- Mountains, clouds and the apple tree are hand-painted watercolour plates
- Forest trees are those plates sampled into point clouds: read the pixels off a
2D canvas, emit a coloured dot per surviving pixel
Scene
- Scroll drives everything. The page scrolls natively and the camera eases toward
the scroll position each frame
- Forest is a 42m treadmill loop, so only distance-to-treeline matters
- Mid-journey the forest shifts to moonlight: light shafts retract, water glint
goes from gold to silver, canopy gets rim-lit from above, dust motes pulse as
fireflies, dragonflies fade out
- Night window is measured off the DOM position of two sections rather than
hardcoded scroll values, so it doesn’t drift when copy changes
- Butterflies and dragonflies are CPU-side: triangles computed in JS each frame,
written straight into BufferAttribute arrays
Performance
- 120fps, 8ms frames
(accidentally posted just before but forgot to include the link)