Click on the example below to see how look maps work:
(Please open the article to see the flash file or player.)

Since some Voxel models can have 10,000+ voxels (or 3d pixels) it could be very intensive to for example tint every single voxel.

To put it into perspective imagine looping through 10,000+ colours and calculating their new colour every single frame, and then along with that also calculating new positions for 10,000+ particles. Traditionally this is how things would be done each particle contains it’s own colour.

Instead what I’ve done with the Voxel Engine is create a separate look map. A look map is essentially an array of colours and then each voxel (or 3d pixel) has an index that points to a colour in a look map.

Think of an image on the internet most likely every single pixel in the image is not going to be a completely different colour but instead colours are repeated. This is the basic idea behind the “look map” to have a colour pallette to create an image.

In the above example you may have noticed that when you were clicking on different colour swatches you would see the colours in the voxel model also change. We were essentially changing colour values in the look map without changing the index at which each voxel is pointing at.

Look Maps Do More

Ok so every single Voxel Model has a LookMap. During the rendering process what actually happens is that when the renderer is rendering a model it will grab that models look map and tell it to render “something” at a specific 2d position.

So what that means is that the LookMap actually performs the physical rendering. This allows us to do some amazing things…

For instance in the above example you can see small squares not pixels being rendered. What’s actually happening is that this models look map is a “FillRectLookMap”. Essentially instead of rendering pixels (PixelLookMap) it’s rendering rectangles or squares.

Of course there is also a “BitmapLookMap”. Check out the example below where instead of drawing pixels or rectangles we are drawing bitmaps:
(Please open the article to see the flash file or player.)

Again since we are using lookmaps we can quickly and easily change which bitmap is being rendered for which voxel. Another note is that because we only have 10 bitmaps to render and entire model we are using a lot less memory than each Voxel having it’s own BitmapData that would be rendered.

At this point in the development cycle for the Voxel Engine I find it’s a good time to just play around with the engine. This way the engine gets debugged and I also get to see what works and what doesn’t work from a coding perspective.

Adrian and Pablo really wanted me to make a drawing app. So the recording above is what I’ve got so far. It’s not perfect but I think you can get some pretty nice results using it.

I’d also like to mention that my nose isn’t that crazy and I have quite a bit more facial hair.

Below is a diagram describing the different pieces of the voxel engine:

There are four major parts to the Voxel Engine:

• VoxContainers
• Lookmaps
• Renderers
• Z-Sorters

VoxContainers

In the same way as Sprite is the basis for anything you do in Flash, VoxContainers are the basis for everything you do in the Voxel Engine. VoxContainers contain Voxel Data (both position and colours).

Voxcontainers are further divided into two types of containers Parsers and ParticleContainers.

Parsers are used to parse Voxel Data. For instance the Radio Head dataset for House Of Cards which is a bunch of CSV files. One of the parsers in the Voxel Engine is a CSVParser that is specifically designed to parse the House Of Cards dataset.

ParticleContainers are used to “particlize” parsed voxel data. In other words you take the data from a parser pass it to a ParticleContainer and then your voxels can start moving. (I’m sure I’ll discuss this process more in a future post)

LookMaps

Earlier I mentioned that VoxContainers contain position and colour data for colours. Well in actuality a VoxContainer contains positions, LookMaps, and look indices.

Basically a LookMap has an array of colours and each voxel has an index (look indices) that points to a specific colour in a LookMap.

It may seem pointless to have LookMaps however they are a crucial step for the Voxel Engine. (again more about that later)

Renderers

Renderers are the part that make voxels visible. It basically takes a VoxContainer and renders it out to screen using it’s position data and LookMaps.

Z-Sorters

Z-Sorters are used to sort the Voxel Data before it’s rendered. Simply it makes things look right, Voxels that are far back in Z-Space aren’t rendered in front of ones that are closer.

Z-Sorters were specifically broken out because this way they are not tied to the renderer. This way if a newer better sorting method (hint hint Adobe) comes out we can use that instead. Or if we want to implement some sort of culling of voxels it can be implemented here.

But wait there’s more…

These are the major portions of the Voxel Engine but there are definately more pieces to the Voxel Engine and I hope to talk about those in future posts.

We are displaying every fifth slice from this MRI image or so to keep the head proportional. (otherwise the head would be super wide):

I know that makes no sense but basically I started thinking with all this hype around HTML5 and Canvas I better try to build something in HTML5 and Canvas in order to know what it’s all about. With HTML5 and Canvas being touted as the “Flash Killer” I decided to try and see if it was possible to build the Voxel Engine using Javascript and the Canvas tag.

Here is a short video of the Javascript Canvas based Voxel Engine running in Safari:

You can see it in action by clicking below.
However we recommend that you use Safari or Google Chrome:
Click Here To See It in Action

This was an interesting experiment but from this I can say that right now HTML5 and Canvas is NOT yet the “Flash Killer” it’s being touted as. The performance on this experiment is quite a bit lower than what Flash can produce. I mean it doesn’t even run in Firefox, and this is the core of the problem with HTML and Javascript for years, browsers just aren’t built the same.

I guess that wasn’t quite fair.

So in this post I want to explain a bit more about our “Voxel Engine”, what it is and what it does.

Before we can get into the meat of the Voxel Engine I want to try to explain what voxels are (or at least how I’ve understood it).

Check out this video it’s sort of a visual representation of what Voxels are:

A Voxel is a “Volumetric Pixel” essentially a 3d pixel. A regular 2d pixel has an x and y co-ordinate and a colour where as a Voxel has a x, y, and z co-ordinate and possibly a colour.

So essentially the voxel engine is just a different type of 3d engine. You might be asking why would you want to use Voxels over vertices and triangles to draw 3d models? In theory with Voxels you can have a greater level of detail than you could get with triangles. This is why most medical imagery is made up of Voxels and not triangles.

You may have noticed above I stated “in theory with voxels you can have a greater level of detail”. Well you definately can get a higher level of detail with voxels however you definately need hardware accelaration in order to get to this level of detail and obviously we do not have hardware accelaration in Flash.

Here are two very cool videos of Voxels being rendered using hardware accelaration:

High resolution medical imagery:

Animated Voxels (particlized):

So why build a voxel engine in Flash at all?

Well we can still get quite a high level of detail using voxels in Flash however if we take these Voxels and start moving them around we essentially have a 3d particle engine that is based off voxels. I call this process “Particlization”. Just like the Voxel Fluid Driven Particles video above, this is where the cool stuff happens.

Our Voxel engine will support the following:

• Parsing different Voxel file formats
• Rendering voxel models (duh)
• Different rendering modes (setPixel, copyPixel, fillRect)
• Particlizing voxel models (my own term for turning Voxels into particles)
• Etc. (which means anything else that we can think of)

Check out these other resources on Voxels:

http://en.wikipedia.org/wiki/Voxel <- Wikipedia entry on Voxels
http://www.volumegraphics.com/solutions/voxels.html <- Nice explanation from a medical imagery site
http://www.3d-coat.com/voxel-sculpting/ <- Interesting Voxel modeling app

During my research period I’ve decided to heavily focus on my Voxel Engine. Of course there maybe some other small projects here and there but my major focus will be on the Voxel engine. I’ve actually started working on my Voxel Engine previously but now we’ll be taking it to the next level.

You can see some previous progress of the Voxel Engine here on my blog:
http://www.mikkoh.com/blog/

Here is a small preview of what’s to come: