Deep Forest Canopy WebGL — 3D Raymarched Simulation
About This Simulation
Deep Forest Canopy is rendered entirely in real time on your GPU using a GLSL fragment shader and SDF raymarching, with the camera tilted to look almost straight up. A ring of tapered tree trunks — signed-distance cylinders that narrow with height — recedes into a bright overhead sky opening, converging naturally the way real timber does when you crane your neck back in a forest. Above them, a thin dome shell perturbed by layered 3D fractal noise (FBM) stands in for the leaf mass; a second noise field punches irregular gaps into that shell, so patches of sky and warm god-rays spill through exactly where the foliage happens to be thin. Since there is no branch mesh to displace with a vertex shader, wind sway is instead applied as a small time-varying offset to the sample position before every trunk and canopy distance check — the raymarching equivalent of vertex displacement, scaled so trunk bases stay still while canopy tips drift the most. A handful of occasional leaves, spawned sparsely from a repeating cell grid, tumble gently down through the frame to complete the scene.
Technique
SDF Raymarching
Foliage
FBM Noise Shell
Lighting
Volumetric God-Rays
Motion
Shader-Domain Wind Sway
Frequently Asked Questions
How are the tree trunks rendered without any 3D models?
Every trunk is a signed-distance function — a tapered cylinder shape described purely by a mathematical formula, not a mesh. A ray is cast for each pixel and stepped forward using that formula until it reaches a surface, so an entire ring of converging trunks exists only as a few lines of shader math, no geometry data at all.
How does the leaf canopy get its lumpy, organic shape?
Modelling thousands of individual leaves would be far too slow to raymarch. Instead, a thin dome shell is perturbed by 3D fractal noise (FBM, layered value noise), so its surface reads as a dense, uneven mass of foliage rather than a smooth ball — the same trick used to sculpt clouds and terrain in shader art.
How do the gaps in the canopy let sky through?
A second noise sample is compared against a threshold: wherever the noise value crosses that threshold, the canopy shell is pushed far away from the ray, so the raymarch simply passes through to the bright sky behind it. Raising or lowering the threshold — the Dense/Open control — makes those gaps rarer or more frequent.
What are the god-rays and how are they faked cheaply?
Real volumetric light scattering is expensive to simulate. Here, a handful of points are sampled along each view ray and the same canopy-gap noise is checked at each one; where a gap exists, a small warm-toned glow is added. Stacked together and animated slowly, these samples read as soft shafts of golden light streaming down through the leaves.
Why is the wind sway coded in the fragment shader instead of the vertex shader?
This scene has no branch mesh at all — the whole picture is one fullscreen triangle drawn by a trivial vertex shader. To get the effect of wind moving the canopy, the fragment shader instead offsets each sample point sideways by a small sine-and-noise field before checking it against the trunk and canopy shapes, scaled so trunk bases stay planted and canopy tips sway the most — the raymarching equivalent of displacing a vertex mesh.
How do the falling leaves work without simulating physics?
Space is divided into a repeating grid of cells, and each cell is hashed to decide whether it spawns a leaf, and with what drift and tumble. Shifting the sample position downward over time before the grid lookup makes leaves appear to fall and loop endlessly, while the sparse spawn rate keeps only a few visible at once instead of a blizzard of them.
What is the Dense vs Open canopy control?
This toggle adjusts the noise threshold that punches gaps in the leaf canopy shell. Dense keeps the threshold high, so the foliage reads as thick and mostly closed with only slivers of sky and light. Open lowers the threshold, opening up wider, more frequent gaps that let in more sky colour and stronger god-rays.
What sound pairs best with the Deep Forest Canopy?
Forest Rain or Gentle Wind from the Sound Mixer sit naturally underneath this scene, echoing the rustle implied by the swaying canopy. Birdsong or a soft Rain on Leaves layer also complement the golden-hour light shafts for a longer grounding session.
Does the Deep Forest Canopy work offline?
Yes. ASMR Sanctuary is a Progressive Web App. After your first visit the Service Worker caches this page and its assets, so the canopy simulation keeps running fully offline with no internet connection required.
My device is struggling — any performance tips?
Shrink the browser window or zoom in slightly to lower the canvas resolution — raymarching cost scales directly with pixel count. Portrait orientation on mobile renders fewer pixels than landscape. The Dense setting is marginally lighter than Open since fewer god-ray samples contribute light, and pausing the animation stops all rendering if you need to save battery.