Bump mapping in AS3 has been done a couple of times before already, but I thought it would be cool to try out the effect with a seperate bump map for diffuse and specular lighting (with only slightly different logic for each ‘layer’, and that is how the light maps are calculated). It’s great to create wet surfaces or waterdrop effects.
Well, there’s not much more to say about it, it’s a rather old topic anyway
Enjoy the demo, and the source can be viewed by right-clicking, or here.
EDIT: I adapted the code a bit to fix the white pixels appearing










(fake) 2D parallax mapping… will burn your cpu | Der Schmale - David Lenaerts's blog
on Oct 7th, 2008
@ 6:40 pm:
[...] and I also rewrote the Bump Map from some time ago, since I needed it to make this demo a bit cooler overall. The code back then [...]
Nikita
on Oct 23rd, 2008
@ 11:41 am:
Very interesting thing. I tried to implement bump mapping with normal map on flash but your work looks awesome. You wrote that you used “seperate bump map for diffuse and specular lighting”. So you used two different maps? One of them was height map and what about another? Is it possible to see all the maps, can you show them?
P.S.: sorry for my English.
David
on Oct 23rd, 2008
@ 2:32 pm:
Hi Nikita,
What’s happening here is that I’m doing the same thing twice, but each affecting the seperate light reflection components. So they’re actually both height maps. I used a specular map to affect the specular component, but I treated it just like a height map - so the reflections look a bit more intricate than normal bump mapping. It’s of course not real specular mapping, but just something I tried out of curiosity and for fun
Most of the textures came from http://www.arroway.de , including several height/specular maps.
Nikita
on Oct 23rd, 2008
@ 4:07 pm:
David, thanks for reply.
I explored your blog - you can make amazing things! I’m your reader now ).
JD
on May 11th, 2009
@ 2:29 am:
Hi David,
As always I love your work!
I am having a hard time figuring out exactly how this works I was wondering if you could upload or email the jpegs for this?
I have everything working fine in Flex I just have never used bump or specular maps before.
Thanks in advance,
JD
David
on May 11th, 2009
@ 6:16 pm:
Oh, what was I thinking, posting source without the assets! I think it was because I got most of them from Arroway
Anyway: http://www.derschmale.com/demo/bumpmapping/textures.rar .
Keep in mind tho, that this is not how specular mapping works - I just wanted to experiment what would happen when using a specular map as a bump for specular lighting, seperate from diffuse lighting
JD
on May 12th, 2009
@ 3:02 am:
as always thank you soooo….. much.
Your help is much appreciated!
Nex
on Jun 5th, 2009
@ 6:14 am:
Hello, i know its been a while since this topic was discussed. I have been staring at ur codes for awhile and i need help in understanding how u were
able to use displacement map to get the bump mapping effect. Complete noob at this however i tried out ur code in swishmax 2. I broke down ur code and got to the part where u used convolution filter to filter red and green from RGB and combined to one bitmapdata variable and used that in displacement. But all i have is a glassy effect. I need u to tell me wat else i need to do infact i need a brief explanation of ur concept. Plz reply ASAP
Nex
on Jun 5th, 2009
@ 6:16 am:
BTW r using emboss technique or dot product??
David
on Jun 5th, 2009
@ 5:33 pm:
Hey Nex,
The Convolution is used to generate slope information from the heightmap (ie: the difference in height of two adjacent pixels), horizontal and vertical in seperate colour channels. Depending on the slope of the surface, light is reflected in a different direction. Instead of calculating the light intensity for each pixel, it uses a pregenerated light map and applies the DisplacementFilter using the slope map as the displacement map. So it’s neither an emboss technique nor using dot products - just offsetting coordinates in the lightmap to generate difference in lighting strengths.
Hope that helps
Nex
on Jun 8th, 2009
@ 7:15 am:
oooOOO000h. Thx for clearing that concept. HOWEVER, i realized that i wasn’t asking the right question before. I did a lotta thinkin and realized that its the diffuse effect that i didn’t understand. RIght now all i am seeing is a glassy effect. I followed ur codes exactly for bumpmap.as but i am didn’t understand ur concept behind.diffuse.as and light.as. For diffuse, i analyzed ur code (i.e FOR loop) and got a quarter of radial gradient effect. so DO u use that displacement effect to somehow MASK the radial light to get the shades on the edges? I am srry but i am gonna keep bothering u until i get the result right. And plz expand ur procedure if u get time to reply.
thanks !!!!!!!!!
David
on Jun 9th, 2009
@ 9:53 am:
Nex: All the classes in the light package are simple light maps: textures containing light information for all angles of the surface with the light source impacting on it. Its centre would be head on, and away from that, it’s at an increasing angle, with the edges representing the state where the surface is pointing away from the light (at >= 90°). The DiffuseLightMap is such a map containing diffuse light reflections. You should be getting a full circular gradient however, since it’s using a simple distance from the centre algorithm to define the luminosity.
I know the code is rather messy, especially trying to hack it into the Flex framework (the sliders seemed so useful tho :D).