Fast WebGL Shadowmaps for Big Scenes

Posted on:March 20 2017

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

scene.ShadowMappingEnabled = true;

...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.


very good
2017-03-22 13:41:00

Oh, it's so good! Looks awesome! Cant wait when i can make this in my game! :D
rolevix (Vitaliy
2017-03-22 16:08:00

Whoho! Looking forward to use this in CC in a near future!
2017-03-25 13:42:00

2017-03-29 09:12:00

Cool! Nice vids e demos! Please! Post and create more demos to see.
Morice CorpSoft
2017-03-30 09:27:00

Add comment:

Posted by:

Enter the missing letter in: "Int?rnational"




Possible Codes

Feature Code
Link [url] [/url]
Bold [b]bold text[/b]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]