Example shadow / contact fix

[Fluqz]

Related issue: Fixed #20848

Description

The current example has a small z-fighting bug, because of multiple planes laying over each other.
polygonOffset will fix the issue

[gkjohnson]

Thanks! With polygonOffset the vertical offset should no longer be needed:

https://github.com/mrdoob/three.js/pull/20849/files#diff-f6e6eaefcc3ba526fa08c969dcb2456960450a4e12162ce3464e5f7f3007104fR140

And here's the updated live example link from this PR:

https://raw.githack.com/Fluqz/three.js/contact-shadows/examples/webgl_shadow_contact.html

[mrdoob]

Thanks!

[marcofugaro]

Guys I just noticed now the meshes go through the shadow plane, making the fillPlane useless. Not even the color input in the gui works.

Any idea how to fix this with polygonOffset?

Current	Original

[gkjohnson]

Guys I just noticed now the meshes go through the shadow plane, making the fillPlane useless.

Oh good catch. Just tried it out and what's happening is the shadow plane renders first and renders to depth meaning the fill plane fails the depth test everywhere. If the fill plane weren't transparent this would have worked. I just tried a couple fixes and here's what works:

• Keep the polygon offset and set renderOrder = 1 on the shadow plane or
• Set depthWrite = false on both materials and set renderOrder = 1 on the shadow plane

[Mugen87]

Set depthWrite = false on both materials and set renderOrder = 1 on the shadow plane

I vote for this solution.