Colored shadow map in three.js

Questions
1

Default shadow color in Three.js is black. But I need to colorize it like here on screenshot (note slightly blue tone):

image

Couldn’t find solution neither in documentation or google

2

Related:

As mentioned as stackoverflow, using THREE.ShadowMaterial is the only way right now to achieve colored shadows. But it’s an improper solution for your case since you would have to render your world twice with the normal and the shadow material and blend everything together. I don’t even know if this approach produces acceptable results at all.

You could add an ambient light to your scene in order to influence the shadow color but this would also affect all other surfaces. Besides, shadows in three.js are usually much darker compared to your screenshot. Since three.js does not have a property to modulate the shadow intensity or strength, it’s also not possible to render a more subtle shadow. Read this github issue for more information about that topic.

1 Like
3

Would it work to combine two lights that add up to white to get blue shadows? For instance

var dirLight = new THREE.DirectionalLight(0xffff00);
var ambLight = new THREE.AmbientLight(0x0000ff);
  • The directional light + ambient light would illuminate the scene in white.
  • Parts where directional light is in shadow would only get illuminated by ambient light, thus it would be blue.
2 Likes
4

AmbientLight produces indirect light whereas DirectionalLight produces direct light. Both types of light are treated in shaders differently which means it’s not possible to combine them in your proposed way. At least not for PBR materials.

5

Yeah, you’re right. I tested it here, and I’m getting lots of yellow hues:

https://jsfiddle.net/marquizzo/qkobpfdn/38/

MeshStandardMaterial (box) and MeshPhongMaterial (icos) seem to be leaking yellows in the specular reflections, but MeshLambertMaterial looks like it adds up to white nicely! Maybe this would work for @imgood’s matte look from the screenshot as a quick workaround.

3 Likes
6

Also consider doing this for different shadow intensity: https://github.com/mrdoob/three.js/pull/14087#issuecomment-431003830

1 Like
7

Excuse me. I have the same issue with three.js. Since i have already 2 light, 1 directional and one ambiente, how do i apply the solution u linked? (clone light). I am a beginner, so be aware of this. Thank u