Bump Mapping

Bump Mapping is a graphic technique to render some relief effects. The algorithm apply a light perturbation to each pixel according to its normal vector and a light position.

The heights of each pixel is calculated from a Height Map (aka Bump Map).

Here's a simple demo, and another one applied to a texture.

BumpMapper

This algorithm is a remake of an old AS2 one, check the difference !

Comments (14)

  1. Erik wrote:

    This is really nice. :) Do you have any link to a tutorial or some other kind of document that explains the technique?

    Monday, January 8, 2007 at 11:21 am #
  2. Nice one !

    Monday, January 8, 2007 at 12:21 pm #
  3. Here‘s an excelent article about Bump Mapping by Jean-François MAQUINÉ [french], sorry, I’ve no english one ?

    Monday, January 8, 2007 at 12:51 pm #
  4. MoD wrote:

    Nice one…
    any chance you’ll show the source code?

    Monday, January 8, 2007 at 2:00 pm #
  5. Erik wrote:

    My french is pretty much non existent but thanks anyway, I’ll do some googling. :)

    Monday, January 8, 2007 at 2:51 pm #
  6. joa ebert wrote:

    Erik: You will find some examples on gamedev.net for sure.

    Monday, January 8, 2007 at 4:15 pm #
  7. D3SPhil wrote:

    Didier: Nice demo. However, it seems, by the speed of it (both the AS3.0 and AS2.0) that you are doing the BumpMap calculations by hand; i.e. you are going through each pixel yourself.

    However, UnitZeroOne did a Bump Mapping demo where he used Flash’s internal filters to get the same effect (faster):
    Ralph Hauwert 3D BumpMap + sources

    Monday, January 8, 2007 at 8:56 pm #
  8. Jon B wrote:

    Ralph Hauwert 3D BumpMap + sources

    In my opinion the effect here has less ‘distortion’ (look at the book demo) and is much faster and is as2 :D

    And it has source!

    Not to criticise what you have here – it’s excellent :)

    Monday, January 8, 2007 at 9:00 pm #
  9. Wow !
    Ralph Hauwert use a combination of DisplacementFilter & ConvolutionFilter : it’s a very good idea :)

    Monday, January 8, 2007 at 9:41 pm #
  10. D3SPhil >You’re right, mine is computed pixel per pixel :)

    Tuesday, January 9, 2007 at 4:35 pm #
  11. mrsteel wrote:

    that’s why it look better for me :)

    Tuesday, January 9, 2007 at 5:40 pm #
  12. Saw lots of hits coming from this way, and hey! That’s the 2nd example of bumpmapping in Flash I ever saw.

    I went down the exact same path as you did, although I never tried building a per pixel algorithm in AS2. My first prototype was in AS3, trying to see if it could be realize with filters only, as it could. Convolution and displacement and blendmodes are all you need to get this effect up to speed.

    That said, the displacementmap filter has a much higher speed when you keep it under 255×255. I read up about it, and it turns out it can then use some processor optimisations it can’t use if that range goes up.

    All in all, nice bumps! Good to see someone else working on this too, and great work in general, you’ve got a new reader !

    Friday, January 19, 2007 at 1:43 pm #
  13. Hi Ralph, you’re welcome :)

    Friday, January 19, 2007 at 6:20 pm #
  14. AnferTuto wrote:

    Hola faretaste
    mekodinosad

    Sunday, July 29, 2007 at 1:45 am #

Trackbacks/Pingbacks (5)

  1. generalrelativity » Bump Mapping on Tuesday, January 9, 2007 at 6:41 am

    [...] Check out some more fun stuff from Byte Array! Cool stuff guys… [...]

     
  2. Bump maps in Flash « Cyberspace Nova on Tuesday, January 9, 2007 at 4:37 pm

    [...] Bump maps in Flash Published January 9th, 2007 Flash , 3D , Flex , Actionscript 2 , Web developer , Actionscript 3.0 Bump mapping is well known technique in 3D engines. There are also some nice examples in Flash. Recently ByteArray.org released new one which you can test at their blog post, which also in comments mention two more. Good article in French you can found on Onversity and one with source included on UnitZeroOne [...]

     
  3. { draw logic } Bump Mapping in Flash « on Wednesday, April 18, 2007 at 2:05 pm

    [...] Bump Mapping in Flash April 18th, 2007 — drawk BumpMapping in Flash has been a possibility since Flash 8/AS2 but here is a collection of the best samples and authors of that code.  ByteArray AS3 BumpMapping and Ralph Hauwert 3D BumpMap + sources. Posted in Uncategorized. [...]

     
  4. byK – Voice Gesture [by Didier Brun] on Friday, December 18, 2009 at 7:02 am

    [...] Other AS3 classes/experiments worth checking out: PageFlip Class Mouse Gesture Bump Mapping [...]

     
  5. Karey Helms » Voice Gesture [by Didier Brun] on Wednesday, March 23, 2011 at 1:35 am

    [...] Other AS3 classes/experiments worth checking out: PageFlip Class Mouse Gesture Bump Mapping [...]