touch my pixel

Almost a year ago I was reading about how normal mapping works (on Wikipedia I think) and it struck me that this would be a great way to define a useful height map for games, maybe a mini golf game as an example.

My understanding is that normal maps work by encoding the X and Y angle difference from a flat surface (generally a polygon). That is the difference between a larger polygon from a low count polygon model, and the multiple polygons that made up a high count polygon model. This is normally saved as red and green channels. The blue channel (from what I could work out) was used in some way for height (or Z).

So, if I know the red and green pixel value at any point I can tell the angle, or at least amount of slope in X and Y, between -128 and 128 (256 colors for each channel of a 24 bit image). And the blue channel can tell me Z (or height). But how to make a normal map? I found a program (can't remember what it's called now, dam, I'll post when I find) which let me convert height maps (greyscale) to normal maps, and preview what they'd look like on a box or sphere. This was great, except that the blue channel was never quite a representation of the height info, I'm still not sure what it was exactly, any have any idea? Not to worry, I just loaded the file back in Photoshop and replaced the blue channel with my original height map data! I also copied (took a screen shot) of my normal map with lights on the face of a square.

I had thought about trying to make the normal map in Flash, directly from a height map, but really couldn't be bothered trying to do all the processing, maybe next time! I could even use Flash to create a "rendered view" using a displacement map I think.

[Side note: I guess you could use a 32bit image and use the Alpha for some extra info, maybe extra height, or amount of friction or something]

Here's some of my original examples. Use the keys to move the ball around (click to view).

Exeriments

After doing these examples I had intended on making some kind of minigolf game, but it never happened. A few days ago I was thinking back to those experiments and thought "wouldn't it be great to use the normal maps for some kind of driving game thingy". Why not use my new-gotten PV3D skilsl for a new experiment ... so here it is!

PV3D Normal Mapping experiment

In this example I used Papervision3D to create a box that drives over the landscape I've created, and it's rotation and height is affected by this terrain.

Example displacement maps

And here are some of the displacement maps if you want to play around!

The Code

Here's the main part of the code, the bit that does all the "normal mapping" stuff at least.

Easey huh?! Have fun! If you do anything with this, please let us know so we can tell the world how awesome we are!

This entry was posted on Wednesday, November 26th, 2008 at 2:23 am and is filed under Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.