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 :)
Pingback: (fake) 2D parallax mapping… will burn your cpu | Der Schmale - David Lenaerts's blog
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.
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.
David, thanks for reply.
I explored your blog – you can make amazing things! I’m your reader now ).
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
Oh, what was I thinking, posting source without the assets! I think it was because I got most of them from Arroway :) Anyway: https://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 :)
as always thank you soooo….. much.
Your help is much appreciated!
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
BTW r using emboss technique or dot product??
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 :)
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 !!!!!!!!!
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).
i am back again with a lil more understanding on bump mapping. i understand the concept of how bump mappin works but i just simply can’t understand how do i make it work using displacement filter. All i get is glassy effect. i tried ur classes and ur textures i still never get the effect. Unlike last time i merged light bitmap with bump texture and that seemed to make sense. But yet again i keep on getting stuck with displacement. According to me shudn’t i be using color filter to give colors of red(y) and green(z)? Also how is displacement gonna help me change brightness of the source texture which is key aspect?
i once achieved bump mapping in blitz3d but that was using vectors and rotational matrices ot change brightness of each pixel, it worked pretty well but only for 50 x50 images lol. That’s y i have pretty good hunches on convolution filter being the main tool to alter brightness.
Nex: You don’t have to merge the lightmap with the texture. Instead, you have to apply the displacement map on the lightmap, which is added on top of the texture using a BlendMode (hard light if your specular and diffuse are in one map, otherwise multiply for diffuse and screen for specular, for instance). That way, the light gets scattered without distorting your texture, which is typically what you’d want.
I can’t run the swf locally, it complains about a sercurity permission. Any suggestions?
Don: This should tell you everything you need :) http://www.senocular.com/pub/adobe/Flash%20Player%20Security%20Basics.html
Hi David, I’m adapting your class so that I can tile the textures along the screen (in flash10). I’m having trouble setting the ‘x position’ of the BumpMaps, as i can’t tell my code may not even be making many copies of BumpMap?:
// texture_source(), texture_diff(), etc are BitmapData objects / jpgs sitting in the Flash Library.
diffuseLightSource.addChild( new DiffuseLightMap(512) );
specularLightSource.addChild( new SpecularLightMap(512) );
for (var i:int = 0; i < 4; i++) {
sourceImage.addChild( new Bitmap(new texture_source(546, 293) ) );
sourceImage.getChildAt(i).x = 546 * i;
diffuseLightSource.x = 546 * i; // trying to set the BumpMap to target here?
specularLightSource.x = 546 * i; // trying to set the BumpMap to target here?
_diffuseBumpMap = new BumpMap(diffuseLightSource, new texture_diff(546, 293), 256);
_specularBumpMap = new BumpMap(specularLightSource, new texture_spec(456, 293), 512);
}
Hey Chris, I would suggest switching to the bump mapping (minus parallax) used here: https://www.derschmale.com/2008/10/07/fake-2d-parallax-mapping-will-burn-your-cpu/ which is less… “experimental” in coding style, it should make things easier on you ;-)
Thank you very much David, I’ve made the switch very easily indeed.