First steps in 3D with voxels – Magica Voxel

Ok, ok! It’s been some time since our last post, a lot of time to be honest. Boss was on vacation for the whole summer, so we could relax a bit and focus on ending other stuff.

Never mind, we are back with new things! This time we are going to start with an easy 3D topic. In this post we are introducing the voxel, pixel’s fat brother, thanks to a free but awesome tool called MagicaVoxel.

Voxel cab is ready for a trip

Voxel cab is ready for a trip

Carefull handy users! reading this post will download some heavy gifs!

The hell is a Voxel?

Voxels are for 3D more or less what pixels are for 2D. In a environment made with voxels, they are supposed to work as the smallest thing that can be drawn or added to the model, like the pixel is the smallest thing that can be painted in a 2D canvas.  It’s like extruding a 2D canvas to the 3D dimension keeping the size of the pixels in the new dimension to create cubes.

A huge green voxel

A huge green voxel

Usually, those cubes are drawn using a single plain color, also like a pixel. In some games, like Minecraft, 3D models are made using cubes with complex textures which are also called voxels, just because of their shapes. Crossy Road in the other hand is made by small voxels with plain colors, creating a very particular graphic style.

Crossy road. Nice voxel looking graphics

Crossy road. Nice voxel looking graphics

How do you use them?

There are actually a lot of tools specialized on creating models using voxels and some of them have a render engine to show how the model looks with lights and shadows. Let’s have a look to some of them:

  • Qubicle – Is known as the standard voxel editor, but it’s not a free tool.
  • Zoxel – Light editor for simple voxel models. This one is free.
  • VoxelShop – Free cross platform editor with skeletal animation.
  • Magica Voxel – Free Win/Mac editor with an awesome renderer built in. We will use this one as example.

Why am I using Magica Voxels? Because it looks incredible since the tool is open, is so much fun, and the built in renderer has a lot of options to give you a glimpse of how your creation will look inside the game.

Magic made with voxels

By default, Magica Voxel has a cube in the work space and the eraser tool selected. Try to drag and drop over the cube to see how it removes some voxels, casting the shadows on real time. Aha! is fun, isn’t it? To manage the view just left click and drag with the mouse/pen to drop the camera. Also there are a lot of options below the workspace, like isometric restrictions or free camera movement.

Some eraser and camera action!

Some eraser and camera action!

I am not explaining every tool, the software is most of the time quite straightforward and I had a good time testing every tool and setting. There is only one thing that is not so intuitive:  at the upper side of the interface there are tags over the tool’s columns, like “Editor”,  “Brushes”, “Edit”… Those tags sometimes are just information, sometimes you can select between two of them (“Model” or “Pattern” for example) and others are buttons to switch tools or even to switch the environment.

Click on the tags to get more tools and settings

Click on the tags to get more tools and settings

Render view

One of those hidden buttons enables the render mode. Just take care, because while the tag shows “Render”, it shows the editor, and if it is in “Editor” the workspace will show the render view and the render settings. While using the render, it will use some time after moving the camera to cast some shadows.

Render process. It looks cool after a while

Render process. It looks cool after a while

At the right side there are a lot of settings to modify the light and the voxel’s material. For now Magica Voxel is not able to select groups of voxels, so it’s also not possible to select a different material for some of them. Every voxel will be rendered with the same material settings.

From metal to glass.

From metal to glass.

It looks cool!

Using voxel models on Unity

After some work, your model is going to look pretty awesome with the magica voxel render, but I’m sure some of you want to see it moving or even inside a videogame. To export a model for Unity, expand the “Export” and click on “obj” to export as an object. You won’t see any pop up or message, but inside the magica voxel folder there is a subfolder called exports. To add the object to unity, just look for 3 items with the name of the magica project and drag them to the assets folder in your unity project. Yes, that’s it!

Export option for Unity

Export option for Unity

Also, I’ve found a post from We Love Games about adding some optimization to how Magica exports the each voxel. Here it is

 

That’s it! a light post after our summer holydays. Nice to see you again and I hope you to have as much fun as I had while playing with voxels.

I’ll be back soon to show how I’m doing with the new project for the next 2 months.

Thanks everyone!

 

2 thoughts on “First steps in 3D with voxels – Magica Voxel

  1. How would you animate the models from magicavoxel since it doesn’t have a animator built in and all the whole model is basically 1 piece.

    • Hello keyz, thanks for your comment. There is a tool for unity called picaVoxel that allows frame animations and is able to import from magicaVoxel.
      Also, every 3D model is a rigid mesh. Other way is rigging the model using other 3D software like Blender after building it on Magica.

      Regards

Leave a Reply

Your email address will not be published. Required fields are marked *