# Blending multiple shadows using "ShadowOnlyMaterial" **URL:** \ **Category:** Questions\ **Tags:** shadows\ **Created:** [August 30, 2023, 3:43pm UTC](https://forum.babylonjs.com/t/blending-multiple-shadows-using-shadowonlymaterial/43697 "2023-08-30T15:43:05Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [August 30, 2023, 3:43pm UTC](https://forum.babylonjs.com/t/blending-multiple-shadows-using-shadowonlymaterial/43697/1 "2023-08-30T15:43:05Z")
Hey folks, Is there a way to render overlapping shadows correctly with `ShadowOnlyMaterial`? Currently the only way I have figured how to render multiple shadows is create one shadowOnlyMaterial for each shadow generator, and then assign this shadow material to an exclusive mesh. I couldn’t find other ways since `ShadowOnlyMaterial` is not supporting multiple lights at the moment. The only downside of this approach is the blending mode between each shadow is currently “over”. But the actual blending mode should be “multiple” for a realistic visual result. Here is my PG: > **[Babylon.js Playground](https://playground.babylonjs.com/#1KF7V1%23194)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes As reference, here are render tests with ray tracing (rendered in Arnold for Maya): ![Screenshot 2023-08-30 at 10.38.09 AM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/6/a68b4a5faa4c35c27cc6192c8c06999740d5f192.jpeg) ![Screenshot 2023-08-30 at 11.30.43 AM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/e/cede7bc7c0b28c80724cd2f8d1135171d82a8c3d.png) You can see the red and green shadows are “multiplied” instead of “over” on top of each other. If use a PBR material on ground instead of “ShadowOnlyMaterial”, the render result also match the ray tracing rendering (which shadows are “multiplied”): > **[Babylon.js Playground](https://playground.babylonjs.com/#1KF7V1%23195)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Please let know if there are other ways to achieve this. Many thanks, Tawibox ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [August 30, 2023, 4:05pm UTC](https://forum.babylonjs.com/t/blending-multiple-shadows-using-shadowonlymaterial/43697/2 "2023-08-30T16:05:25Z")
Hello! IMHO the shadows on the Maya render are multiplied as well. Aren’t they? ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [August 30, 2023, 4:17pm UTC](https://forum.babylonjs.com/t/blending-multiple-shadows-using-shadowonlymaterial/43697/3 "2023-08-30T16:17:44Z")
@roland Hi! Yeah, in Maya render they look multiplied on each other. The main reason I am trying to use “ShadowOnlyMaterial” to render shadows is just trying to control the shadows independently from the scene lighting. I believe “multiply” between shadows in this approach is the best way to mimic how shadows works in real life. Hope this makes sense. Tawibox ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [August 30, 2023, 4:52pm UTC](https://forum.babylonjs.com/t/blending-multiple-shadows-using-shadowonlymaterial/43697/4 "2023-08-30T16:52:12Z")
Basically you can use transparencyMode, alphaMode and the alpha props on the ShadowOnlyMaterial to change the color blending. I suggest you to try out some combinations and find the best values which fits your needs. There are more props which can affect the overall result so I strongly suggest you to read the documentation about transparent rendering. > **[Transparent Rendering | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/transparent_rendering#the-transparencymode-property)** > > Learn all about how transparency is handled in Babylon.js. > **[Introduction To Blend Modes | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/materials/using/blendModes#available-blend-modes)** > > Learn blend modes and blending pixels in Babylon.js. Hope this helps! ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [August 30, 2023, 9:33pm UTC](https://forum.babylonjs.com/t/blending-multiple-shadows-using-shadowonlymaterial/43697/5 "2023-08-30T21:33:11Z")
Seems like shadowOnlyMaterial should support more shadows. Maybe @Evgeni_Popov has a trick ? ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [August 31, 2023, 1:04pm UTC](https://forum.babylonjs.com/t/blending-multiple-shadows-using-shadowonlymaterial/43697/6 "2023-08-31T13:04:52Z")
I’m not sure what is the end result you want to achieve. Shadows are not multiplied, it’s only light which is added or not depending on the pixel being in shadow or not. In this screenshot: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/2/82f8c04eaa356eb2fe0e63eeb04532d101458ecb.jpeg) The red areas are red because the areas receives lights from the red light (r,0,0) but not from the green light (0,0,0). The contributions are added (r,0,0)+(0,0,0)=(r,0,0) and yield to the final result. Same thing for the green areas. The black areas don’t receive any light, that’s why they are black. I don’t know how the Arnold rendering is generated, as parts in shadow from both lights should be black (or have a default ambient color)… I tried something in this PG, where I added a `shadowColor` to the `DirectionalLight` object, and used it as the “shadow color” instead of considering that shadow = no light: > **[Babylon.js Playground](https://playground.babylonjs.com/#1KF7V1%23198)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/8/0810c4886524f8ab04dea8b8fd8e505846cfc522.jpeg) ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [September 1, 2023, 4:39am UTC](https://forum.babylonjs.com/t/blending-multiple-shadows-using-shadowonlymaterial/43697/7 "2023-09-01T04:39:21Z")
Thanks for the response guys! @roland Thank you for the trick! Looks this should solve the blending mode need. I will look into it and figure out how it works! @Evgeni_Popov Thank you for explanation and the PG! Yeah I understand that in physically correct world, it should be a lights adding on each other instead of shadows multiplying each other. I was trying to find a way just to “mimic” the right look with shadows “multiplying” on each other. Arnold just allows you to change shadow color under each light - which looks like what you do in your PG. However when I open your PG its a pure white canvas on my browser. Do I need to install any libraries to make it working? Many thanks, Tawibox ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [September 1, 2023, 10:23am UTC](https://forum.babylonjs.com/t/blending-multiple-shadows-using-shadowonlymaterial/43697/8 "2023-09-01T10:23:11Z")
Ah, I bet you are using a Mac! We disable uniform buffers (to overcome a bug with Safari I think), and I only updated the shader code for the uniform buffer path. Here’s the fixed version: > **[Babylon.js Playground](https://playground.babylonjs.com/#1KF7V1%23201)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [September 1, 2023, 2:51pm UTC](https://forum.babylonjs.com/t/blending-multiple-shadows-using-shadowonlymaterial/43697/9 "2023-09-01T14:51:54Z")
@Evgeni_Popov Yayy I can see the render now! And yes I am using Chrome on Mac OS. And yes allowing lights to control shadow colors is what Arnold does. Looks this could be a handy feature to have. Do you have plan to add this to babylonjs officially? @sebavan @Evgeni_Popov In general it would be really nice to enable `ShadowOnlyMaterial` to support multiple lights instead of only one at the moment. Is it possible for you guys to add this? Many thanks! Tawibox ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [September 2, 2023, 4:21pm UTC](https://forum.babylonjs.com/t/blending-multiple-shadows-using-shadowonlymaterial/43697/10 "2023-09-02T16:21:47Z")
We have no plans to update the current standard / PBR materials or the `ShadowOnlyMaterial`, but contributions are always welcome if anyone wants to get started! ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [September 5, 2023, 2:31pm UTC](https://forum.babylonjs.com/t/blending-multiple-shadows-using-shadowonlymaterial/43697/11 "2023-09-05T14:31:37Z")
@Evgeni_Popov Gotcha! thank you very much!! Thanks everyone again. Tawibox