Cascaded Shadow Maps (CSM) are now in!

Announcements
1

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

image
image1272Ă—1157 191 KB

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

image
image1271Ă—1154 251 KB

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:

comparison-with-standard
comparison-with-standard800Ă—390 59.1 KB

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

28 Likes
2

Note that you can experiment with this tool: CSM Explorator

2 Likes
3

cool thing. i should try try this

4

Probably one of the biggest community contribution ever!

You rock!!!

3 Likes
5

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

3 Likes
6

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!

7

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

This is really smart to have added those.

2 Likes
8

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
9

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

1 Like
10

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

11

Thanks for the kind words!

1 Like
12

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.

13

You’re right!

I have changed the order of the pictures :wink:

14

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?

15

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
16

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
17

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
18

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

image
image283Ă—548 8.45 KB

4 Likes
19

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
20

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