YourCraft: 3D Voxel Engine
Chunk meshing, hidden face removal, and procedural generation in Three.js.
Rendering a procedural 3D voxel sandbox in a browser requires overcoming memory and GPU draw call bottlenecks. A typical player view distance contains over 250,000 blocks. If each block was an individual mesh, standard browsers drop to unplayable framerates. YourCraft achieves stable 60 FPS performance through three core techniques:
1. Chunk Partitioning & Consolidation
The procedural world is segmented into 16x16x16 block chunks. Rather than rendering separate cubes, visible block faces in a chunk are merged into a single consolidated Three.js BufferGeometry. This reduces draw calls per frame from tens of thousands down to fewer than 50.
2. Neighbor Boundary Face Culling
Most voxels in underground terrain are enclosed by neighboring opaque blocks. During chunk geometry generation, an adjacency check evaluates whether each block face neighbors an empty air block. Faces touching another solid block are discarded entirely before vertex buffers are allocated.
3. Single Texture Atlas Mapping
Binding separate image textures for stone, dirt, grass, and wood causes frequent GPU state changes. YourCraft maps block textures onto a single unified 1024x1024 pixel texture atlas. Vertex UV coordinates on the consolidated geometry point directly to atlas coordinates, executing terrain rendering in a single material pass.