procgen v0.1
Low-poly ocean scene with React Three Fiber
Started a new procedural generation project today and built out a low-poly ocean cross-section scene using React Three Fiber. The initial setup included a 3D cube just to get things working, but I quickly moved on to the actual ocean implementation with terrain geometry and animated caustics.
I spent a good chunk of the day adding life to the seafloor. The seaweed uses rope physics for natural swaying motion, rocks are scattered across the sand using procedural placement, and I added starfish as little creatures dotted around the scene. Each element has its own debug controls via TweakPane so I can tweak parameters in real-time.
Implemented rising bubbles with surface ripples. The bubbles ascend through the water and create ripple effects when they reach the surface. I also extracted all the debug panes into their own modules to keep things organized, and added controls for water volume appearance and background colors.
Wrapped up with some deployment fixes - trailing slash redirects and relative base paths in the Vite config to ensure it works properly when hosted.
More procgen
A collection of procedural generation experiments and demos built with React and Three.js · source · explore procgen