• 

  Screenshot of a sample landscape, made in Terraform Studio

TerraForm Studio

Inspiration

The inspiration for TerraForm Studio came from a simple yet powerful vision: to create a digital sandbox where anyone could "play god" with geology. I wanted to move beyond static 3D modelers and build a living, breathing landscape engine that exists entirely within a browser tab—making world-building accessible, tactile, and immediate.

What it does

TerraForm Studio is an interactive 3D landscape architect. Users can sculpt terrain in real-time using professional-grade tools like Raise, Lower, Flatten, and Smooth. Beyond shaping the land, users can paint ecosystems (Grass, Rock, Snow, Sand), simulate water levels with real-time wave displacement, and mark landmarks with billboarded UI signposts. The app features atmospheric themes (Day, Night, Mars) and allows users to save their progress or export their entire world as a standalone, interactive HTML file.

How I built it

The application is built using React 19 and Three.js via React Three Fiber. To achieve high performance, I utilized optimized buffer attributes to handle large vertex counts at 60fps. I developed a custom "Crust" system that dynamically generates side-walls and a base for the terrain mesh, giving the floating landmasses physical weight. The UI is crafted with Tailwind CSS and Lucide React, focusing on a high-fidelity, professional aesthetic.

Challenges I ran into

The primary hurdles were mathematical. I spent significant time battling normal vector calculations and coordinate inversions. Specifically, mapping a 2D mouse position on the screen to the 3D local space of a rotated PlaneGeometry for precise sculpting was a complex challenge. Ensuring that the "Crust" geometry stayed perfectly synced with the terrain's surface during rapid manipulation also required deep performance tuning.

Accomplishments that I'm proud of

I am particularly proud of the Dynamic Crust and Side-Wall Synchronization System. This engine automatically calculates and updates vertical geometry in real-time as the terrain is deformed, providing the landscape with a sense of physical "mass" and a miniature-world aesthetic that is often lost in flat heightmap editors. Achieving this level of procedural geometry generation while maintaining a consistent 60fps on high-resolution grids was a major technical milestone.

Role of Gemini 3

Gemini 3 Pro Preview acted as my Lead 3D Architect. It was central to synthesizing the complex interpolation math used in the "Smooth" and "Flatten" algorithms. Gemini’s massive context window allowed me to design the ProjectService holistically, managing the serialization of large Float32Arrays. Furthermore, Gemini helped me re-conceptualize my world-to-local space projection logic to fix precision errors in the sculpting tools.

What I learned

I learned how to bridge the gap between abstract mathematical models and human artistic intent. This project taught me that performance in WebGL isn't just about vertex counts, but about efficient state management and buffer updates. Most importantly, I learned how generative intelligence can accelerate the development of complex 3D interactive systems.

What's next for TerraForm Studio

The next frontier for TerraForm Studio is becoming "AI-Native." I plan to integrate a Text-to-World interface where Gemini 3 can directly manipulate the heightmaps and bio-types through natural language prompts. I also look toward expanding into multi-tile infinite terrain generation and adding procedural ecosystem growth simulations.

Built With

• lucidereact
• react
• tailwindcss
• three.js