UnitZeroOne

Avatar

A blog written by Ralph Hauwert, freelance front-end developer, specialized in rich internet applications, games and visualisation.

Flash 8 Example : “3d” BumpMapping using Filters. (source included)

Another oldskool effect! This technique is called bumpmapping and produces lightened heightmapped and textured images. I’m very happy about how this one looks, but even more on how I got to this. I needed to generate a static bumpmap for another thing I’m working on, and got kind of distracted doing it. I thought it would be a cool thing to do in Flash 8.5, and maybe build myself a little Flex 2 interface along the way.

While coding this in 8.5, it started out as a very mathematically correct (and thus non optimized) version of the basic 2d BumpMapping algorithm. Slowly I noticed that I could maybe do it per pixel, and fast enough to run frame by frame. While optimizing it to run faster, (Miko also put in some effort here) I came to the conclusion that the optimized routine looked amazingly much like a Convolution Filter creating displacement lookups. And what do you know; it is. So I ended up being able to creatie this 8 version of the effect The algorithm itself is very well documented, so I won’t go into that.

The 8.5 per-pixel version takes about 50% CPU (I’m still struggling with some perfomance issues I have with beta 2, how can it be that one (bitshifting) array lookup is slower then 4 getpixels?). Although it is to be expected that that can be reduced, it will never reacht he 5% load this thing gives on my CPU, producing the exact same result. Filters are sooo much fun.

The example shows 2 different combinations of lightmaps, bumpmaps and texture maps (UnitZeroOne and V for Vendetta). It’s the most basic implementation of what the thing could look like. Imagine using animated bump and light maps….

Here’s the example.
[UPDATE]
I’ve taken the sources offline until a reach my workstation again, since I made an error while exporting the project out of FDT. Sorry. Will post them again as soon as possible. Thank you Jens for the tip.
[UPDATE2]
And the sources are available, this time correct.

Preview picture of the now pimped & bumpmapped uzo icon :
Preview picture of a bumpmapped unitzeroone logo

(You will need the Flash 8 plugin!)

Digg, StumbleUpon, Slash and others:
  • Digg
  • del.icio.us
  • description
  • StumbleUpon
  • Slashdot
  • Technorati
  • blogmarks
  • BlogMemes
  • Ma.gnolia

Flash 8 Example : Oldskool 3D multilayer tunnel using DisplacementMapFilter

A simple but effective Flash 8 effect. This is part of a bunch of effects I am going to release as soon as possible. It should be a familiar effect to anyone who has been in contact with the demo-scene around 1990-1996.
Turns out it’s pretty easy to do using the displacement map filter. In the old days they used to create 2 lookup tables to do this trick; one transposing the pixel’s original x to a radial point (or any transform in that case), and one transposing that pixel y’s to a ‘depth’. Although this effect would almost alway run on any platform, doing this effect pixel by pixel proofs to heavy for the flashplayer, as betaruce showed to us earlier. Mikko (one my colleague’s at Satama) took the time to explain this effect to me in detail, and the possible added tricks, and in the plane to Denmark (where I am right now) I figured a displacement map is exactly the same as these 2 luts, so using the displacementmapfilter is just as valid as using per pixel LUT’s. The only issues compared to the original method would be that you can’t do that much with the depth (like lighting etc) that easy. But the speed proofs fenominal using the displacement filters. I am still playing with this, so no sources yet, but I will release them this week. Click the preview image for the example.

Endorphins (thomas [at] mediawar.com), provided the music (Endorphins-Tamin’ textures-”Tile based worlds”) for this little demo. Thanks again Thomas!

preview picture of tunnel effect

Digg, StumbleUpon, Slash and others:
  • Digg
  • del.icio.us
  • description
  • StumbleUpon
  • Slashdot
  • Technorati
  • blogmarks
  • BlogMemes
  • Ma.gnolia

Flash 8.5 Example : Mandelbrot-set Explorer (fasssttt)

So, I have done some work on creating a very simple Mandelbrot-set Explorer. For the ones who don’t know what a Mandelbrot is, just click around, and look at the nice computer generated pictures. I implemented a very simple colormapping routine too. It is probably the most common one, it takes the number of iterations (which I maxed at 255 in this compile) and looks that up in a colormap table. The colormap itself is generated with the help of the .perlinNoise function.

It’s not very flashy at all, but it was only made to test the speed of 8.5. A long long long time ago I did a mandelbrot plotter in Flash 4, I can remember it taking about 74 seconds before it was finished with a very low-res picture. This picture is 512×384, and at most plots I don’t get more then a second of rendereing time.
I’ve polished a bit, but not alot yet. Will do some more work later (this month), and eventually release the source.
Remember : you need Flash Player 8.5 to look at this content. The player comes with the Builder.
I have also found something weird with int / uint. The iteration counter in the mainloop was set as an int. Since it might as well be a uint, I converted it, resulting in about 6x longer rendering times, ending up 18x longer. Weirdddd….

Take a look : Mandelbrot-set explorer

Digg, StumbleUpon, Slash and others:
  • Digg
  • del.icio.us
  • description
  • StumbleUpon
  • Slashdot
  • Technorati
  • blogmarks
  • BlogMemes
  • Ma.gnolia

Search

Projects & Work

A selection of current work

Advertising