title: Overlapping shadows in THREE.js
body: <p>I've been modeling the Sun-Earth-Moon system to simulate the Aug. 21 eclipse. THREE.js is working fantastically.</p>
  
  <p>The only hangup I have is with making shadows that overlap to create darker shadows in the joint area. I earlier <a href="https://stackoverflow.com/questions/45165893/three-js-casting-shadows-as-umbra-and-penumbra">asked about creating umbras and penumbras</a>, but it turns out this requires making many, many directional lights, which is a performance killer. So I came up with a solution I think is rather clever: I'm creating various invisible, concentric Moons of different radii that cast shadows of different radii, centered on the same spot.</p>
  
  <p>I already have an ambient light that tones down the opacity of one shadow. The trouble is that, if I have two objects individually casting their own shadows, one inside the other, they don't multiply. All I see is the biggest shadow.</p>
  
  <p>Is there any way to make shadows multiply?</p>