Voxel Terrain

Procedural voxel terrain generator with Three.js, featuring FBM noise, greedy meshing, and dynamic tree generation.

Three.js TypeScript WebGL

The background of this site is a real-time procedural voxel terrain rendered with Three.js. Every visit generates a unique landscape. Scroll down on the home page to see the terrain react to your movement.

Terrain Generation

The terrain uses Fractional Brownian Motion (FBM) noise with multiple octaves to create natural-looking elevation. A random seed on each page load ensures every visitor sees something unique.

Materials are classified by elevation and slope: low flat areas become grass, steep sections become rock, and everything in between gets dirt. This creates believable terrain without hand-authored rules.

Performance Optimizations

→ Face culling: Only renders faces that are actually visible (not buried inside the terrain), cutting geometry by ~80%
→ Greedy meshing: Merges adjacent voxel faces into larger quads, reducing draw calls and vertex count
→ Auto-generated textures: All terrain and foliage textures are created procedurally at runtime
→ Instanced rendering: Similar geometry shares GPU resources

Tree Generation

Six procedural tree variations with different trunk heights, branch patterns, and leaf densities. Leaves are carved from spheres using 3D noise for organic shapes. Trees use greedy meshing independently, then get placed based on terrain slope and biome rules.

Custom Shaders

The materials use world-position-based UV sampling rather than per-face UVs. This means textures tile seamlessly across merged faces and there are no visible seams at voxel boundaries.