AMAR PRITHIBI
A Minecraft-inspired procedural 3D voxel sandbox engine built from scratch in Three.js and WebGL.
ROLE
Graphics Programmer & Solo Developer
STACK
Three.js / WebGL / JavaScript / Perlin Noise
YEAR
2026
STATUS
[Active]Context & Background
An exploration into 3D procedural terrain generation, chunk management, and WebGL rendering optimization in browser environments.
Problem Statement
Rendering thousands of individual cube meshes naively in Three.js causes extreme draw call overhead and rapidly drops frame rates below playable levels.
Must maintain 60 FPS in modern desktop browsers
Real-time block modification (raycasted block placement and destruction)
Dynamic chunk loading and memory recycling around player position
Architectural Blueprint
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.
Implementation Choices & Outcomes
Custom procedural generation in JavaScript instead of loading static pre-baked models
Enables arbitrary world exploration and dynamic destruction of voxel elements in real time.
Complete freedom in world shaping and minimal initial asset download.
Pointer Lock API for first-person FPS style camera navigation
Provides intuitive, immersive mouse navigation matching standard 3D desktop gaming paradigms.
Precise look-around physics and natural movement mechanics.
Architectural Tradeoffs
Client-side generation vs server chunk streaming
- + Completely serverless, zero hosting compute costs
- + Instant response to local edits
- - Heavier CPU utilization on client threads during initial chunk generation
Optimization Strategies
- ⚡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
Challenges Solved
- #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
Retrospective & Next Iteration
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.