Voxel Editor

This week I completed a very neat tool; a browser based voxel editor. This is the first proper programming project post of this year, happily it's a really neat one :)

Click through for an explanation of what the tool does, some example voxel models made with it and finally the running program itself.
What this tool does

Voxels are a shorthand for 'volumetric pixel' ; essentially a 3D object which can represent a more complex 3D shape in the same way that pixels can represent a 2D image. Best known example of voxel objects can be seen in Minecraft where absolutely everything in the game world is composed of blocky voxels. This allowed fantastic constructions to be built, castles, statues, airships, even functioning computers!

Here is an example of the Voxel Editor open with an example schematic loaded:

At the top are the individual layers; slices taken at each vertical height. Below are the buttons to save or load a schematic from your computer. Bottom left are controls to change the colour of the currently selected block by changing the red, green and blue components. Lastly, in the bottom right there is an isometric render of the entire model. 

Hopefully the same interface will be present once you scroll to the bottom of this post, albeit with all the slices empty. To add blocks leftclick the mouse within the horizontal slices. a single click will place one block. Click and hold to drag out between two points, creating lines, rectangles or cuboids depending on how different the start and end points of the mouse movement are. Blocks can be removed in the same manner by right click and drag.

Example Voxel Models

When making this tool I kept what I would want personally in such a program in mind. Easy control scheme that can be used with solely the mouse. ability to add or remove a huge amount of voxels at once. Colours of blocks can be changed after being placed and each type of block in the schematic's palette can have an associated material. (currently only gas, liquid or solid which affect how transparent they are)

The save file format was important to me as well, I wished it to be human readable and to contain all the information needed for someone who has never used the original tool to be able to reverse engineer what the save file represents. Pretty pleased with what the JSON (JavaScript Object Notation) gives you, although I am well aware at how large the filesize is without any form of compression. A task for another time.

Thank you for reading this far, as a reward have a play around with the tool below. I hope it functions ok and is easy to use :D

Voxel Editor