Cascaded Shadow Maps (CSM) are now in!

CSM has been added in Bablyon.js as a new shadow generator (CascadedShadowGenerator).

Documentation can be found here. The inspector has not been updated yet, but will be in the coming days.

I know some people were asking for this feature for a long time, so let us know how it works for you and please feel free to leave any comments / remarks in this thread.

Teaser:
https://playground.babylonjs.com/#15UN5M#4

https://playground.babylonjs.com/#15UN5M#3

First picture with cascaded shadow generator, 1024x1024x4 cascades, so same overall texture size than in the second picture (for fair comparison).
Second picture with standard shadow generator, 2048x2048 texture.
Also:


Left: CSM low quality (1024x1024x4)
Middle: CSM high quality (2048x2048x4)
Right: Standard shadow generator (2048x2048)

26 Likes

Note that you can experiment with this tool: CSM Explorator

2 Likes

cool thing. i should try try this

Probably one of the biggest community contribution ever!

You rock!!!

3 Likes

Totally Awesome !!! could not better start off the year :slight_smile:

3 Likes

Hey there, this is great!
I started playing around with it and trying to make shadows not refresh gives some weird artifacts zooming in https://playground.babylonjs.com/#15UN5M#5

Is this normal behavior? Also, seems like performance wise, at least in your demo, the CSM is 10 fps slower than the standard shadows.

Nevertheless this is great and I am very much looking forward to using this in the future!

Really love the part “Optimizing for speed” and “Optimizing for quality” in the documentation!

This is really smart to have added those.

2 Likes

Hi @Null,

I’m afraid BABYLON.RenderTargetTexture.REFRESHRATE_RENDER_ONCE can’t be used for CSM because the projection matrices (and so the depth maps) are recalculated each frame according to the camera view, so matrices (/ shadow maps) calculated (/ rendered) for frame X are generally not suitable for frame X+t, except if you keep t low so that the changes are minimal (so REFRESHRATE_RENDER_ONEVERYTWOFRAMES should work, albeit you may experience some rendering artifacts depending on your scene and movements).

If you want a one shot shadow rendering, you are better off using baked / pre-calculated shadows I think.

CSM is doing N shadow map rendering, N being the number of cascades (4 by default), so it’s expected it takes a little more time than the standard generator to render, that does a single rendering. However, we tried to optimize as much as possible, removing code from the shaders depending on the options you choose: have a look at the “Optimizing for speed” section in the documentation for detail.

Also, proper culling of the shadow casters is not implemented yet, all objects (shadow casters) are currently sent for rendering in each shadow map. So, if you have a lot of shadow casters in your scene and only a small number is relevant for a given frame, it might affect the performances.

1 Like

It’s awesome. The cascading shadows are really pretty. Thank you for this contribution.

1 Like

:heart_eyes::heart_eyes::heart_eyes: thats pretty neat, ive always had issues with shadows not being clean, phenomenal

Thanks for the kind words!

1 Like

Awesome!

I’m seeing many more clicks on the standard shadow generator version than the new CSM version. You might want to put the CSM PG first or just clearly label the links.

You’re right!

I have changed the order of the pictures :wink:

Very nice addition, which comes with a ready-to-read doc’ on top of that :wink:

What happens on webGL1 devices, is there a fallback when using CSM?

No, there’s no fallback for WebGL1, it’s a WebGL2 only feature as for performance sake it uses a Sampler2DArrayShadow (and filtering are PCF or PCSS, which are WebGL2 only features too).

1 Like

So just a basic question about shadows, i guess it’s easy to answer if you already changed the shadow behavior:

Is it possible in WebGL (in general or babylon) to color the shadow?
Thing is - slightly colored shadows brings more variety to applications and the look/feel of images or sceneries.

Example: Early Morning Walk - Buy Royalty Free 3D model by Sorin Covor (@blessthefall) [8d71ccc] - Sketchfab Store

Shadows tend to look more realistic, or let’s say appealing or interresting, if they are not simply gray but can have a slight color note.

1 Like

I guess it would not be too difficult to color the shadow, but I will let the core team answer this as it is a global decision for the engine.

1 Like

Note that the inspector is now updated with the CSM specific properties:

4 Likes

I might actually not be that simple to accurately determine the color to use.

If we are thinking about hard coded color it might be simple though. Adding @PatrickRyan in case he is got any take on it ?

1 Like

If this open the door to be able to darken shadows when in PBR workflow, I say yes! :smiley: (shadows are lightened by the env texture: https://www.babylonjs-playground.com/#6X5RIE#1)

1 Like