EnvMap makes shadows dissapear

Questions
1

Hi!

This is my problem.

No envMap, directionalLight with intensity 1. Create a totally black shadows.
image image

Now, load the envMap, the shadows dissapear looking to -Z, but when look to -X the shadow appears again
image image

And I need to shadows appear specialy when look to -Z
Any idea how to make it work propperly?

2

You can actually see a very faint shadow in the -Z image. Here I’ve adjusted the screenshot’s RGB curves in Photopea to highlight it:
-Z with envMap, color adjusted
This rules out shadow camera near/far planes as an issue.

But look at the overall lightness of the text/checker texture (especially when the envMap is disabled). In -X it’s brighter, and in -Z it’s quite dim.
The environment map lighting is added together with lighting from Light objects, and the environment map doesn’t cast shadows.

Shadows are only the absence of light, and in three.js specific lights cast shadows, and their shadows are only visible within the range and to the extent that they would otherwise provide light. And with other lighting added, the shadows can easily become washed out.

Solutions may include:

  • Repositioning the DirectionalLight to be directly overhead
  • Adding more lights to get (separate) shadows from different directions (expensive!)
  • Reducing material.envMapIntensity, and/or increasing intensity of the DirectionalLight. (With tone mapping enabled, there’s also renderer.toneMappingExposure to play around with, although I haven’t used this myself.)
  • Using fake shadows. Spheres are a good case for this, although if you want it to go over more than a flat surface, it will be more complex.
  • (If you were using a SpotLight, increasing the angle of the light might help. Just putting this out there for other people having this sort of issue. I think this may have helped in my case although I’m not sure.)
2 Likes
3

Great summary by @1j01 — I would just add:

Environment maps and ambient lights are sources of diffuse light in a scene. If your scene has a lot of diffuse light, shadows will not appear as strong, much like a cloudy day in real life. For strong shadows, the punctual or directed lights (PointLight, SpotLight, etc.) must be the dominant light sources in the scene.

One other option is to bake “ambient occlusion” in a scene. This occludes diffuse lights in areas like holes, insets, and corners, for a nice soft shadow effect that is independent of the direction of the lighting. But it doesn’t provide strong cast shadows from any particular direction. There are also some ways to do ambient occlusion without baking in realtime (“screen space ambient occlusion”) for moving objects, but that is a more expensive effect. This can be used in combination with the other options @1j01 mentions.

1 Like