# Highlight mesh ,when multiple meshes uses the same material

**URL:** <https://discourse.threejs.org/t/highlight-mesh-when-multiple-meshes-uses-the-same-material/44459>\
**Category:** Questions\
**Tags:** mesh, materials\
**Created:** [November 8, 2022, 10:55am UTC](https://discourse.threejs.org/t/highlight-mesh-when-multiple-meshes-uses-the-same-material/44459 "2022-11-08T10:55:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [November 8, 2022, 10:55am UTC](https://discourse.threejs.org/t/highlight-mesh-when-multiple-meshes-uses-the-same-material/44459/1 "2022-11-08T10:55:08Z")

</div>

Before, i used yellow color on the material’s emission channel to simulate mesh highlight onm pointer click

now i got a case where there are 4 mesh & all use the same material

how can i highlight a single mesh ?

i can’t use scale to make the mesh big while highlighting as there’s parent child hierarchy in this node tree and the children also get affected

is there some quick way to highlight just the mesh ? vertex color maybe ?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 8, 2022, 11:18am UTC](https://discourse.threejs.org/t/highlight-mesh-when-multiple-meshes-uses-the-same-material/44459/2 "2022-11-08T11:18:15Z")

</div>

outline pass? [Post Processing - Demo](https://pmndrs.github.io/postprocessing/public/demo/#outline)

---

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [November 8, 2022, 11:53am UTC](https://discourse.threejs.org/t/highlight-mesh-when-multiple-meshes-uses-the-same-material/44459/3 "2022-11-08T11:53:31Z")

</div>

oh yeah, outline pass, that will work

is there any other options available ? not using post processing at all right now , want to look at all other available options

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [November 9, 2022, 12:36am UTC](https://discourse.threejs.org/t/highlight-mesh-when-multiple-meshes-uses-the-same-material/44459/4 "2022-11-09T00:36:49Z")

</div>

I think a general solution here would be to keep a separate highlight material around, swap it out when you want to mark something. Vertex color would also work, requires uploading a few bytes per vertex to the GPU so a bit slower than setting a uniform on a material, and assumes you’re not also sharing geometries with another mesh. 😉

---

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [November 14, 2022, 6:21pm UTC](https://discourse.threejs.org/t/highlight-mesh-when-multiple-meshes-uses-the-same-material/44459/5 "2022-11-14T18:21:49Z")

</div>

Hot swapping materials seems like a good plan , i’m guessing the micro stutter will only happen the first time then onwards it’ll be smoooth

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [November 14, 2022, 7:15pm UTC](https://discourse.threejs.org/t/highlight-mesh-when-multiple-meshes-uses-the-same-material/44459/6 "2022-11-14T19:15:14Z")

</div>

Yep! Would also be an option to [precompile the material](https://threejs.org/docs/?q=webglrend#api/en/renderers/WebGLRenderer.compile).

---

<div class="post-metadata">

**Author:** ![jrjdavidson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrjdavidson/32/21784_2.png) [@jrjdavidson](https://discourse.threejs.org/u/jrjdavidson)\
**Post date:** [November 14, 2022, 9:13pm UTC](https://discourse.threejs.org/t/highlight-mesh-when-multiple-meshes-uses-the-same-material/44459/7 "2022-11-14T21:13:08Z")

</div>

When highlighting, I check if the material was used elsewhere. If it is a shared material, I set the highlighted material to material.clone().  
something like this

> if ( isMaterialUsedElsewhere( material ) ) object.material = material.clone();

---

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [November 15, 2022, 6:54am UTC](https://discourse.threejs.org/t/highlight-mesh-when-multiple-meshes-uses-the-same-material/44459/8 "2022-11-15T06:54:33Z")

</div>

Easier options is to just make a yellow meshBasicMaterial or meshStandardMaterial with yellow emission (animate the color/strength for fanciness) and just apply this material when you want to highlight something and restore the original material on exitHighlight/timeout

---

<div class="post-metadata">

**Author:** ![jrjdavidson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrjdavidson/32/21784_2.png) [@jrjdavidson](https://discourse.threejs.org/u/jrjdavidson)\
**Post date:** [November 15, 2022, 8:08pm UTC](https://discourse.threejs.org/t/highlight-mesh-when-multiple-meshes-uses-the-same-material/44459/9 "2022-11-15T20:08:56Z")

</div>

I agree, that is quite an elegant solution I hadn’t thought of. The only benefit I can think of with cloning the material is that is preserves other properties of the material (e.g. texture maps), which you might lose if you created a generic material.