Voxels In Flash Continued


noodlevoxel.jpg
Click on the image to preview the experiment

Ok let me try to explain what that above is. Basically the above thing is actually 22,977 3D particles forming a 3d model of Noodle From the Gorillaz. So instead of using vertices and tri’s instead this entire model is being built by pixels.

Inspiration
I was goofing around a bit with Pixel Bender just seeing what it can do with particles. Through some experimentation I came up with this.

pixelbenderparticles.jpg

The above is 30,000 particles. The particles are stagnant however I pass in 6 points into a Pixel Bender Shader that affect these particles. Basically those points are just pushing and pulling particles. One of the points being your mouse. The area that is green is actually the particles being affected by your mouse however the particles under your mouse also get affected by the 5 other points moving around on the screen therefore the green area is rarely under your mouse.

Ok so enough about that experiment. I looked at that and I just thought it looked beautiful in the areas where a lot of particles were clumping up. It brought back memories of previous experiments I had done with 3d Particles.

Immediately I started thinking I wonder if there are “Voxel Modelers” out there that could give me a map of how to lay out these 3d Pixels to form a larger model.

Tools
I actually did find a few voxel modelers but they were all paid apps. I was looking for something that was free and could spit out an XML file representing a Voxel Model.

I eventually did find a neat set of tools created by Ken Silverman.

To be honest when I hit his site I almost got discouraged thinking I wouldn’t find anything there since the site looked so outdated. ;) But if there’s one thing I’ve found in Flash Development sometimes old ideas are actually new ideas.

So I did find two very neat tools there: Slab6 and Poly2Vox.

Slab6 is an actual voxel modeling tool. I haven’t quite figured out the ins and outs of the tool but it’s all good. But in this tool you can basically move around Voxels. Essentially paint 3d Models pixel by pixel.

Being able to paint voxels is great but sometimes you just want to take an existing model and convert it to voxels and that is what Poly2Vox does. It’s a neat app…

Found the tools now what?
As I said above I found the tools I needed. But neither of them did exactly what I wanted… Neither of them spit out XML files but they did spit out binary files. Luckily Ken had given specifications for these files so I could quite easily parse them in Flash and display them.

Hurdles
As with any 3d applications one of my biggest hurdles was ZSorting. I first created a sort function that sorted out all the ZPositions of the model however my app came to screeching slow speed of 2fps.

Luckily with some inspiration from Martin Munoz from Jam3 we were able to come up with a solution. He had implemented a ZBuffer using the Vector class in Flash. A ZBuffer essentially just takes the 2d position of every pixel and checks to see if for that position the Voxel with the largest (or smallest) Z position is drawn there. The problem with the Vector implementation was that clearing out the ZBuffer was quite slow. So I took his concept and implemented a ZBuffer using BitmapData so all we would need to do is do a BitmapData.fillRect to clear out the ZBuffer.

Source
I guess all of this would make more sense if you could see the source code. I think I will eventually release the source code if people are interested in it. For now though I’ll keep it to myself til I’ve had a chance to clean things up a bit and optimize it more.

So what is this good for
Because essentially Voxel models are just particles you can take the particles and do anything with them. For example to explode a model is very easy. Or to morph from one model to another it shouldn’t be too hard.

Here is another example:
jam3voxel.jpg

If you have questions feel free to write them below. I’ll try to explain your questions in my next post.


7 Comments, Comment or Ping

  1. It sounds really great, nice work !

    July 30th, 2009

  2. Yes, a very nice work, congratulations.

    July 31st, 2009

  3. Allan

    Very cool, nice work! Thank you for stepping through you entire process. It is a very interesting project.

    August 5th, 2009

  4. i would like to see the source code… is there a chance you can post it?
    keep up the good work.

    September 26th, 2009

  5. Very clever idea for z-sorting. I guess it’ll only work properly with single points. Still sweet approach and gives inspirations.

    October 15th, 2009

  6. Yura

    Is there any change to see your source code?

    I don’t understand how to create ZBuffer with full motion in 3d space. I understand how to create this with 2d motion (on x and y axis with easy z sorting) but I don’t udnerstand how to create this with full 3d.

    July 1st, 2010

Reply to “Voxels In Flash Continued”