How to Optimize Shadow Rendering in Three.js for Better Performance?

Questions
,
1

I’m currently working on a large-scale 3D scene using Three.js and have run into performance issues related to rendering shadows. My scene features multiple dynamic light sources and about fifty mesh objects with complex geometries. I’ve noticed that the frame rate drops significantly when shadows are enabled.

  • Light Types: PointLight and SpotLight
  • Shadow Map Type: PCFSoftShadowMap

I’ve tried reducing the shadow map resolution and limiting the number of lights casting shadows, but I’m still not achieving the smooth performance I aim for. Below are the settings I’ve tweaked

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
light.shadow.mapSize.width = 512; // default is 1024
light.shadow.mapSize.height = 512; // default is 1024

Could anyone suggest further optimizations or point out any potential pitfalls in my current setup that might affect performance?

2

Point lights rendering shadows 6 times.
Spot lights and directional lights rendering shadows 1 time.
PCFSoftShadowMap heavy.
Try THREE.VSMShadowMap and play with parameters:

light.shadow.radius=0.2;
light.shadow.blurSamples=2;
4 Likes
3

I generally try to stick to 1 or 2 shadow casting lights.
And as @Chaser_Code mentions:
It’s important to remember that each shadow casting light re-renders the whole scene to generate the shadowmap.
You have some limited control over how expensive that is by adjusting the shadow.camera near and far, and shadowmap size like you’re doing but end of the day, just the scene graph traversals and matrix computes end up taking a lot of time.

If you find you need better shadows than 1 or 2 lights can provide, you want to start look at precomputing lighting/lightmaps etc.

2 Likes