# Decals not working with instanced mesh

**URL:** <https://discourse.threejs.org/t/decals-not-working-with-instanced-mesh/66462>\
**Category:** Discussion\
**Created:** [June 5, 2024, 3:09pm UTC](https://discourse.threejs.org/t/decals-not-working-with-instanced-mesh/66462 "2024-06-05T15:09:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Soham\_Bhaumik](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/soham_bhaumik/32/38540_2.png) [@Soham\_Bhaumik](https://discourse.threejs.org/u/Soham_Bhaumik)\
**Post date:** [June 5, 2024, 3:09pm UTC](https://discourse.threejs.org/t/decals-not-working-with-instanced-mesh/66462/1 "2024-06-05T15:09:15Z")

</div>

Been dabbling around with decals for a while. While it works like a charm with normal meshes, it doesn’t work with instanced meshes. How can I make it work with an instanced mesh? Does it require modifications to the source code?

Any help would be greatly appreciated!

Here’s a jsfiddle link for your reference:  
[https://jsfiddle.net/sk3tjzpg/1/](https://discourse.threejs.org/t/jsfiddle-like-embeds-in-posts/65)

---

<div class="post-metadata">

**Author:** ![Lukasz\_Mestales](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukasz_mestales/32/65638_2.png) [@Lukasz\_Mestales](https://discourse.threejs.org/u/Lukasz_Mestales)\
**Post date:** [June 6, 2024, 2:59pm UTC](https://discourse.threejs.org/t/decals-not-working-with-instanced-mesh/66462/2 "2024-06-06T14:59:10Z")

</div>

I see my friend, that you really need solution of your problem…

> <https://stackoverflow.com/questions/78581988/decals-not-working-with-instanced-meshes-in-three-js>

> <https://stackoverflow.com/questions/78580991/decal-geometry-not-appearing-on-instancedmesh-in-three-js>

> [@Decal Geometry on instanced mesh not showing up even if renderorder and depthtest are set](https://discourse.threejs.org/t/decal-geometry-on-instanced-mesh-not-showing-up-even-if-renderorder-and-depthtest-are-set/66455):
>
> I have an instanced mesh set up as follows: const instancedGeometry = new THREE.BoxGeometry(1,1,1); const instancedMaterial = new THREE.MeshBasicMaterial({ color: new THREE.Color(0xff0000) }); const instancedMesh = new THREE.InstancedMesh( instancedGeometry, instancedMaterial, randomPoints ); I have a raycaster set up and I want to basically apply a decal on whichever is being clicked with the mouse. The raycast set up is standard and the intersection code is as follows: document.addEventLis…

Thing is, that probably nobody gives you _one-liner_ solution of that. I think, good will be understanding of nature of instanced meshes. Then we understand that has to be:

1. Very complex.
2. Very bad for performance.

Each instance shares the same geometry and material but have different transformations (position, rotation, scale - (!) how many, possible calculations, you need to hit them) to minimizing the number of draw calls, and nature of decal is applying other geometry **on** meshes which doesn’t even _fully exist_ (in this scenario), because only one exist (with its geometry) which is root of them, then even on first glance has to be hard to implement, at least for me.

If you put a gun to my head and I had to do it, I would try to do it with a custom shader, with the shape I’m interested in, and use Raycaster to detect intersections, and _stick decal_. Similar like in this example but, let say, shading shape, on instances. But I don’t even know if it’s possible or if it will work…

[https://threejs.org/examples/?q=ray#webgl\_instancing\_raycast](https://threejs.org/examples/?q=ray#webgl_instancing_raycast)

---

<div class="post-metadata">

**Author:** ![Soham\_Bhaumik](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/soham_bhaumik/32/38540_2.png) [@Soham\_Bhaumik](https://discourse.threejs.org/u/Soham_Bhaumik)\
**Post date:** [June 10, 2024, 11:55am UTC](https://discourse.threejs.org/t/decals-not-working-with-instanced-mesh/66462/3 "2024-06-10T11:55:57Z")

</div>

Hi @Lukasz_Mestales Thank you for your response. My requirement was very open ended, and this was one approach I had spent a good amount of time on. A custom shader on an instanced mesh was proving to be equally difficult.  
Came across Troika’s [InstancedUniformsMesh - Troika JS](https://protectwise.github.io/troika/three-instanced-uniforms-mesh/) . Hopefully, this works well!