Intro

Voxelator is a free online app to paint and edit voxel-based models.

What is a 'Voxel'

A voxel represents a single point on a regularly spaced three-dimensional grid. Or in simple words - Voxels are like 3d pixels.
In recent years, partly due to the success of the game 'Minecraft', many games started using Voxels instead of regular polygon-based models.

Voxels-based graphics have many advantages, mainly in performance, the ability to generate meshes and complex levels at runtime, and the fact that its much easier to create Voxel-based 3d models than regular models.

Voxelator is based on a simple 3d grid with constant voxel size of 1x1x1. Its core functionality is to add or remove voxels by clicking on existing voxels or the background grid.

Requirements

To use Voxelator you need a browser that supports WebGL 2.0 and ES6 (JavaScript) 6 or higher.
Voxelator would work best on Chrome, But you can also use Opera or FireFox. Edge should work too, but would probably be slower.

Note: officially I support Chrome, FireFox, and Opera. Use any other browser at your own risk!

Licensing

Voxelator is a free software and you can choose which license to attach to the models you produce with it, and use them for any purpose -- commercially included (provided you did not use any external resources with limiting licenses).

With that said, you may not do the following with Voxelator:

You may not attempt to download its source and use it locally from your computer.

You may not attempt to upload Voxelator to a different domain or site.

You may not attempt to embed Voxelator in an external domain, using an iframe or any other technology.

You may not attempt to redistribute Voxelator in any way, not commercially and not for free.

You may not reuse Voxelator's code for any purpose.

Layout

The best way to learn about Voxelator's UI is to take the guided tour. When inside Voxelator click on 'Help' --> 'Show Guided Tour' to watch it.
Since the tour covers all the main stuff, in this section we'll only go through the main things to notice:

The top panel contains all the main menus in Voxelator. In 'Project' you can save / load projects, 'Edit' contain different transformations and effects you can apply, 'Exports' is to generate 3d models from your Voxelator project, 'Imports' is to import other projects or textures, 'View' contains view and UI related options, 'Camera' contains camera-related options and presets, and 'Help' is a useful help menu.
The top-left box under the options panel is the tools selection box. Here you can switch between Voxels pencil, paint buket, selection tool, and other useful stuff.
The left-side colorful box is your color palette. Right-click to select color, left click to change it (remember - changing colors in palette may affect existing voxels).
The bottom-center text is a useful short info about the tool you're currently using. Check it out to learn about useful shortcuts.
The bottom-right box is the layers window. Here you can create new layers, manage existing layers, delete, clone or merge layers. Layers are a great way to separate between different groups of voxels.

Note: when you interact with UI menus the main screen will turn slightly darker and be disabled, to prevent accidental edits. To resume controls, click on the screen once (with any mouse button).

Camera Controls

Camera can be controlled via keyboard or mouse, as illustrated here:

Keep in mind that the camera, just like all commands, will be disabled when interacting with the UI menus.

Colors Palette

In Voxelator every voxel has a color index, which represent a color in the color palette. Using a palette simplifies a lot of aspects when editing the voxels, and it helps the artist in keeping a consistent artstyle. When exporting the model into one of the standard 3d formats, Voxelator will also export the colors palette as a texture.

Since Voxelator is palette-based you need to remember that you don't have unlimited number of colors, and changing one of the palette colors will affect all existing voxels which are using it.

Note that you can import a palette from any texture file from the 'Import' menu. Importing a palette will replace existing colors with unique colors from the imported texture. If the texture have less colors than the palette's max size, some colors will remain unchanged.

Tools

This section will briefly describe Voxelator's basic tools.

Voxels Pencil

Voxels Pencil is the most basic tool used to draw and erase Voxels.
To use it, pick color from the colors palette and left-click on grid or existing voxels to add new voxels, or right click to erase them.

The pencil tool have alternative modes: hold down shift to recolor existing voxels, or alt to push / pull voxels.

Continous Draw: if checked, Voxelator will draw / remove voxels continously while the mouse button is held down. If unchecked, every click will only set / remove a single voxel.

Selection Tool

Selection tool allows you to select a group of voxels using a 3d bounding box. Once selection is set, transformations will only affect the selected voxels.

Voxels Bucket

Flood fill voxels. This tool have several modes:
Left Mouse Button: recolor group of voxels with the currently selected color.
Right Mouse Button: recolor group of voxels with the currently selected color, but only on the plane you clicked on.
Shift + Left Mouse Button: fill empty space with voxels of the selected color - works on the plane you clicked on.
Shift + Right Mouse Button: duplicate a plane of voxels.

Draw Shapes

Draw a set of predefined 3d shapes made of voxels: line, circle, or box.

Translation Tool

Move groups of voxels around (selected region or whole layer). To move voxels on X and Z axis use the arrow keys, to move on Y axis hold down shift and use Up and Down keys.

Eraser

Eraser tool provide more ways to erase voxels than what provided by the Pencil tool.
Left Mouse Button: remove individual voxel.
Right Mouse Button: remove voxels while key down.
Shift + Left Mouse Button: remove a layer of voxels.
Shift + Right Mouse Button: remove a layer of voxels of the same color.

Layers

Layers are important aspect of Voxelator - they allow you to separate your model into multiple parts, which will not affect one another.
When applying transformations or using tools you will only affect the layer you are currently editing. Furthermore, you can lock a layer to prevent accidental editing, or toggle layers visibility to quickly hide parts of the model without actually removing them.

Another advantage of layers is performance; If your model is really huge and made from lots of Voxels, dividing them into multiple layers will mean Voxelator will have to work less on rebuilding the 3d mesh when you update it.

The layers window is pretty self-explanatory, the only thing to notice is the Auto Select Layer option which will select layer automatically based on the voxel you currently point on. This option is useful when drawing voxels, but you might want to turn it off if you want to apply transformations on a specific layer, so you won't accidentaly switch layer before doing so without noticing.

Voxelator Projects

A "Voxelator project" is the entity containing your model's palette, layers, voxels, and settings.
The project is everything you need to edit your model and export it to 3d formats. Its typically stored in files ending with '.vox' extensions, and its content is a plain JSON object.

The 'Project' menu provide options related to the Voxelator project:
Top text in blue is the current name of your project. This name will be used when saving your project.
Rename: allow you to rename the project.
New: creates a new empty project.
Save: save project file. Its recommended to save often and safe-keep your latest project files.
Load: load a project file so you can continue working on it.

Edit Menu

The 'Edit' menu contains a collection of transformations you can apply, as well as the undo and redo buttons.

Undo / Redo

Cancel last action, or redo last action you removed with undo.

Soften Edges

Make edges or corners "softer" by removing voxels which are considered to be sharp corners.

Expand

Expand some or all faces to their corresponding directions.

Shrink

Shrink the model from all directions by removing all the currently-visible voxels and exposing the layers below.

Smooth Faces

Smooth faces by removing lonely voxels (voxels that have less neighbors than a configurable threshold).

Rotate

Rotate layer or selected voxels around one of the axes.

Flip / Mirror

Flip or mirror the active layer or selected voxels.

Flip: flip the original shape around one of the axes.
Mirror: duplicate the shape and flip the duplication around one of the axes.

Export

Exporting is one of the most important features of Voxelator: its the ability to convert your voxels-based shape into a standard 3d model formats, which you can later load into rendering engies and draw. When you finish working on your model, usually you'll want to pick one of these formats and export to it.

When exporting the model you will be faced with the following dialog:

In the 'Export' dropdown you can choose which parts of your model to export: everything, active layer, or all visible layers.
Next you can select how to encode voxels colors - you can either use the model's vertex colors (note: not supported by all formats), or use a texture representing the palette.
The last option, Optimize Faces, will optimize the result mesh to use fewer polygons and larger faces. The results would look the same, but be more efficient. If you uncheck this option, the result mesh will be composed of voxel faces, where every face is 2 polygons.

Exportint the Palette

Note that there's an additional option to export the colors palette as image. This will create a .png file with your palette, which you an later use with your models or import as palette.
When exporting a model using texture for colors it will also export palette automatically, so you don't need to do this manually.

Import

Import allows you to import different things into the project. Currently the options are:

Image To Voxels

This option will import an image and convert it into a plane of voxels. It will try to match the image's pixel colors to the current palette colors as closely as possible.

Image To Palette

This option will import an image into your colors palette. It will scan all the pixels in image and set its colors instead of the colors your palette currently have. If the image don't have enough unique colors to fill the pallete, not all colors will be replaced.

Voxelator Project

This option will import another Voxelator project and embed it into the current project. It will basically import all the layers from it, but won't replace the palette.

Guided Tour

To learn more about Voxelator and its UI, check out the in-app guided tour (Help --> Show Guided Tour).

Support / Feature Request

If you experience issues with Voxelator or have feature requests, please send an email to ronenness@gmail.com.
For bugs, please include exact browser type and version + add a screenshot of errors from developer console if such appear (F12 on Chrome).
Note: please include "Voxelator feature request" or "Voxelator problem" in the title of the email.