3D · WebGL2

⛰️ Particle Terrain

A GPU particle world you fly over and tear apart

A real WebGL/Three.js hero: a quarter-million GPU particles form a cyan-to-gold heightmap terrain, the camera flies over it, a depth scan reconstructs the surface, then it hands you the cursor — repulse, attract, vortex or explode.

move your cursor · click & drag to explode · switch modes and the renderer below

WebGL2 · GPUthree.js + raw WebGL

The terrain hero — the network's first real WebGL scene. A quarter-million GPU particles form a cyan-to-gold heightmap terrain; the camera flies over it, a depth scan reconstructs the surface into a solid cloud, it holds, then hands you the cursor. Repulse, attract, vortex or explode (auto-cycling or pinned), click-drag to blow clusters into trailed free particles. Switch the renderer between three.js and raw WebGL live.

~/your-project — install

# in your repo, ask your coding agent:

$ "use the terrain skill — implement the Particle Terrain hero"

webgl2three.jsgpu particlespointer reactiveskill source on GitHub

FAQ

Do I need WebGL?

Yes — this one is deliberately the GPU tool. It needs WebGL2 with float render targets; on unsupported browsers it shows a static poster instead of crashing.

three.js or no dependency?

Both ship. The default renderer is three.js; a raw-WebGL2 backend with the identical shaders is one click away if you'd rather add no dependency.

Is it heavy?

It caps device pixel ratio, scales particle count to the surface, and pauses when offscreen or the tab is hidden. Reduced-motion skips the flyover to a static terrain.

Particle Terrain — A GPU particle world you fly over and tear apart