Web Procedural Terrain Generation

Procedural terrain generation platform that combines a React web interface with a Unity WebGL scene so users can tune terrain noise settings and view results directly in the browser.

What It Does

The project procedurally generates mesh terrain using mathematical noise techniques, including Perlin-style controls. Users can adjust generator parameters from the web UI and view terrain output in an embedded Unity WebGL scene.

Screenshot

How We Built It

• Frontend: React (Vite) for the interactive UI and parameter controls.
• 3D Runtime: Unity, exported as WebGL and embedded into the web app.
• Integration: React and Unity communicate so user input can be sent to the Unity scene in real time.

Current Generator Parameters

Heightmap / Noise Controls

• Scale: 45-200
• Number of octaves: 1-8
• Persistence: 0.10-1.00
• Lacunarity: approximately 1.00-3.00

Run Locally

From client/:

npm install
npm run dev

Optional checks:

npm run lint
npm run build

Acknowledgments

• Unity Asset Store Assets

  • Thanks to IOW Projects for Fristy stylize Modular Assets 2.

• Procedural Terrain Foundation

  • This project was adapted and expanded from Seb Lague's repository for our hackathon project:
  • https://github.com/SebLague/Procedural-Landmass-Generation