an open source voxel game building toolkit for modern web browsers

About

voxel.js is a collection of projects that make it easier than ever to create 3D voxel games like Minecraft all in the browser.

It was written by @maxogden and @substack, two non-game developers that want to make voxel games easy, fun and modular. If you find bugs it is most likely because we don't really know what we are doing when it comes to making games.

Contribute

All of the code is open source! If you find bugs or have ideas for improvements please open issues for them on the related github project, or better yet send code or write new modules. You can also donate to the project on gittip, a site that lets people support open source programmers through small recurring donations.

Components

Instead of making a giant game framework we instead decided to split voxel.js up into a bunch of small building blocks (modules). Modules can be installed with npm, the package manager from node.js. Here are some modules that we have already started working on:

The Core

Add-ons

voxel-creature
lets you add some NPC creatures to your game
voxel-debris
configure how much debris appears (and debris physics) when you destroy a block
voxel-forest
decorate your world with procedurally generated trees
voxel-perlin-terrain
generate voxel worlds using perlin noise
voxel-simplex-terrain
generate voxel worlds using simplex noise (like perlin noise but newer)
interact
a module that makes it easy to get pointer lock in browsers
player-physics
the velocity and gravity algorithms for players
toolbar
- add a customizable toolbar that lets players select items
minecraft-skin
load minecraft skins in as three.js mesh objects
voxel-drone
script a virtual nodecopter inside voxel games!
voxel-texture
easily load custom textures into voxel games
voxel-move
rotation relative based movement for 3d objects (used in voxel-drone)
voxel-portal
create teleport portals textured with the camera view at the destination
voxel-storage
save and load voxel games with HTML5 IndexedDB. work in progress
voxel-audio
positional audio for objects in voxel games using the HTML5 Web Audio API
painterly-textures
a module you can install to get the painterly pack block textures
voxel-highlight
highlight or manipulate with the voxel that the player is currently looking at
voxel-throw
pick up and throw voxels
voxel-trajectory
calculate trajectories for objects. used in voxel-throw
voxel-portal-gun
an early version of a portal gun using voxel-portal
voxel-heightmap-terrain
generate terrain using a png heightmap
voxel-pp
voxel post processor. this is a wrapper for @alteredq's THREE.EffectComposer, which allows you to stack fragment shaders for nice effects such as bloom, blur, mosaic filters and so on
aabb-3d
axis aligned bounding boxes. useful for building something that you intend to collide with the world or other objects
spatial-events
a spatially-aware event emitter, designed to work in 3d space with aabb-3d
spatial-trigger
given a spatial event emitter (with spatial-events) and an axis aligned bounding box (with aabb-3d), creates a new event emitter that emits enter and exit events when spatial events indicate that something has passed into the bounding box
voxel-rescue
automatically teleports the player back to a known location if they enter a certain region of the world (e.g. fall off the map)
voxel-oculus
3D side by side rendering to be used with the Oculus Rift
voxel-share
upload screenshots to imgur and post to twitter from inside a game
voxel-snow
let it snow, let it snow, let it snow
voxel-colorist
a color grading module
voxel-label
add labels to your players

The goal for all of these modules is that they are fun, simple and easy to hack.

Tools & Utilities

Voxel Critter Creator
voxel object/creature editor. (doesn't actually depend on any voxel.js modules, uses 2D canvas renderer)
voxel-vagrant
a Vagrant VM for building voxel games
voxel-server
multiplayer voxel games! note: this is still a work in progress and isn't a smooth as it should be yet
minershoes
make your own minecraft skin. made for minecraft but works with the minecraft-skin module

Making your first game

@maxogden has been working on an in-browser game maker called Voxel Creator. You don't need to install anything to use it. To save your game you just need a free account from Github. You can try it out by visiting http://voxel-creator.jit.su.

If you encounter any issues with Voxel Creator, please open a bug report over here as the program is open source.

Making a game from the command line

Here is a handy video screencast from @shamakry that will teach you how to get started in under 10 minutes:

If you don't wanna watch a video you can follow these instructions instead:

To use the voxel.js modules you will need to install node.js (which will also install npm) and be able to use your computer's command line.

Once node.js is installed, you can install the basic voxel.js npm package in your project directory, and then install a basic texture pack. Make a file called package.json in your project directory and give it these contents:

      
{
  "name": "mygamename",
  "version": "0.0.1",
  "dependencies": {
    "voxel-engine": "0.5.3",
    "painterly-textures": "0.0.3"
  }
}

Now you can tell node to install your dependencies:

      
$ npm install

Next, create mygame.js and put the following code in it:

      
var createGame = require('voxel-engine')
var texturePath = require('painterly-textures')(__dirname)
var game = createGame({texturePath: texturePath})
var container = document.body
game.appendTo(container)
game.setupPointerLock(container)

Then to build your game you use browserify:

      
$ npm install browserify@1.17.3 -g
$ browserify mygame.js -o builtgame.js

Load builtgame.js into a web page:

<!doctype html>
<html>
  <body>
    <script src="builtgame.js"></script>
  </body>
</html>

For images (block textures, player skins, etc) to load correctly you need to serve voxel games from an http server (as opposed to opening the .html file in your browser directly). Here is how to do that using http-server from npm:

      
# install http-server and put it in your command line path
$ npm install http-server -g
# start a local server in the local directory
$ http-server

Now you should be able to play your game by opening up http://localhost:8080 in your browser. Look at one of the working examples to learn more.

There are also API docs in the voxel-engine readme

Making your first node module

Check out this guide: Writing node modules with voxel.js

If you make a voxel.js module and want it featured on the site you can fork the source and add your module to the list.

Ideas/wishlist

If any of these look fun to you please help an existing module out by making it better or start a new module that provides a solution -- whichever is easier.

More!

The 0fps blog posts on voxel meshing by @mikolalysenko are the reason voxel.js exists. Highly recommended reading! Definitely check out the meshing toolbox.

mr. doob and three.js are what voxel.js is built on top of.

webgl-meincraft is a great tech demo that showed a lot of this can be done in a browser

Jonas Wagner made a killer demo and gave a great talk about Voxel Worlds on the web that helped to inspire this project.

Fan Art

Here are some of the wonderful things users have made with their voxel worlds. Tweet @voxeljs or email max@maxogden.com your photo to submit your art!

by @jllord