Handling Decals on Cloth Surfaces in Three.js

Based on your issue with decals on a cloth surface, you're experiencing a common depth-related rendering problem. The behavior you're seeing is expected based on how the depth buffer works in WebGL and Three.js.

Understanding the Issue

When you enable depthTest on your decal material, it will only render where it's closest to the camera according to the depth buffer. This is why it only appears on the front side of your cloth. When you disable depthTest, the decal ignores the depth buffer entirely and renders regardless of what's in front of it, which is why it appears on both sides.

Possible Solutions

1. Use Material Side Property:

   JAVASCRIPTCopied
   decalMaterial.side = THREE.FrontSide; // Only render on front faces

   This will ensure the decal only renders on the front faces of your geometry while still respecting the depth buffer.

2. Use Depth Writing:
   Keep depthTest enabled but control how the decal interacts with the depth buffer:

   JAVASCRIPTCopied
   decalMaterial.depthTest = true;
   decalMaterial.depthWrite = false; // Don't update the depth buffer

3. Renderer Depth Buffer Management:
   For more complex scenarios, you might need to manage the depth buffer manually:

   JAVASCRIPTCopied
   // Clear the depth buffer before rendering decals
   renderer.clearDepth();
   // Render your decals
   renderer.render(decalScene, camera);

4. Use Render Order:

   JAVASCRIPTCopied
   clothMesh.renderOrder = 0;
   decalMesh.renderOrder = 1;

   This ensures the decal renders after the cloth, which can help with certain visibility issues.

For your specific case with a cloth surface, I recommend trying the first approach with material.side = THREE.FrontSide combined with proper depthTest settings, as this should give you the most predictable behavior where decals only appear on the front-facing side of your cloth.