Screenshot of Soft Shadows app
Figure 1 - A screenshot of the Dynamic Soft Shadows app running inside a web browser.
Launch web app in new tab...

This is a simple WebGL experiment with soft shadows and ambient occlusion effects to see if I can get some interesting visual results. It uses a straightforward shadow mapping technique (see below for credits), but renders pseudo-random shadows iteratively over multiple frames and accumulates them to achieve a more realistic shadow/shading effect.

You should be able to see the process in action whenever you make any change to the sun position which, after a short pause, will trigger a recalculation of the depth map and a regeneration of the cumulative shadow map.


Despite having done quite a few projects that render interactive shadows on building models, I have never been particularly happy with the visual result. However, I was greatly inspired by the GPU lightmap generation example in the lightgl.js project by Evan Wallace, so I felt that I had to at least see what I could do with it.

This experiment uses a lot of the code from Evan’s example, as well as some additional work refactoring the mechanics, adding some UI elements and 3D interaction, etc. The result is certainly not a general solution to the problem, being limited to quads and relatively simple models, but it has proved to be a really intriguing starting point for me.

Change Log

0.0.1 2014-01-07

  • Initial release.

Click here to comment on this page.