Fast WebGL Shadowmaps for Big Scenes

Creating fast realtime 3D scenes with shadows in WebGL isn't that easy: Implementing shadow maps is surprisingly simple, but making them work for big, dynamic and complex scenes is a bit harder.

I made the first step into that direction by adding a simple cascade shadow map renderer to CopperLicht, the open source WebGL JavaScript library. The implementation is focused on speed: The shadows won't look that nice, but they are robust for the full scene and a (relatively) high framerate is kept.
Try it out yourself:

(Click into the image. Move with cursor keys and run by holding shift)

You can also Run this fullscreen in a new tab.

The just released version 1.13 of CopperLicht now includes this feature, you just need to set



...and it will work. You might want to tweak some of the shadow parameters like ShadowMapBias and ShadowMapCameraViewDetailFactor to make them look more nicely for your scene.

If you look closer in the demo, you'll notice that shadows in the distance won't have very high details, but shadows close to the camera have. That's because I've used a cascade shadow map approach with just two levels of shadow maps: One for the shadows close to the camera, and one for the ones in the distance. You can adjust how the shadows are drawn, like which resolution they'll have and what 'close' means. If your scene is a smaller one, then the shadows will have more details as well.


It's the first time I've been using shadow maps anywhere in my code, so I guess I'll find a lot of places where to optmize this still a bit for speed, but for now, it's quite ok, I think. I'll port this feature to other platforms too in the near future and make it available in the CopperCube game engine as well then.