Botanics: A Three.js Plant Study

Plantlike forms in a browser tab, no loops or cheap wiggle in sight. Sujen Phea's Three.js scene leans on instancing, careful shaders, and a scene budget that stays out of its own way. Open it, let it run, and see how long before you remember to close it.

0:00
/0:30

A real-time browser scene of slowly drifting plantlike forms lit softly against a dark backdrop, rendered with Three.js.

"Botanics" looks quiet until you read the spec sheet. 15,000 instanced grass blades bend under a GPU fluid simulation standing in for wind. Volumetric ray-marched spotlights cut through the scene. 500 GPU-computed particles drift past procedural flowers and fireflies, with bloom and motion trails smeared gently over the top. All of it real-time, all of it in a browser tab, and none of it shouting about it. The camera breathes. Leaves catch light the way leaves do. You'll find yourself still watching after you meant to close the tab, which is, I suspect, the whole point.

Sujen Phea has been quietly stacking up these Craft entries for a while, and this one sits near the top of the pile for knowing what to leave out. The technical read is Three.js pushed in the directions that actually pay off: instancing where it counts, a fluid sim doing the work a noise function would fake, volumetric lighting that earns its frame budget, and a scene that never tips into "please close this tab."

Open it on a good monitor and let it settle. Few developers are this deliberate about what they take out.

Launch Demo
ShowcaseWebGLThree.jsShadersCreative CodingGenerative ArtPlantsTree