Friday, March 26th, 2010

Dynamic lighting effects in Canvas

Category: Canvas, Fun

Jonas Wagner has a perfect Friday fun demo that normal mapping and phong shading in JavaScript using Canvas. Your mouse cursor becomes the light source that dynamically lights up a 3D object:


Jonas discusses how his code works:

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. For a more accurate description, read the source. ;)

Posted by Dion Almaer at 6:17 am

4.5 rating from 33 votes


Comments feed TrackBack URI

Awesome. I like how simple the code is.
I see a clear roadmap for web-based image editors :)

Comment by Joeri — March 26, 2010

I like a good phong.

Comment by Yansky — March 26, 2010

Looks like the beginning of a webgl software emulation layer for canvas2d to me.

Comment by rdza — March 26, 2010

Leave a comment

You must be logged in to post a comment.