Shadow maps - Casting shadows on transparent plane

[libe]

Hi,

I need to cast shadows on a transparent plane in order to get only the shadow shown and not the material applied to the plane (I want it fully transparent). Is this possible in three.js? I am using THREE.SpotLight as light source.

As a workaround solution I think I could apply a fully transparent texture map as a material and see if works as expected but was wondering if I could manage to get this effect just tweaking standard material properties.

Thanks

[libe]

OK tried workaround did not work as I cannot get any shadow casted on a transparent texture mapped plane...

[mrdoob]

I don't think that's possible.

[alteredq]

I'm not sure I understand the question but shadows should get casted on transparent materials.

What shouldn't work is light shining through the transparent materials. That is, everything is either full opaque or fully transparent for shadows, there no in between, independent of material transparency.

See also discussion in #1509

[mrdoob]

What shouldn't work is light shining through the transparent materials. That is, everything is either full opaque or fully transparent for shadows, there no in between, independent of material transparency.

Yeah, I think that's what he means.

[skrat]

For reference, if anyone needs it http://pastie.org/5088640

[etx]

@skrat Thanks a million for that shader. Works perfectly for a shadow catcher!

[mrdoob]

@etx uh, what does that shader do? :U

[etx]

It just gives me the shadow w/ alpha and the rest of the object with that shader is invisible. It's similar to a shadow catcher in CGI software. I'm using threejs to render a product over a photograph, so this is very useful.

[mrdoob]

Oh right. So it gives you black texture with the visibility stored in the alpha channel. Correct?

[etx]

Yep!

[Jiaying-YU]

@etx How can you accomplish this using the shader above? what I get is just a black plane......

[JosephClay]

I have been looking for a way to get his effect, however, using the snippet above I'm getting a THREE.WebGLShader: Shader couldn't compile. error.

[syoels]

@skrat any chance you can re-upload that shader? the pastie link doesn't work anymore and I have encountered the exact same prob..thanks in advance!

[ghost]

@etx @skrat could you please please reupload an updated shader? The one you posted doesn't seem to work anymore, like @JosephClay I get the "shader couldn't compile" error...

[WestLangley]

Try THREE.ShadowMaterial(). See this stackoverflow post.

[mrdoob]

@WestLangley do you think we should promote ShadowMaterial to core?

[ghost]

@WestLangley thanks a lot - that solved it. @mrdoob I think it's a super useful feature which many know from GCI so it might be a good promotion for core

[WestLangley]

@WestLangley do you think we should promote ShadowMaterial to core?

I do not have a strong feeling one way or the other... If I am not mistaken, it suffers the same defficiency as MeshLambertMaterial -- a texel in the shadow of one light gets no light from any other light.

[mrdoob]

Yeah, it's a mask. Basically how the old shadows used to be.

[martha-anne]

Hi,

ShadowMaterial sounds like exactly what I need and I am so happy that you've implemented it - but I can't work out what version of three.js I need to download/link to to get it to work. Can you point me in the right direction?

[mrdoob]

r74 or newer

[martha-anne]

Thank you! I still get THREE.ShadowMaterial is not a constructor though.

[mrdoob]

Is not included in the build yet, it's in the examples folder. You need to include it separately:

<script src="js/materials/ShadowMaterial.js"></script>

[riccardolardi]

would promote it to core as well, it's 4kb

[martha-anne]

Perfect, thank you! I looked for the shadowMaterial file before and couldn't find it.
Works fantastically for my needs.

[mrdoob]

As of r77 ShadowMaterial is now in core.

[riccardolardi]

@mrdoob great move thanks

[b-z]

Try THREE.ShadowMaterial(). See this stackoverflow post.

Thanks.
It works!