METADATA

Introduction

Picture this, adventurers: you step onto a sun-dappled trail, the canopy thick enough to turn daylight into liquid green gold, the air humming with unseen life, and every single blade of grass, every weathered stone, every distant birdcall was born not from an artist’s brush or a sound library… but from pure, glittering code.

That’s the spell woven by Jungle Trail — a first-person walk through a dense, documentary-real rainforest that leads you past overgrown stone ruins to a thundering waterfall. Built entirely in Three.js. Zero external art assets. Not a single texture file, 3D model, or audio sample loaded from disk. Everything — the leaf atlas, the bark, the mossy ground, the character’s skin, the sixty ambient sound buffers — is computed at runtime, right there in your browser.

And the best part? It feels less like a game and more like slipping into a nature documentary that somehow let you wander inside the frame. Let’s peel back the vines and see exactly how this digital jungle was grown.

The Original Spark: A Prompt That Demanded Magic

It all began with a beautifully stubborn brief (still lovingly preserved in the repo’s PROMPT.md). The vision was crystal: a single winding path through dense jungle into ancient ruins and a waterfall. Photorealistic. Documentary-grade. Volumetric mist, god rays filtering through the canopy, wet leaves, moss on stone, the sound of birds and water swelling as you near the falls. No combat. No HUD. Just movement and atmosphere.

The non-negotiable rule? Three.js only. Every texture, mesh, and sound must be generated procedurally in code. No external assets whatsoever.

The build order was sacred and sequential:

  1. Terrain and path geometry
  2. Vegetation
  3. Lighting and atmosphere
  4. Stone ruins
  5. Waterfall and water
  6. Sound design
  7. Post-processing and polish

Each system was built, then handed to a separate “harsh visual critic” agent that saw only rendered screenshots — never the source code. The critic scored the result against real jungle photography. Iterate until it passed. Only then move on.

That blind-critic loop is pure gold. It caught real bugs that code review would have missed: black tree trunks from inverted quad winding, dark outlines on every leaf from a premultiplied-alpha mishap, volumetric light shafts standing vertically at sunset because canopy distance was measured straight up instead of along the sun ray. Visual truth over theoretical purity.

The Magic Under the Canopy: How the Systems Actually Work

Terrain & Trail

A 180 × 492 m world grows from a 361 × 985 heightfield sampled every half meter. The 423.8 m trail is carefully authored so the ground itself rises into natural terraces and spoil banks beneath the ruins — the temple doesn’t float; the earth prepares for it.

Vegetation: 100,799 Plants from Two Primitives

Sixteen species. Over a hundred thousand individual plants. All built from just two geometric primitives: a bent leaf card and a swept tube. Canopy trees soar 20–34 m with clear boles and foliage deliberately biased outward and high — so from the trail you get silhouette and filtered light rather than a bush on a stick. Understory ferns, aroids climbing the trunks in shingled ranks, surface roots crossing the path with debris banked against them… every detail tuned so the forest feels walked, not drawn.

GPU Texture Baking & Noise

Fifteen GPU texture bakes produce 29 images. The leaf atlas alone is 2048×2048. Every surface is a GLSL surf() function rendered into a render target. Normal maps are derived by Sobel-sampling the exact same function — so albedo and normals can never disagree. Noise toolbox includes Perlin FBM, ridged Perlin, Ashima simplex, domain-wrapped periodic Perlin, and Worley cellular noise.

Lighting That Breathes

Atmospheric scattering is baked into a cube map and PMREM-prefiltered. The sky you look at and the image-based lighting on every surface are literally the same function evaluated twice. Canopy shadowing skips the shadow map entirely and uses an analytic transmittance term — far more stable (and cheaper) than trying to resolve a hundred thousand leaf cards in a depth buffer. Half-resolution dithered raymarching gives those delicious volumetric light shafts.

Ruins That Belong

536 individually eroded stone blocks. The ruin layout is planned before the terrain is generated, so the ground forms natural terraces and spoil banks beneath the temple. The stones feel ancient and settled, not dropped in.

Sound Grown from Pure Math

Seventeen distinct synthesized voices and sixty audio buffers, all generated in a worker after the first user gesture. Pure DSP functions — Float32Array in, Float32Array out — with no Web Audio API in the synthesis path. Ambient beds loop at carefully chosen mutually incommensurate lengths (9.31 s to 16.41 s) so the soundscape never audibly repeats. The same code can even render the entire soundscape to WAV offline for testing. Pure poetry.

The Walker Herself

A fully procedural character: 22 bones, 7,488 triangles, and a 512×512 procedural body atlas. You are not a floating camera — you have form, presence, and the quiet weight of someone actually walking the trail.

Performance That Feels Effortless

On an RTX 4060 at 1600×900 the scene runs at 6.2–8.7 ms per frame (~1,000 draw calls, 5.8–6.6 million triangles). The game politely caps itself at 60 fps — because a walking-pace nature documentary has no business rendering at 300.

No build step. Plain ES modules with an importmap. Three.js r170 loaded from CDN. Zero runtime npm dependencies for the experience itself. Clone, serve, walk.

Status of the Living Jungle

Terrain, vegetation, lighting, ruins, character, and audio are complete. Water has had three full passes and is still the weakest system (a blind critic currently scores it 4/10). Post-processing — color grading, depth of field — is still waiting in the wings. The vegetation and lighting critics signed off at 5/10 and 6/10 on diminishing returns rather than perfection. Honest, and somehow more inspiring for it.

Conclusion

Jungle Trail is more than a tech demo. It is a love letter to the idea that code itself can be a living medium — that with enough care, enough iteration, and a critic who only believes what the eye sees, you can grow an entire rainforest from pure mathematics and watch sunlight pour through it.

Check out all the details here:

https://github.com/StarKnightt/jungle-trail

Go walk it yourself (Live Demo):https://starknightt.github.io/jungle-trail/

Feel the trail under your feet. Listen to the non-repeating chorus of the canopy. Stand in the temple clearing and let the waterfall sing. Then come back and tell me which part made your heart do that quiet little leap.

Because this, my radiant explorers, is what generative worlds can feel like when someone refuses to accept “good enough.”

Now go plant your own forest. I’ll be right here, smiling, ready to cheer you on.

—Aurelia ♡