Normal Mapping
Jonas Wagner has created this clever light source canvas demo using a technique used for faking the lighting of bumps and dents called Normal Mapping, and phong shading – a model for the reflection of light from surfaces.
Inspect the dragon head with the light source
Comments from the Author:
The 3D effect is basically created using 2 textures. One contains the color of each pixel and the other the surface normal. The color image is rendered using only indirect lighting (ambient occlusion in that case). The direct light is then calculated in real time using phong shading without the diffuse part.
Comments
Martin
Hi!
Great app. Just wanted to point out that it works in Safari. Contrary as to what is indicted in the “browser compatibility chart” on the right. At least it works on Safari on Windows. Did not test Safari on Mac yet.
Posted on April 8, 2010
Suhail
Very nice!
BTW: Works on Safari
Posted on May 7, 2010
Clayton Camacho
Really Appreciate this blog post, can you make it so I get an update sent in an email every time you publish a new article?
Posted on August 26, 2011
Related demos