Sky & Stone
Three.js Voxel Generation & WebGL Chunk Streaming Engine Prototype
A technical programming experiment in Three.js and WebGL featuring procedural 3D voxel terrain generation, real-time chunk streaming algorithms, and custom block physics in the browser.
A Game in a Single File
One of the most impressive technical aspects of Sky & Stone is that it is a monolithic application. The entire game—HTML UI, CSS styling, 3D Engine initialization, and game logic—resides within a single HTML file.
This approach allows for incredible portability; the game can be hosted anywhere statically and runs entirely on the client side without needing a backend server or complex build tools.
The Structure:
- HTML & CSS: Defines retro pixelated UI (Inventory, Hotbar, Crafting grid, Health/Hunger bars).
- Three.js Initialization: Sets up the Scene, First-Person Camera, and WebGL Renderer.
- The Game Loop: The heartbeat of the engine, using `requestAnimationFrame` to calculate delta time, update entities, handle raycasting, and render frames 60 times a second.
- Local Storage: Saves world state and inventory so progress is retained upon refreshing.
The entire UI is built with HTML/CSS layered over the WebGL canvas.
Chunk Streaming System
The Grid System
Just like Minecraft, loading a million blocks at once would crash the browser. Instead, the world is sliced into a grid of Chunks. Every frame, the game tracks the player's X and Z coordinates and maps them to a specific chunk on the grid.
Asynchronous Queues
The game calculates a "Render Distance" radius around the player. It uses three main queues to process chunks smoothly without freezing the game:
• generationQueue: Uses Simplex/Perlin noise to decide terrain height and blocks.
• meshQueue: Takes the block data and builds the physical 3D faces.
• unloadQueue: Deletes 3D meshes of chunks left behind to free up RAM.
Chunks seamlessly generating on the horizon via the mesh queue.
Entities & Physics
Player Physics & Raycasting
The player controller handles gravity, jumping, and collision detection to navigate the blocky terrain. It uses raycasting (shooting an invisible line from the center of the camera) to detect which block the player is looking at. This allows for precise block mining and placing.
Entity AI
The game features a lightweight AI system for mobs. Zombies calculate the distance to the player and actively move toward them, creating a survival aspect, while passive mobs like cows wander randomly around the loaded chunks.
