# Changing visibility of individual instances?

**URL:** <https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496>\
**Category:** Questions\
**Created:** [February 17, 2021, 9:52pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496 "2021-02-17T21:52:17Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![lguminski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lguminski/32/8156_2.png) [@lguminski](https://forum.babylonjs.com/u/lguminski)\
**Post date:** [February 17, 2021, 9:52pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/1 "2021-02-17T21:52:17Z")

</div>

Hello,

I would like to customize visibility of every single instance (`InstancedMesh`).

1. First I tried to set `InstancedMesh.visibility`, but using this API does not have any effect
2. Then I tried to use [custom buffers](https://doc.babylonjs.com/divingDeeper/mesh/copies/instances#custom-buffers) with `registerInstancedBuffer() ` API, but this does not seem to work with scalar values (see [Babylon.js Playground](https://playground.babylonjs.com/#LFXT0L) → `Uncaught TypeError: h.copyToArray is not a function`)

Is there any other way I did not try yet?

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [February 17, 2021, 10:59pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/2 "2021-02-17T22:59:53Z")

</div>

Hi Iguminski,

This is how I would get it to work: [https://playground.babylonjs.com/#LFXT0L#1](https://playground.babylonjs.com/#LFXT0L#1). I hope there is better solution for this.

I need to use PRBCustomMaterial. Then creating a custom attribute called myalpha. Make sure the attribute is passed from Vertex shader to Fragment shader. Then use the custom alpha hook in the PBRCustomMaterial to update the alpha.

```
 material.Fragment_Custom_Alpha(`alpha = vmyalpha.x;`);
```

---

<div class="post-metadata">

**Author:** ![lguminski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lguminski/32/8156_2.png) [@lguminski](https://forum.babylonjs.com/u/lguminski)\
**Post date:** [February 17, 2021, 11:17pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/3 "2021-02-17T23:17:43Z")

</div>

@slin that’s insane! Good but insane 🙂 I could use something like this, but then I would have a custom fragment shader to maintain, instead of what `StandardMaterial` provides out of the box (which is good enough for my use case). This makes me slightly hesitant… But thank you for this. If nobody comes up with something simpler, I will use it.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 18, 2021, 11:28am UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/4 "2021-02-18T11:28:59Z")

</div>

You can use a float as an instance value with a [little trick](https://forum.babylonjs.com/t/how-to-set-custom-attribute-on-shadermaterial-for-use-with-instances-and-clones-at-the-same-time/9448/8):

[https://playground.babylonjs.com/#LFXT0L#2](https://playground.babylonjs.com/#LFXT0L#2)

But that will do you no good because it won’t be used by the standard shader code.

What you can do instead is using the vertex color:

[https://playground.babylonjs.com/#LFXT0L#4](https://playground.babylonjs.com/#LFXT0L#4)

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [February 18, 2021, 7:12pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/5 "2021-02-18T19:12:34Z")

</div>

@Evgeni_Popov

Wow. I didn’t know about this: `copyToArray : (data, offset) => data[offset] = 0.4`

Is it possible to pass instanced attributes that contain more than 4 floats. Like float arrary?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 18, 2021, 7:31pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/6 "2021-02-18T19:31:27Z")

</div>

No, it seems passing an array of floats as attributes does not work. What you can do is using a texture instead and put your data there.

---

<div class="post-metadata">

**Author:** ![lguminski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lguminski/32/8156_2.png) [@lguminski](https://forum.babylonjs.com/u/lguminski)\
**Post date:** [February 18, 2021, 11:30pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/7 "2021-02-18T23:30:55Z")

</div>

> [@Evgeni\_Popov](#):
>
> What you can do instead is using the vertex color:
> 
> [https://playground.babylonjs.com/#LFXT0L#4](https://playground.babylonjs.com/#LFXT0L#4)

@Evgeni_Popov I realised that in my project I am actually instantiating a merged mesh with `MultiMaterial`. After applying your idea of using vertex color to imitate partial visibility, I achieved the effect, but also got some undesirable side effects. I reproduced this in [https://playground.babylonjs.com/#LFXT0L#8](https://playground.babylonjs.com/#LFXT0L#8)

The instance of merged mesh, which consists of a red ball on a green rod, behaves odd when rotating around it. The green rod sometimes overlaps the red sphere.  
 ![visibility_of_instanced_mesh___Babylon_js_Playground](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/c/c80ae34d733561dd6011dd30ca13c71da24733a9.jpeg)

The problem disappears when I comment line 33 out

```
  mesh.hasVertexAlpha = true;

```

but then the transparency effect disappears as well.

This seems to be a known problem (see [post](https://www.html5gamedevs.com/topic/21469-merge-meshes-with-different-color/?do=findComment&comment=122338)), but this prevents me from using this approach. Unless perhaps you know a workaround to this problem? After all, the post comes from 5 years ago.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 19, 2021, 1:02am UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/8 "2021-02-19T01:02:29Z")

</div>

Unfortunately, I don’t think there’s a solution here because all the instances are drawn at once. So you will have either the spheres drawn first then the boxes, or the other way around. For a correct rendering, you would need each object to be drawn separately, something you won’t be able to do with instances (order of drawing with transparency is already a tough problem when no instances are involved).

---

<div class="post-metadata">

**Author:** ![lguminski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lguminski/32/8156_2.png) [@lguminski](https://forum.babylonjs.com/u/lguminski)\
**Post date:** [February 19, 2021, 11:14am UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/9 "2021-02-19T11:14:42Z")

</div>

@Evgeni_Popov that’s too bad. At least I can now understand better the limits of what instances can do and what not. Thank you for that

---

<div class="post-metadata">

**Author:** ![DWork](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@DWork](https://forum.babylonjs.com/u/DWork)\
**Post date:** [January 11, 2022, 5:37pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/10 "2022-01-11T17:37:08Z")

</div>

@Evgeni_Popov Setting transparency is not good enough in my opinion. Can we have a solution make instancedMesh not to be render instead of “isVisible = false” ? This makes we can control single instancedMesh display or not easier

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 11, 2022, 7:27pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/11 "2022-01-11T19:27:25Z")

</div>

I think `InstancedMesh` are already not displayed if `isVisible=false`?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 11, 2022, 9:09pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/12 "2022-01-11T21:09:59Z")

</div>

Correct!

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [February 9, 2022, 3:31pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/13 "2022-02-09T15:31:14Z")

</div>

Hi @DWork just checking in, do you have any further questions 🙂

---

<div class="post-metadata">

**Author:** ![DWork](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@DWork](https://forum.babylonjs.com/u/DWork)\
**Post date:** [February 9, 2022, 3:38pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/14 "2022-02-09T15:38:31Z")

</div>

Hope the InstancedMesh has own property “visibility” 🙂

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [February 9, 2022, 3:47pm UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/15 "2022-02-09T15:47:41Z")

</div>

Yeah, each individual instance has a `isVisible` property: [Instances visibility | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#UI72RT)

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [November 8, 2022, 3:05am UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/16 "2022-11-08T03:05:47Z")

</div>

You cannot set transparency on a single instance of a textured material. It seems invalid to use instancedBuffers.color for materials containing textures?

Take an example:

[https://playground.babylonjs.com/#WGZLGJ#6828](https://playground.babylonjs.com/#WGZLGJ#6828)

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [November 8, 2022, 5:06am UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/17 "2022-11-08T05:06:31Z")

</div>

If you set the instance to have the same parent as the mesh like below then it does work. @Evgeni_Popov would know better why thou, I just remember once he told me that it needed to be that way for instances to work properly, IIRC particularly with glb meshes because the parent has negative scaling? 🙂 EG it also works if you call setParent(null) on the mesh or if you change the root mesh’s z scaling from -1 to1.

> **[Babylon.js Playground](https://playground.babylonjs.com/#WGZLGJ%236829)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [November 8, 2022, 6:11am UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/18 "2022-11-08T06:11:37Z")

</div>

OK Thank you, but I have a few questions to clarify. First, the transparency cannot be changed through instancedBuffers.color. How can we achieve.

```auto
let boomBoxInstance = BoomBox.createInstance('boomBoxInstance');
boomBoxInstance.instancedBuffers.color = new BABYLON.Vector4(1, 1, 1, 0.6);

```

Second, I need to wrap the object into a TransformNode. If a mesh has many child meshes, it is not feasible to use the same parent. They will have separate parents

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [November 8, 2022, 6:23am UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/19 "2022-11-08T06:23:55Z")

</div>

For the second part, you can call setParent(null) on the mesh like below instead of using the same parent for them. But for the first part, IDK why the alpha channel of the color attribute isn’t having any effect. Only the rgb channels are, like below where I tinted it purple after nulling the mesh’s parent…

> **[Babylon.js Playground](https://playground.babylonjs.com/#WGZLGJ%236831)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

EDIT: PS I found the doc section [here](https://doc.babylonjs.com/features/featuresDeepDive/mesh/copies/instances#instancing-a-gltf-object) where it talks about gltf instancing for more info. 🙂

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [November 8, 2022, 6:54am UTC](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496/20 "2022-11-08T06:54:30Z")

</div>

OK, thank you. How can I change the transparency (visibility) of gltf instances?

[Next page](https://forum.babylonjs.com/t/changing-visibility-of-individual-instances/18496.md?page=2)
