During that time the Voxel Engine/Fancy Engine has grown in leaps and bounds. I’ve been documenting the process at: http://labs.jam3.ca/

Here’s a quick video of something I’ve made with the Fancy Engine:

If you want to see more stuff like that video go and check out: http://labs.jam3.ca/

On another note I’ve been invited to speak at FITC Toronto during the “Cool Shit Hour”. I’m stoked to show off some stuff that hasn’t been shown yet there.

Also I got some great news saying I’m a finalist for Best Canadian Developer at the FITC awards. The crazy thing is I have no idea who nominated me but thanks to whoever did.

On another note I want to show you some “real work” I’ve done in 2009:

AUTOTOPSY- CLICK HERE TO VISIT THE SITE
Autotopsy was an interesting project. I think it’s the first website I’ve completed and haven’t hated when I finished. It generally takes me about three to four months to like a site I’ve built after I’m done building it. I guess when you look at something day in day out after awhile all the problems/issues with a site start bugging you. This wasn’t the case with this site. I just wanted to keep on improving it. We literally launched the site and then for a few weeks I was updating and improving the site.

Some things to look out for in this site are the tracked buttons with the movie. I actually wrote a parser for After Effects data that reads in tracking data and positions the buttons accordingly. Also check out the Papervision 3d map. The map has quite a bit of 2d/3d trickery going on.

WATERLIFE- CLICK HERE TO VISIT THE SITE
Waterlife was a huge undertaking. In the begining of the project it was me and Aaron Morris working on this site. (I was working on the main core of the site and Aaron was working on the content pages) I think by the end of the project almost everyone here at Jam3 had, had their hand in this project. The hard work paid off since Waterlife has won a LOT of awards and got some great feedback from everyone. We also presented this site with Adrian and Pablo at FlashInTo (local Flash usergroup). It was my first time talking about my work and I’d have to say I enjoyed it.

Some things to watch for in this site are the Papervision Particle effects and the wave nav.

Ok… So I wanted to post the animation from the House of Cards video running through my voxel engine but then I realized the data was way too huge for someone to wait to download.

I’ll maybe optimize the file size of the data and put it up later. I have it running locally at 30fps on my Mac. (which I got maybe a month ago) 30fps per second is not too bad.

But for now since I couldn’t post the animation I figured the next best thing would be to post one frame. However I didn’t want to just show one frame and that’s it. I’m also going to show off something I wrote over the weekend… I added in a Point Light into the Voxel Engine. The light is calculated by Pixel bender. Pixel bender was a perfect option for this considering the amount of points in these models.

Oh yeah if you’re wondering the red light flickers because I’m randomizing it’s “strength” every frame.

Hope you enjoy this and soon hopefully I can post some source code here.

I just want to have the source code nice and neat and commented before I put something up.

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.

(Please open the article to see the flash file or player.)

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:
(Please open the article to see the flash file or player.)

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

Click on the link to see the experiment-

I’ll try to explain more later. I know it’s been awhile since I posted anything and it’s with good reason. Trust me.

Go ahead click the link below to see the banner but realize that when you enter in your idea it will actually get Twittered:


The theme for the conference (FITC Toronto) is “outside the lines” and my concept is about escaping “outside the lines” and how your ideas escape outside the lines.

From a technical stand point there are 2600 particles moving around plus your idea particle. I had this banner running with more particles but decided to lower the amount just in case someone is viewing it on a somewhat crappy computer. After all it is a banner and everyone should HAVE to view banners right?

Collision detection is quite simple again to keep the banner running smoothly. There is actually one BitmapData that is the “collision map”. Basically it’s the FITC logo just in green and the negative space is all transparent. Each particle will check if it’s in the green area. If it goes outside the green area it will just change direction. So when your idea starts bouncing around and exploding the lines all I am doing is drawing more green onto the collision map to make the area where the particles can move bigger.

If you have any more questions feel free to write a comment below. Oh and if you’re going to FITC Toronto let me know, maybe I’ll see you there.

This example uses this marker print it out or navigate to this url on your Iphone/Ipod.
(I’ll explain why I’m using this marker below)

Download the source code here

This is my newest experiment in the realm of FlarToolkit.

Here’s what you should look for. If you turn the marker upside down the mouth goes green when you move the marker around the tongue moves in the mouth. Also I’ve tried to implement Saqoosha’s hole in the marker effect. Oh and the mouth eases into the rotation and position of where it should be (just looks more smooth).

So how is this all done-

In my previous examples I’ve been using the FlarToolkit FLARBaseNode container class and basically getting the transformation matrix from the FLARSingleMarkerDetector and applying it to the FLARBaseNode. (almost everyone is doing this I think)

Well this is cool but what if you want to find out how much you’re going to rotate or translate your object by. Well I started digging around to figure out how I could get this information from the transformation matrix and so I started looking in the FLARBaseNode and seeing what the setTransformMatrix does.

Without boring you I discovered all it does is convert the FlarToolkit transformation matrix to a Papervision transformation matrix. Simple enough… From here it wasn’t too tough to get all the transformations out.

The following gets the translation and rotation of the object in my example-

var mat:Matrix3D = new Matrix3D();
mat.n11 =  trans.m01; mat.n12 =  trans.m00; mat.n13 =  trans.m02; mat.n14 =  trans.m03;
mat.n21 = -trans.m11; mat.n22 = -trans.m10; mat.n23 = -trans.m12; mat.n24 = -trans.m13;
mat.n31 =  trans.m21; mat.n32 =  trans.m20; mat.n33 =  trans.m22; mat.n34 =  trans.m23;
 
obPosition=new Number3D(mat.n14, mat.n24, mat.n34);
obRotation=Matrix3D.matrix2euler(mat);

The first part of the code where we are setting mat.n11, mat.n12, and so on we are converting the Flartoolkit transformation matrix to be a Papervision transformation matrix.

obPosition and obRotation are Number3d objects so they will contain three values x,y,z. obPosition contains the x, y, z position of where the object should be according to the marker and obRotation contains the x,y,z rotation of the object.

I’d have to admit this isn’t the coolest example but it was something I could whip up quickly. On another note oddly enough the day after I was almost finished this I actually did get the stomach flu so beware of this example you may catch it too.

Thanks to Brent Marshall (Eightlines) (he’s from Toronto too) for telling me about the Matrix3D.matrix2euler function.

Oh yeah also… The reason why I chose to use the marker mentioned above is that John Lindquist is running a flartoolkit contest and this is the pattern of choice for the contest. (not saying I’m entering this one in for sure but I figure people will have this marker)

Another thing I discovered is that once and awhile FlarToolkit throws an through the following:

at org.libspark.flartoolkit.core.pickup::FLARDynamicRatioColorPatt_O3/updateExtpat()[FLARDynamicRatioColorPatt_O3.as:450]
at org.libspark.flartoolkit.core.pickup::FLARDynamicRatioColorPatt_O3/pickFromRaster()[FLARDynamicRatioColorPatt_O3.as:333]
at org.libspark.flartoolkit.detector::FLARSingleMarkerDetector/detectMarkerLite()[FLARSingleMarkerDetector.as:179]

I asked Saqoosha about this and he said he’s seen it happen too but has no idea why. Just so your aware if you see it happening to you it’s a known bug.

There is actually yet another way to get your 3d models from Blender. Dennis Ippel has developed a Blender to Actionscript 3.0 Exporter. (it’s very cool)

Here is my first test of this exporter:
(Please open the article to see the flash file or player.)

What’s nice about this method is that you do not have to wait/parse the Collada file. (although I think you could just embed the Collada as an XML file and just parse it immediately and not wait for it to load)

There is one thing I’m not sure about when it comes to the Actionscript 3 exporter from blender. I’m not 100% positive it can do animation like Collada does. (it may but I’d have to do some research to find out for sure)

Here’s how you use the AS3 Exporter (before we begin download my source files):

Install the AS3 exporter following the instructions posted here.

In Blender select your model and go into edit mode.

Go into face mode and hit “A” until your entire model is selected.

Then hit CTRL + T to triangulate your model. (turn quads into tris)

With your model selected go to File >> Export >> Actionscript 3.0 Class (.as)

You do not need to set the package name but you must set the name of the class for your 3d object. (In my case my class was called HandExported)

After this select which 3d Package you want to export to (in our case Papervision 2.0)

Finally select where you want the class to be exported and hit “Export”.

Now you’re ready to roll on the AS3 side of things.
This part is as easy if not easier than doing it the Collada way.

All you need to do is instantiate your class and pass in a material and add it to your scene.

If you had added in a texture in Blender just take the texture as a jpg or png and create a BitmapMaterial out of it and pass it as the material to your custom 3d Model Class on instantiation.

Download the Actionscript 3.0 Exporter from here
Download my source/example from here

Lately I’ve been learning Blender and you know I actually kind of enjoy it once you get over the wierd kinks. Although I’d have to say I enjoy working in ALL 3d apps. I started out with some free gheto 3d app, then moved onto Swift 3d (this was before Papervision), then I did some Cinema 4d, and finally did some Maya and Zbrush stuff.

I really do like Maya but I’m anti software pirating now so I’m trying to figure out all the good free tools now. (I had a legal version of Maya and Zbrush at my old work)

So without further adieu I’d like to explain why I’ve entitled this post “You can lick my Collada”.

Click on the mouth to see my first Collada export:
(Please open the article to see the flash file or player.)

For those of you who do not know what Collada is, it’s basically just the XML representation of a 3d scene. (right click and open a Collada file in a text editor and you’ll see) Papervision has some classes to parse/show these XML 3d scenes.

To export from Blender as Collada.

In Blender Click- File >> Export >> Collada 1.4(.dae)
(Note you have to have Python installed along with Blender to export Collada files)

Use the following settings for the Collada export:

Now to get your model into Papervision it’s super simple. (source download at bottom)

The following lines load in my Collada file and parse it:

mouth=new Collada("3dStuff/mouth.dae");
mouth.addEventListener(FileLoadEvent.LOAD_COMPLETE, colladaLoaded);
mouth.addEventListener(FileLoadEvent.COLLADA_MATERIALS_DONE, matsLoaded);

That’s it. You actually don’t need to have the LOAD_COMPLETE event but it’s a nice to have. How Papervision loads Collada files is that it first loads and sets up the model then it goes in and loads in the Materials, hence adding the second listener for COLLADA_MATERIALS_DONE.

Within the COLLADA_MATERIALS_DONE listener I add the model to the scene and start a render loop. This is all you need to get Collada files in.

One thing to watch out for though is that the paths for your textures maybe off in your Collada file so open up your Collada file and search for your textures in my Collada file my textures are named: tongue.jpg, and mouth.jpg.

There should be no path in here it should just be the file name. Papervision will try to load the textures relative to where your Collada file is. So your textures should sit in the same folder as your Collada file. (to make things easy)

Download the source code from here. (this is a Flex Project)

The code is pretty straight forward. You may notice there is another class there called “As3ExportFromBlender.as” I’ll talk about this in my next post.

Been crazy getting back into the swing of things at work again. Big projects coming to an end but there lies a big possibility of starting my first “real” Augmented Reality project which I’m pretty stoked about.

Seeing this video makes me want to hurry up and get these projects out of the way quick:

Augmented Reality + Cloth Simulation from Saqoosha on Vimeo.