Shadows on transparent materials

Hello guys,

I’m struggling with light and shadow in my scene. I have trees and rocks. The rocks are affected by the light, the non-lighted part is darkened and they cast shadows. But there is something wrong with the trees. The trunk of the tree consumes light and gets darker where there is no light, but with the branches I don’t see any difference for the light side and the dark side, they are the same. The second problem has to do with shadows, I want the upper branches to cast shadows on the lower branches, but even with the receiveShadows option on, I don’t see this effect. I was thinking maybe I should divide the tree into multiple layers so that each layer can cast a different shadow, but that doesn’t seem to work either.
Any help would be appreciated. The scene contains rocks, 1 tree with AplhaTest mode, 1 tree with AlphaBlend, and one split tree with 7 layers to cast shadows.

Thanks in advance

Welcome aboard!

Your landscape material is flagged as transparent because useAlphaFromAlbedoTexture = true; and albedoTexture.hasAlpha = true;: you should set these properties to false, else you have some wrong sorting between the trees and the landscape leading to weird artifacts.

Also, you need to tweak the shadow generator parameters to improve the rendering (use the inspector for that).

For eg, using a blur exponential filtering:

Or using PCSS:

Hello Evgeni,

thank you very much for help, the last example contains very cool solution, in terms of end picture.
Have a small question, if I use these PCSS shadows and render them only once for static elemets on the scene, will it affect the performance (FPS). As I read in documentation, this is costly operation

1 Like

You will save some perf by doing so as the shadow map won’t be regenerated each frame. But rendering the meshes that receive shadows will still take more time than if they didn’t receive shadows as there are some additional shader code to handle shadow rendering.


I was just wondering why this is not working for me. Seems like CascadedShadowMaps cannot deal with transparent materials properly:

Anyway to fix this?


Edit: It does not seem to work in playground, but it seems works in my app. I had to set transparencyShadow to true as stated in playground. Not sure if we need to look into this one… :upside_down_face:

You need to set a reasonable value for the camera’s distant plane, see Cascaded Shadow Maps | Babylon.js Documentation :

Note that blur exponential is not supported with CSM, I used PCF instead in the PG above.

1 Like