3D Pixel Fun

// August 31st, 2009 // Experiments, Flash 3D, Source code & tutorials

[Edit]Don’t forget to check out my new 3D pixel art iPad app

Recently a client asked me to do something which involved a lot of 3D cubes. I did some tests with cubes in the past and I knew the number of cubes you can render in Flash are relatively limited. Lets say you want 10x10x10 cubes = 1000 cubes =6000 sides = 12000 triangles, which is near or already over the limit. So I decided to take a different approach.

When you use an isometric perspective, the cubes are all the same. So instead of rendering each cube every frame, you can render only one cube and use that cube as a particle to render a full scene. This way you can easily extend the limit of +-1000 cubes to 20000 or more cubes.

Motivated by the very cool 3D pixel editor Q-BLOCK by Okuyama Kazuya, but mostly because it was great fun to make, I decided to take it one step further and started to build a simple 3D pixel engine.

3D pixel engine

Use the arrow keys to move the character, drag to rotate the scene.

» View 3D Pixel Engine

At this point, the Pixel3DObjects have x, y, z, rotationX, rotationY, rotationZ properties + they  support very basic animation (gotoAndStop). As input it uses transparent bitmapdata (I use pngs) Where the horizontal “sprites” are the depth layers, and the vertical “sprites” the animation frames (see img below).
3D pixel engine

But a 3D engine wouldn’t be complete without a possibility to import external generated 3D objects, so I also made a Collada parser witch converts a standard 3D mesh to a 3D pixel object:

3D pixel engine collada

» View Collada Elephant

For a good result I had to raytrace the mesh from different angles and regularly check for duplicated cubes. But for big or complicated objects it takes a while to generate all the needed data. So the elephant is actually pre-rendered and just uses the output data from the raytrace object.

I include the source code (with the two examples) but its not what you call user friendly and most features are incomplete or buggy at this point. So you are warned.
Source code: Pixel3D_source

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

28 Responses to “3D Pixel Fun”

  1. Gaspy says:

    Hmm, isn’t this essentially a Voxel engine?
    No matter how it’s called, it’s pretty cool and can be used for some very nice artistic effects.

  2. Niels says:

    I’m pretty amazed by this, it hurts my eyes when I rotate the thing (the perspective gets all ortographically-mangled) but I still am amazed, as always with your experiments.

    Also, what did you build for the client? Anything you want show us?

  3. Lego heaven :)
    Very nice, there’s definately an online game idea there…

  4. Colm says:

    That’s pretty damn sweet. Nice work!

    I’m afraid I don’t follow what you mean by: “When you use an isometric perspective, the cubes are all the same.”

    Is that that they are all the same angle towards the viewpoint (and hence same light / shading etc)?

  5. zedia.net says:

    I agree with peter, you should pitch lego to do a microsite for them.

    That thing is really nice.

    Great work.

  6. [...] with the way Flash renders 3D, Flash freelancer Kris Temmerman decided to build his very own 3D pixel engine. Do 3D isometrics get any cuter than this?!Smooth your video!This little tip from FlashGamer.com [...]

  7. Kris says:

    Thanks for the comments :)
    @Gaspy: yes, its some kind of a voxel engine

    @Niels: Sorry, I cant show you that, it isn’t even online at this point (and it ain’t that special ;) )

    @Colm: With isometric perspective, you don’t have viewpoints (or they are infinite)
    So you don’t have distortion of the angles and they are all the same, like you say.

    Ill think about that Lego pitch ;)
    Thanks.

  8. [...] en forme, Neuroproductions, qui vient de s’essayer remarquablement bien à un moteur de pixels en relief en flash. Dans [...]

  9. dVyper says:

    Absolutely amazing!!!! :)

  10. szataniol says:

    Hey man, cool stuff :)

  11. SAW says:

    That is pretty cool, I’ve been watching developement on Voxel engines, specificly Voxelstien, but they seem to be at a stand still… I have experimented with some Voxel simulation, or simulating 3d pixels in Freebasic and currently using GameMaker’s layering system to simulate a 3d pixel side scroller, found here -> http://64digits.com/users/index.php?userid=Scott_AW&cmd=comments&id=266264

  12. [...] un peu de travail c’est tout à fiat faisable comme le propose les équipe de Neuro et leur 3D Pixel Fun : Animation en 3D Pixel [...]

  13. oscar says:

    Awesome!! currently I´m making my first experiments with 3d on flash using draw triangles this sample helps to know what can be done without complex APIs, currently I´m trying to figure how to apply lights and shadows, I´´ll check your sample to get some ideas, thanks for posting the code.

  14. Wouter says:

    Hey, i was playing around a bit with this source, but it seems you can’t add BitmapParser objects once you have started rendering?

    Is there a way around, i was trying to add more objects when the mouse is clicked

  15. Wouter says:

    oh lol, forget about the last comment, look i was doing something wrong here :)

  16. Zouav0 says:

    Great job :) was bluffed !

  17. What’s a realistic limit on the number of (instanced) cubes? This looks awesome!

  18. Kris says:

    hi trend,
    it really depends on the size of the cubes, and the size of your render screen. but 20,000 cubes is a good guideline

    btw, this will soon be outdated, with the new molehill 3D API you will be able to render more cubes than with my method. (and with real “perspective” 3D)
    http://labs.adobe.com/technologies/flash/molehill/

  19. I can’t wait for Molehill, but the 20,000 limit is essentially a limit on the number of sprites in the displaylist/papervisionzsorting list right? I’m looking at several voxel engines, and most are extremely limited. I’d love to see some atom based games in the future, but I’m not sure if it’ll ever show up in AS3.

  20. Oh I didn’t look at the source and I figured it was papervision. Guess I was wrong about that.

  21. Phil Harvey says:

    I came across this site a while ago, and liked the idea of the pixel game. Well I have something like this working on the iOS devices, and also in Molehill. It can throw around a lot of pixels which is good.

    Expect a game for flash as well as iOS soon.

  22. Markavian says:

    Amazing stuff! I am very impressed at how fast this voxel rendering works compared to traditional 3D rendering. The style looks great, I wonder how far you could take it.

  23. Anil Mathew says:

    I like it it’s look great

  24. Michael MacDonald says:

    Voxels, as far as I know – unless the definition has changed radically over the past few years, are volumetric pixels – something very different from 3D pixels. Voxels were used to create landscapes in old video games, 3d pixels are more like this, or what are used in Minecraft. Very different concept. One is a cube in an x, y, z space. voxel is a vertical pixel defined in a 2d space. The x and y being the location in the 2d space, and it’s 3rd parameter being the height of the pixel. It will be nice when graphics cards get to the point where they can start optimizing for 3d pixels, and they can start getting smaller and smaller. A lot of amazing things open up. Especially if we can make the 3d pixels very small and elastic. Very cool :D . My next project I am going to play with this stuff.

  25. Michael MacDonald says:

    Nope, I stand corrected :D . This does seem to be under the definition of voxels. Hrm. I need to brush up on things.

  26. Michael MacDonald says:

    And, yeah, the flexible thing is going down a different alley, and probably not necessary.

  27. Montserrat says:

    Loved it.! but i would like to have the app on my android..too bad. big hugs.

Leave a Reply