How to prevent DecalGeometry from going through mesh?

I’ll use this JS Fiddle to illustrate my point:

When you click on the blue mesh a DecalGeometry is applied on it, the issue is that the Decal is also visible on the other side of the mesh because the size of the decal box is thicker than the mesh itself.
(In this example the thickness of the mesh is 0.2 and the thickness of the decal is 1)

How to prevent the DecalGeometry from appearing on both side of the mesh even if the decal box is thicker than the mesh?

I really want the decal to appear only on the side we click on.


The only way to prevent this issue from happening right now is to lower the size of the decal projector.

Alternatively, you could try to prevent this with a custom modification of DecalGeometry by comparing the vertex normal in world space with the viewing direction. If the result is greater zero, you discard the vertex in clipGeometry() (because it means you see the vertex from behind).

Thank you so much for your help @Mugen87. You are helping immensely here! :grinning:

1 Like

Hey @Mugen87,

I’ve been looking at the DecalGeometry source code, and I’m not really sure how to implement the alternative solution you mentioned. (Comparing the vertex normal in world space with the viewing direction).
Would you give me some guidance on how to achieve this code-wise please?

Thank you so much!

Check out this update version of DecalGeometry:

Especially the updated version of pushDecalVertex(). This function is actually a better place for the check than clipGeometry().

1 Like

Waouw thank you so much @Mugen87, you just made my day! :grinning:

1 Like