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!)

This entry was posted in Examples, Flash. Bookmark the permalink.

11 Responses to Flash 8 Example : "3d" BumpMapping using Filters. (source included)

  1. Alessandro says:

    Ciao,

    it looks really cool!
    What about something for Flash Lite?

    Alessandro

  2. Jens says:

    All the classes are intrinsic. How can I get into the implementation?

  3. Mike J says:

    Gah, nice job! I had been thinking about tackling this one using the displacement map, but ultimately was too lazy to sit down and do it. Turned out very nice :)

  4. Tink says:

    Yeah great job man!

  5. Tom says:

    Just awesome. Now, if you can port that over to AJAX, I’ll be SERIOUSLY impressed! ;)

  6. Josh says:

    That looks amazing. Good job.

  7. Dan says:

    Looks great. Boards of Canada! :)

  8. Joa Ebert says:

    Hey, may I include your bump mapping filter in my imageprocessing library (with credits flying out to you of course)?

    Sorry I can not find any contact information on your site.

  9. Siber says:

    You have built a good website

  10. ofir says:

    I’ts awsome!!! unfortunately I can’t open the zip file.
    it says that the zip folder is incorrect…
    ):
    althow it’s amazing. a year wouldn’t be enough for me to create anything like it…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.