BELLWOOD CROSSING

A painterly real-time study · after Gabriel Nagypal

waking the forest…

BELLWOOD CROSSING

Three.js · painterly pipeline · Tenth Crown assets

drag look  ·  wheel dolly  ·  hold R raw  ·  B breakdown  ·  I how it works  ·  H hide ui

How the look is built

The reference is a matte painting: painterly strokes, one warm key light from behind, cool violet shadows, aerial haze that glows toward the sun, prismatic rays and huge scale. This page rebuilds those decisions as a real-time pipeline in Three.js. Every layer can be switched off in the breakdown panel to see what it contributes.

  1. One lighting model for everything. Props, bark, ground, grass, leaves and water all go through paintLight(): a wrapped, three-tone ramp instead of Lambert, a hue shift between warm light and violet shadow, a hot backlit rim, translucency for thin things, and a noise-perturbed "brush normal" so shading blocks in like paint instead of a smooth gradient.
  2. Aerial perspective. applyHaze() is height-dependent distance fog whose colour is mixed from lavender to cream by the angle to the sun, so the far trunks dissolve into light on one side and into violet on the other.
  3. The great root. A Catmull-Rom spline swept into a tube with cosine ridges, braided secondary roots, and root legs into the ground. The bark shader draws flowing stripes in uv space (warped with fbm), moss on upward faces, and emissive teal veins in the crevices for the bloom to catch.
  4. Mass through instancing. 95k grass blades with wind and root-to-tip gradient, 9k flower dots, ~400 camera-facing leaf cards whose textures are painted on a canvas at startup (overlapping ellipses with a highlight stroke) and shaded with a spherical normal so each cluster reads as a volume.
  5. Soft shadows + contact blobs. Variance shadow maps from the backlight (blurred, painterly), plus a dark radial decal under each prop to glue it to the ground.
  6. Reflection. The pool is a planar reflector with noise ripples, a four-tap blur so the mirror image is soft, fresnel against a teal body colour and a sun glint.
  7. The brush: anisotropic Kuwahara. A structure tensor (Sobel) is blurred and eigen-decomposed per pixel to get the local stroke direction and anisotropy. An ellipse aligned with it is split into 8 overlapping sectors (polynomial weights); the pixel takes the mean of the least-varying sectors. Flat areas become flat paint, edges stay crisp, strokes follow the forms.
  8. Prismatic god rays. Sky pixels (depth at the far plane) near the sun are the light source; two radial-blur passes march toward the sun with per-channel step lengths (dispersion) and a hue ramp across the beam, so the shafts split into a rainbow like the painting.
  9. Grade. Exposure → ACES → shadows lifted violet, highlights warmed, a little contrast and saturation, paper tooth and animated grain, ink edges from a luminance Sobel, chromatic edges and a warm vignette.

Assets: Tenth Crown meshes from the Mesh Foundry repo (TRELLIS exports), simplified to ~22% and quantized with gltf-transform. Their PBR materials are discarded; only the hand-painted base colour survives, relit by the pipeline above.