Shadow not visible through transmissive object

Questions
,
1

Hello,

How do I get the shadow on a plane with ShadowMaterial to be visible through an object whose MeshPhysicalMaterial has the value transmission=1?

Here I created a sandbox showing the problem: busy-rumple-6c7ylg - CodeSandbox

You can see the shadow if you’re not looking through the glass.

Thanks.

2

Is it even possible or do I have to use a different material than ShadowMaterial? I noticed that it works with MeshStandardmaterial for the ground but this leads to a different color of the ground due to the light.

3

ShadowMaterial does not work since it is a transparent material. The transmission pass only works with opaque and transmissive objects so meshes with ShadowMaterial are discarded.

1 Like
4

Thanks for your reply!

What kind of material would fit better for this case?

5

cant you just manually set shadowMaterial.transparent to false

7

Thanks. This indeed made the shadow visible through the glass: busy-rumple-6c7ylg - CodeSandbox

But now the plane is white. Is it possible to change the color of it to the same color as the scene background. That would be enough for me.

8

That’s pretty straightforward:

image
image1233×271 43.2 KB

edit: oh wait, you did mean the plane, not the shadow :sweat_smile: then, try this:

image
image1215×454 47.2 KB

9

p.s. given your current bg color, the value needs to be like this:

image
image1171×221 27.4 KB

2 Likes
10

You can disable transparency and forcibly set the options automatically set for transparent objects which enables the shadow to render with blending in the opaque objects pass. As you can imagine it’s a bit more complicated to understand and maintain, though.

      <mesh position={[0, -0.5, 0]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
        <planeGeometry args={[20, 20]} />
        <shadowMaterial
          transparent={false}
          depthWrite={false}
          blending={THREE.CustomBlending}
          blendSrc={THREE.SrcAlphaFactor}
          blendDst={THREE.OneMinusSrcAlphaFactor}
          blendSrcAlpha={THREE.OneFactor}
          blendDstAlpha={THREE.OneMinusSrcAlphaFactor}
          opacity={0.2}
        />
      </mesh>

image
image882×774 35.2 KB

7 Likes
11

Thanks to both of you!

That works perfectly!

12

btw, you can also use meshtransmission material, it “sees” shadows and other transparent or transmissive objects.