Fading mesh with shadow

Hello,

I have several meshes in a scene, casting shadows, and some of the meshes are fading out at some point. Is there a way to make the shadows of the fading meshes fade out too? I haven’t found any solutions to this online.

https://playground.babylonjs.com/#AYFDYB#1

Thank you!

This is unfortunately not supported as it would require to support as well colored shadows to ensure more visual consistency.

I actually wonder how we could make it in an efficient way :slight_smile:

A not very efficient way to do it is to use two shadow generators and use one specifically for the transparent sphere:

https://playground.babylonjs.com/#AYFDYB#2

Note that the ground is very bright because it is lit by both generators…

2 Likes

Oh, nice, thank you! And I got even closer with a second floor that has OnlyShadowMaterial :laughing: (That I couldn’t get to work on the typescript playground)
https://playground.babylonjs.com/#2SK74I

But yeah, that’s even more expensive…

1 Like

You can cheat it with something like this, using the multiple grounds. Without need to use more shadow generators nor lights.

https://playground.babylonjs.com/#AYFDYB#3

Just animate the alpha of one material

Can anyone explain why with using this approach setting alpha of first material to 1 makes shadow dissapear? I had to put 0.99 to make it work.???

That’s because you have z fighting with the ground 3: comment ground 3 and you will see the shadow.

When setting alpha = 0.99, this flags the mesh as being transparent, so it will be renderer after ground 3, so the shadow will be visible.

Still, z fighting does exist when you move around.

Even colored shadows can be faked with the ShadowOnlyMaterial
https://playground.babylonjs.com/#2SK74I#1

But yeah, as @sebavan said, it would be nice to have a proper, efficient way to do it, so that a shadow from a semi-transparent red die, that has an opacity map for the dots, can be casted, but I guess it’s pretty hard to find a really efficient way to do that.

In any case, these replies answer my question, so I will mark this as answered, and hopefully one day we will have a better solution to this.

Thank you!

1 Like

You can use dithering to simulate lighter shadows:

https://playground.babylonjs.com/#DVXPJ9

It works best with the blur exponential filtering technic, but even then if you zoom a lot you will see the dithering pattern.

Note that I used the new ShadowDepthWrapper to generate the custom shadows :slight_smile:

2 Likes

It looks really great, thank you so much!

Oh I knew it was due to z fighting, but I didn’t know the reason why 0.99 works though, i expected that it shouldn’t work as well. I tried playing with alpha index, suspecting that it has to do something with the render order, but I guess it doesn’t make sense to use alpha index when mesh is not transparent.

Thanks for the answer :slight_smile: