Fake 3D Lighting with Javascript

      min. Distance:  max. Distance:

Fake Lighting With Javascript

Update (July-6th)

Opera is fixed. I modified the code in some parts and added a more sophisticated light falloff algorithm. This seemed to have gotten rid of the display error.

Update (May-20th)

I started a tutorial series explaining the details of this technique. Part one covers the rendering and setup of the images. Following parts will cover the shading algorithm and engine integration.

see Fake 3D Light Tutorial Part 1

Initial post (Sometime in May)

There is not much to say about this one. The Adobe Flash version of this experiment explains the concept in depth.
This page merely is a proof of concept that Javascript is an often underestimated language and is actually quite powerful.

Unfortunately this looks not very nice in IE yet. I have to implement the alphaImageLoader filter to cope with the transparent PNG images. Also the event handling in IE is different which I didn't take care of yet.
Opera somehow doesn't work either - I don't know the reason for that as it doesn't give me an Error at all.

Gecko and Webkit based broswsers should work fine though. If I get around to it I'll fix IE and Opera eventually.

If you like it or have questions, drop me a line at: