Multiple directional lights interfering with each other

My scene has 5 directional lights, 1 centered where the camera is, and 4 other directional lights surrounding it. This gives the center shadow high detail, and the outer shadows low detail.

The problem is that if I set every directional light to have an intensity, the scene gets very bright as these combine. So I therefore tried setting each light intensity to 1/5. This solves the brightness issue, but it makes shadows no longer cast from trees/models onto other trees/models (only very faintly).

If I set the central light to normal intensity, and the other to 0 or 0.0001, the shadows come back for the central light, but not for the other lights, causing the issue you can see in the below image:

Trees despite being in shade are still lit up.

Is there a way to restrict directional light to it’s own frustum? Or is there another solution?

Thanks.

You probably don’t want to have 5 directional lights in your scene. I’m guessing that what you want is an ambient light and a directional light. Consider that every light adds a bit of extra code to all of your shaders, which means more computations.

Every shadow casting light adds an entire separate render pass, meaning that if you have just 1 shadow casting light in the scene - your scene will render twice actually:

  • once from perspective of the light to create a shadow map
  • once from perspective of the camera to create the final image

Each “shadow” also comes with an additional texture, these also add overhead to your rendering performance.

I think you should re-evaluate your approach. Have a look at examples - you might draw some inspiration for new ideas.

1 Like

The reason for multiple directional lights is to have detailed shadow nearby, and less detailed shadow stretched out far away, so I can see shadow in the distance, even if it’s not detailed. There are examples of this done: http://alteredqualia.com/three/examples/webgl_road.html
http://alteredqualia.com/three/examples/webgl_morphtargets_md2_control.html
It is a legitimate technique and is not causing my scene as much lag as I expected. But yes I thought about these things before. You did not help me.

I agree I need a different approach though.

Are you looking for something like this? https://threejs.org/examples/?q=shadow#webgl_shadowmap_pcss

Although that is a nice effect, that’s not what I’m looking for right now. Instead I want shadow to be cast over a very large area, yet still be able to see detailed shadows close by.
See shadows cast on trees nearby, but not cast on far away trees, yet still cast on the plane geometry.

I’ll just use a single directional light and stretch that so they are not so detailed, and stretch as camera zooms out. That is an ok compromise.

¯\_(ツ)_/¯

/cc

@

those are cascaded shadowmap examples. That’s not the same.

If you use 5 shadow maps, say at 2048 resolution and your screen resolution is 1024x2048 (for convenience sake) - you basically end up rendering 10x your screen resolution in shadows in addition to what you render to screen. If you say it has little impact on performance - that may be true on very high-end hardware. If you only target high-end hardware - that’s perfectly fine, otherwise - I do suggest you re-evaluate your approach.

by the way, cascaded shadowmaps are not supported in Three.js since AQ left the project. You can find more information on CSM and various shading approaches in some of the issue tickets on three.js github repo. I wrote quite a bit on it several years ago, it might be helpful.

1 Like

OK thank you. I have removed the additional shadow maps, now have just 1.