Jump to content

High-quality shadows in an infinite world


Recommended Posts


I'm trying to get my head around shadows in Babylon and need some help.

What I'm trying to achieve is something that gives me high quality shadows throughout an infinite world. Specifically, I'm making a 3D geospatial visualisation using Babylon (think Google Maps but in Babylon) so the user can effectively scroll / move around forever. What I'm struggling with is getting a shadow system set up that can output nice crisp shadows regardless of where the user / camera moves to.

What I'm looking for:

  • Single directional light that can dynamically change direction (replicating the sun -- I can solve this separate to this)
  • Crisp shadows on what could be thousands of objects in view (buildings in a city, as seen from above)
  • Shadows are always visible to the user, regardless of where the camera moves to / which new objects come into view
  • Performance

I've been digging through the forum and plugging away at it all afternoon and evening and just can't seem to get things working as I want, so I was hoping someone had a better idea that might help.

Here's the playground link for what I have so far: https://playground.babylonjs.com/#SX3GXQ#6

What I've tried (amongst many other things):

  • Linking the light position with the camera position
  • Higher resolution shadow map
  • Fiddling with light.shadowFrustumSize
  • Shrinking the scale of the scene

What I have currently is sort of what I'm after but the performance is bad (esp. when you zoom out) and the shadows are pixellated and seem to flicker as the camera is rotated. Also, some of the shadows seem to disappear when the camera is rotated too. My understanding of shadows is limited so I'm clearly doing a few things wrong.

I'm currently scratching my head at a loss for what to try next so hoping someone can help!



Link to comment
Share on other sites


This could have been fixed with Cascaded shadows but this is not YET supported by Babylon.js (wink! wink! @Sebavan)

In the meantime here is a good read (if you did not already): http://doc.babylonjs.com/babylon101/shadows#troubleshooting

Using spector.s on your PG you can see that the light is not at the right position. The trick is to make sure that the light can see all the objects and is closer as possible to make sure we have the maximum precision


Link to comment
Share on other sites

Ah I see! That's not the first time I've heard about cascaded shadows. When you say it's not supported yet, do you mean that it's something in the works? Or should it be something I shouldn't expect from Babylon for some time? I ask because I need to make a decision on what framework to use and I'm desperate to find one that can provide the nicest shadows. Three.js removed support for cascaded shadows, which is a shame. If I know that it's something I shouldn't expect then that helps me.

I've been reading through the shadow troubleshooting guide and that's been helping somewhat, thanks. That's basically how I got to where I am now.

In regards to Spector. How do I use it to see that the light isn't at the right position? I assumed that by linking it to the camera it would help by not creating shadows further from the camera but perhaps I've misunderstood that. For what it's worth, the shadows need to stay at the same direction even though the light is moving with the camera.

Considering cascaded shadows aren't a thing yet, do you have any other advice for ensuring performant and high-quality shadows on a dynamic scene like this? I'm only fussed about shadows being around the (moving) camera to a certain point, it's OK if there are no shadows further into the distance so long as the shadows around the camera are decent.

Link to comment
Share on other sites

We have an open issue (https://github.com/BabylonJS/Babylon.js/issues/1818) but we are not working on it now

Spector.js will show you the content of the shadow so you can position the light the closer possible.

To your last question: 

* You can consider playing with shadowcaster list to only keep the local meshes

* You can use several lights (and limit the affected meshes with addIncludedMeshOnly ) 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...