A real-time voxel rendering experiment running directly in the browser, inspired by engines like Minecraft.
This project began as a personal challenge to replicate the voxel terrain aesthetic seen in Sebastian Aaltonen's WebGPU demos. My goal was to achieve a similar visual style and performance using standard WebGL via Three.js. It serves as a study on rendering optimization, procedural generation, and 3D game logic within the browser.
- Procedural Generation: Terrain is mathematically generated using noise algorithms (sine waves), automatically creating valleys and mountains.
- Optimized Rendering: Uses
THREE.InstancedMeshto draw thousands of blocks with a single Draw Call, maintaining 60 FPS. - Basic Physics: Simple collision system with the ground and simulated gravity.
- Interaction: Raycasting for block detection and visual destruction.
- FPS Controls: Classic WASD movement + Jump and mouse look (Pointer Lock).
- JavaScript (ES6 Modules)
- Three.js (3D Library)
- HTML5 & CSS3
| Key | Action |
|---|---|
| W, A, S, D | Move character |
| SPACE | Jump |
| MOUSE | Look around |
| LEFT CLICK | Break block (Visual) |
| ESC | Pause / Unlock cursor |
To run this project on your machine, you will need a simple local server (due to browser ES6 module security policies).
Instead of creating 20,000 separate Mesh objects (which would crash the browser), i create just one geometry and one material. InstancedMesh replicates this object thousands of times on the GPU, allowing for vast worlds with no performance drop.
Currently, the collision system uses a mathematical heightmap function to determine ground level, separate from the visual mesh.
- Known Limitation: When breaking a block, it disappears visually (scale set to 0), but physical collision remains at the original location based on the math calculation.
- Inspired by the graphics engineering work of Sebastian Aaltonen.
- Built with Three.js.