Voxel World is a cellular automata based Voxel game using WebGL that aims to be 3D sandbox version of the popular Powder Toy game. You can check out a working version here.
The terrain is split into chunks and each chunk is stored as a texture. Since the minimum number of supported texture binds per draw call is 8, only 2x2 chunks are loaded at a time. The chunk data is then passed to a raycasting shader rendered on a quad on the screen. We can enhance performance by decreasing the size of the quad and then scaling it up to the screen size in another drawing call. This action reduces the overall image quality, thereby decreasing the number of pixels the raycasting shader needs to process. On the final render pass a postprocessing shader effect adds god rays by computing the sun's position relative to the screen and utilizing the depth buffer. Additionally it performs a custom antialising filter that softens pixels.
water.reflections.mp4
Since WebGL does not support compute shaders, Voxel World uses the fragment shader to calculate the cellular automata based physics. It does so by sampling the chunk data from the texture, computing the next state and rendering it to a framebuffer. It uses the texture attached to the framebuffer for the next iteration.
Each voxel keeps track of following information and are updated accordingly in the simulate shader:
- type - Sand, Grass, Stone, ...
- integrity - if voxel is in air or overhang is too large, voxel will drop
- temperature
- velocity
- light level
integrity.test.mp4
LightAndWaterSimulation.mp4
The terrain is generated with perlin noise inside the global.glsl shader.
Preview.mp4
To test the game locally first clone this repository, install dependencies, run the local test server and finally open it in your browser at http://localhost:8081/
git clone https://github.com/danielfvm/VoxelWorld
cd VoxelWorld
npm install
npm run serve
- WebGL Report for checking GPU features
- Raycasting based on this shader