# How to best mix baked and realtime shadows?

**URL:** <https://forum.babylonjs.com/t/how-to-best-mix-baked-and-realtime-shadows/51056>\
**Category:** Questions\
**Tags:** shadows\
**Created:** [June 4, 2024, 2:13pm UTC](https://forum.babylonjs.com/t/how-to-best-mix-baked-and-realtime-shadows/51056 "2024-06-04T14:13:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![papajuan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/papajuan/32/29924_2.png) [@papajuan](https://forum.babylonjs.com/u/papajuan)\
**Post date:** [June 4, 2024, 2:13pm UTC](https://forum.babylonjs.com/t/how-to-best-mix-baked-and-realtime-shadows/51056/1 "2024-06-04T14:13:37Z")

</div>

Hi, my scene consists of mostly baked shadows but I also have a couple animated items, so I’ll also need some real-time shadows. I’m looking for some pointers/best practices on mixing the two. Consider this screenshot:

 ![shadow color](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/9/89d5d9b68226b636bc2598eec6598e8ebffad565.jpeg)

- First off, the real-time shadow color doesn’t match the baked shadow color. I found a potential solution in [this thread](https://forum.babylonjs.com/t/coloring-shadows/29759) that talks about tweaking the ground material to allow setting the shadow color. Is this still the only or best option for that?
- Is there anything that can be done about the weird overlap between baked and real-time shadows? Or do I just need to try to avoid that in how I layout my scene?

Thanks for any advice!

---

<div class="post-metadata">

**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:** [June 4, 2024, 2:27pm UTC](https://forum.babylonjs.com/t/how-to-best-mix-baked-and-realtime-shadows/51056/2 "2024-06-04T14:27:30Z")

</div>

> [@papajuan](#):
>
> First off, the real-time shadow color doesn’t match the baked shadow color. I found a potential solution in [this thread](https://forum.babylonjs.com/t/coloring-shadows/29759) that talks about tweaking the ground material to allow setting the shadow color. Is this still the only or best option for that?

Yes as we do not support colored shadow maps.

> [@papajuan](#):
>
> Is there anything that can be done about the weird overlap between baked and real-time shadows? Or do I just need to try to avoid that in how I layout my scene?

What do you find weird ? isnt the area naturally darker cause in 2 shadows ?

---

<div class="post-metadata">

**Author:** ![papajuan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/papajuan/32/29924_2.png) [@papajuan](https://forum.babylonjs.com/u/papajuan)\
**Post date:** [June 4, 2024, 2:59pm UTC](https://forum.babylonjs.com/t/how-to-best-mix-baked-and-realtime-shadows/51056/3 "2024-06-04T14:59:13Z")

</div>

> [@sebavan](#):
>
> What do you find weird ? isnt the area naturally darker cause in 2 shadows ?

If I had 2 lights casting 2 shadows, then yes, where they overlap would be darker. But in sunlight (a single light) all shadows from everything lit should merge into one. Sounds like this isn’t technically possible so I’ll just do my best to avoid overlap.

---

<div class="post-metadata">

**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:** [June 4, 2024, 7:12pm UTC](https://forum.babylonjs.com/t/how-to-best-mix-baked-and-realtime-shadows/51056/4 "2024-06-04T19:12:01Z")

</div>

Ohhhh I see 🙂 yup this is not possible. It would require to bake the shadow map itself.

That said it would be really cool to be able on the first frame to bake the shadow map with all static objects and on subsequent frame reuse this state as the base to render only the dynamic objects in.

---

<div class="post-metadata">

**Author:** ![papajuan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/papajuan/32/29924_2.png) [@papajuan](https://forum.babylonjs.com/u/papajuan)\
**Post date:** [June 4, 2024, 7:49pm UTC](https://forum.babylonjs.com/t/how-to-best-mix-baked-and-realtime-shadows/51056/5 "2024-06-04T19:49:00Z")

</div>

Wait, so you’re saying there’s a chance?? 😆

I don’t completely follow what you’re saying about baking a shadow map, but if you can elaborate on the technique you’re imagining or otherwise point me in the right direction, I’d love to dig into this. Lmk, thanks!

---

<div class="post-metadata">

**Author:** ![papajuan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/papajuan/32/29924_2.png) [@papajuan](https://forum.babylonjs.com/u/papajuan)\
**Post date:** [June 4, 2024, 11:11pm UTC](https://forum.babylonjs.com/t/how-to-best-mix-baked-and-realtime-shadows/51056/8 "2024-06-04T23:11:34Z")

</div>

Fascinating. Thank you so much for this explanation. Am I understanding correctly that this technique is all done in BJS, and there is no version of this where I can combine shadows from a _lightmap_ (baked from Unity, for example) with BJS real time shadows?

---

<div class="post-metadata">

**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:** [June 5, 2024, 4:29pm UTC](https://forum.babylonjs.com/t/how-to-best-mix-baked-and-realtime-shadows/51056/10 "2024-06-05T16:29:32Z")

</div>

I doubt that it will work for light map or you would need exactly one per light to be sure the overlap is with the light you think
