Very dark shadows

[xawill]

Hi,

First, thank you for this awesome library! I am using it with 3DTilesRenderer (vanilla JS; post-process lighting) and it works great.

I noticed however that the shadows on the buildings of the Google 3D tiles are very dark. I tried playing with tone mapping mode, tonemappingexposure and albedoScale, but either the shadows are too dark or the rest of the scene is overexposed.

I saw some settings that might help in AtmosphereParameters (increasing sky ambient brightness) but it is not really documented and difficult for me to use.

Is it possible for you to guide me in the right direction?

Thank you very much in advance for the support. Cheers, Xavier

[shotamatsuda]

I suspect that you added light objects in the scene while using the post-process lighting. Please have a look at the note on this and follow the guide.

[xawill]

No, I don't have any light objects added to the scene. I think I have already followed the guide carefully.

You can have a look at the code here and the demo here. You can also notice the same behavior in @gkjohnson's 3DTilesRenderer atmosphere example here.

[shotamatsuda]

Thanks for the code, and I now see the details. Yes, you seem to be setting up everything correctly.
One reason why the shadows are dark is that correctAltitude is set to false.

correctAltitude = false:

correctAltitude = true:

But I think it is not the only issue. I noticed heavy banding in the inscattering at the horizon in your online demo, as shown in the image below. This might mean something is wrong with the precomputed textures, or the precision of depth buffer is insufficient, although I haven’t seen such artifacts before. I’d like to solve the issues one by one, so please set the correctAltitude and see whether the shadows become brighter.

[xawill]

Thanks a lot; this indeed greatly increases brightness of shadows.

I had set correctAltitude to false because I noticed it to reduce another artefact I encountered: a harsh horizontal line ~100m in latitude above the horizon with the scene darker above than below it (see two screen captures below).

I also noticed the banding at low sun angles, but was less annoyed by that. Still great if you can also help fix that :)

I updated the demo and pushed the commit for you to check.

correctAltitude=false:

correctAltitude=true:

[shotamatsuda]

I'm glad the shadow has become brighter. However, I see that your demo deviates from the correct color. It should be the same because you are also using AgX tone mapping. I cannot run and debug your demo locally because the 3d-tiles-renderer is customized on your end.

I created a simple CodePen to confirm the 3d-tiles-renderer integration in vanilla JS doesn't have any issue. Enter your Google Maps API key in the top-left of the screen and press Enter to see the correct result. You will see that there's no banding in the inscattering, and the sky color is slightly different from that in your demo. I'm still not sure what exactly in your setup is causing it.

As to the horizon artifact, it's a limitation of Bruneton's parameterization. There is an improved version proposed by Intel but it still doesn't eliminate this artifact.

[shotamatsuda]

Please note that in the WebGPU implementation, I introduced the multiple scattering LUT and the option to raymarch the scattered light in the atmosphere@0.19.0, which eliminates the horizon artifact.