Shadow mapping with Three.js (WebGL)


Here’s a sample shadow mapping done on WebGL using Three.js library.

What I disliked about OpenGL is the glut of functions and the overly complicated hoops that you need to jump through just to create a simple working Phong model example. And what I disliked (years ago, I haven’t dabbled in JavaScript recently) about Javascript is the lack of strong typing and the different behaviours depending on the browsers which leads to endless debugging sessions.

One would have thought that WebGL, which is OpenGL on web browsers, is a perfect recipe for disaster. However thanks to Three.js, I managed to whipped up this shadow mapping example in less than 2 hours (includes testing, cleaning up code, learning parts from scratch, etc).

And since Three.js already comes with essential functionalities, such as model loading, shadow mapping, phong based shading, trackball, etc, creating a working WebGL application seems to be easier than ever. And the resulting codes are clean and easy to read too! Kudos to Three.js [1]

Nevertheless, here’s the sample of shadow mapping with ply models[2]:

You can get my javascript codes over here:

[1] The dragon and Budai statues ply models are obtained from Stanford 3D scanning repository (

[2] Three.js (


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s