Three Chunk Voxel Engine

Minecraft-like voxel and chunk-based rendering engine built with Three.js.

Key Features

• Chunk-Based Architecture: Efficiently divides the 3D voxel space into $16 \times 16$(x and z) chunks for localized mesh generation.
• Hybrid Occlusion Culling: Fast-path (bounding box overlap) and slow-path (2D projection + survivor point-in-polygon checks) culling algorithms to hide occluded faces, significantly reducing draw calls.
• Interactive Debug Tools: Integrated GUI controller (using lil-gui) to toggle wireframe rendering, visualize chunk boundaries, and display culled faces in red.

Core Architecture

1. World & Chunk Management

• World: Serves as the global coordinator. It manages chunks within a hash map (using x, y, z keys) and calculates global-to-local coordinate transformations.
• Chunk: Represents a $16 \times 16$ segment of blocks. It stores block data in a 1D flat array and builds a combined single THREE.BufferGeometry for the visible faces within the chunk.

2. Custom Block System

Each block type (inheriting from the base Block class) defines:

• id: Unique identifier (TODO: Export blocks' names instead of numbers).
• isOpaque: Determines if the block is fully opaque.

This allows blocks like Fence or Stair to dynamically adjust their shape configurations (e.g. connections to adjacent blocks).

3. Occlusion Culling Algorithm

The engine implements a Hybrid Occlusion Culling Algorithm:

• Fast Path (Bounding Box Check): For standard solid cubes touching each other, it uses a quick 2D bounding box projection check to verify if a face is fully occluded by its neighbor.
• Slow Path (Point-in-Polygon Check): For complex shapes (e.g. Slab next to Stair), it projects face corners to a 2D plane and uses a "survivor" ray-casting check to determine if any portion of the face is visible or if opposing faces fully block it.

Usage

Install Dependencies

npm install

Development Server

npm run dev

Production Build

npm run build

Changelog