Tom Giannattasio authored a very powerful lighting engine using JavaScript and CSS3, and it is very easy to use – Photon. There are three basic concepts in Photon:

  • Photon.Light (A point in 3D space from which faces are lit)
  • Photon.Face (A DOM element to shade with a given light)
  • render (Tie a light and a face together)

A Quick Start, from the project’s website:

var light = new Photon.Light();
var face = new Photon.Face( $('.face-1')[0] );
face.render(light, true);

That’s it! Styling is handled with CSS, and you can setup as many face and light combinations as you want. There is even the concept of a Photon.FaceGroup, which makes shading multiple faces with a single light source dead easy.

Checkout the awesome examples or view the source on Github.


Have comments? Send a tweet to @TheChangelog on Twitter.

Subscribe to The Changelog Weekly – our weekly email covering everything that hits our open source radar.