AMAR PRITHIBI

01Context

An exploration into 3D procedural terrain generation, chunk management, and WebGL rendering optimization in browser environments.

02Problem

Rendering thousands of individual cube meshes naively in Three.js causes extreme draw call overhead and rapidly drops frame rates below playable levels.

03Constraints

1. 01Must maintain 60 FPS in modern desktop browsers
2. 02Real-time block modification (raycasted block placement and destruction)
3. 03Dynamic chunk loading and memory recycling around player position

04Architecture

A chunked voxel engine where terrain heightmaps are evaluated via 2D/3D Perlin noise and converted into optimized polygonal meshes.

Procedural Noise Generator

Multi-octave noise function creating elevation, biome variation, and cave cutouts.

Chunk Manager

16x16 horizontal chunk column loader handling coordinate transforms and neighbor queries.

Raycast Interaction Controller

Precise voxel boundary hit detection for single-block removal and placement.

05Decisions

06Trade-offs

07Performance

• ↯Chunk-based geometry updates localized to modified regions only
• ↯Frustum culling native to Three.js camera rendering pipeline
• ↯Optimized animation loop with delta-time capped physics integration

08Challenges

• #Handling boundary conditions when a block on a chunk border is destroyed, requiring adjacent chunk geometry rebuilds
• #Managing memory garbage collection spikes when rapidly flying across chunk boundaries

09Learnings

• →Draw call reduction is the single most critical factor in browser 3D graphics.
• →Separating the logical voxel coordinate grid from the rendering mesh coordinates simplifies physics and raycasting significantly.

10Retrospective

Offloading chunk mesh compilation to Web Workers and implementing Greedy Meshing algorithms to merge coplanar block faces into unified quads would drastically reduce vertex counts.