Voxel.js: A Minecraft-like Block Based Game Engine Using Three.js, WebGL and Node - Badass JavaScript

Max Ogden and James Halliday (probably better known as substack on the internets) have been working on voxel.js, which is a block based game engine for the browser built with three.js, WebGL, and an interesting combination of Node.js based tools.  The engine is built of several small components:

voxel-engine: the main module for building voxel games - you can plug any voxel module into the engine. voxel: the logic that generates voxel world data and compresses voxel data so that it can be efficiently rendered in 3D. voxel-engine uses this. voxel-mesh: takes voxel data from the voxel module and turns it into a three.js 3D Mesh that can be displayed in a game. voxel-engine also uses this.

From there, you can add more modules to add more features to your game, including new block types and textures, effects, and even a work in progress multiplayer game server.

All of these modules are built using Node.js tools, even though it is meant to run in the browser.  How do they do this?  Using browserify, which enables you to run Node modules in the browser.  Browserify not only enables require-style modules, but also emulates most of the built-in Node modules (such as http, stream, etc.) for the browser as well.  Once you’ve included modules with npm, and written a few yourself, you bundle everything up for the browser using the browserify program, which generates a single JS file with everything you need to get things running.

There are a fewcooldemos for you to check out, and some more on the Voxel.js homepage.  For technology, Voxel.js and these demos make use of Three.js, which is a commonly used JavaScript 3D library with backends for Canvas, SVG, CSS and WebGL.  Voxel.js is using the WebGL backend, so you’ll need a browser supporting WebGL to check out the demos.

Voxel.js also takes advantage of the new Pointer Lock API, available in Chrome and Firefox.  This API enables the browser to, with your permission, disable the mouse cursor and capture all of your mouse movements within the browser window.  This way, you can’t move your mouse outside the browser window by accident while playing a game.  Of course, you can get out of the mode by hitting the escape key on your keyboard.  The Pointer Lock API is fairly new to the browser scene, but already implemented in both Chrome and Firefox.  You can see a tutorial on using the API yourself, here.

We’re seeing more and more awesome WebGL stuff these days (man I hope Microsoft gets some balls and adds it to Internet Explorer!) and Voxel.js is no exception.  You can check out the webpage, which has links to more demos and examples, and the projectsonGithub.