# BatchedMesh set per-instance opacity

**URL:** <https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170>\
**Category:** Questions\
**Tags:** batchedmesh\
**Created:** [April 16, 2024, 8:15pm UTC](https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170 "2024-04-16T20:15:04Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![kikedao](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kikedao/32/26038_2.png) [@kikedao](https://discourse.threejs.org/u/kikedao)\
**Post date:** [April 16, 2024, 8:15pm UTC](https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170/1 "2024-04-16T20:15:04Z")

</div>

Hi!

I really need to be able to animate the opacity of each instance (geometry) in a `BatchedMesh` with thousands of instances.

I know how to do that using `InstancedMesh` and an `InstancedBufferAttribute` with no problem and with perfect performance even when animating all the instances at the same time, but now I need to do it using `BatchedMesh` as each instance geometry is different.

How could I do that? Thx!

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [April 16, 2024, 8:33pm UTC](https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170/2 "2024-04-16T20:33:18Z")

</div>

I’m not exactly sure of the details with batchedmesh, but I know that the color attribute by default is just RGB but you can reallocate it to a 4 element RGBA buffer, and then you have alpha (opacity) per instance

---

<div class="post-metadata">

**Author:** ![kikedao](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kikedao/32/26038_2.png) [@kikedao](https://discourse.threejs.org/u/kikedao)\
**Post date:** [April 16, 2024, 10:57pm UTC](https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170/3 "2024-04-16T22:57:14Z")

</div>

Yeah, I do something similar with `InstancedMesh`, though I don’t reallocate it from 3 to 4 components buffer but I just create an additional buffer just for the opacity value for convinience.  
The problem is `BatchedMesh` doesn’t even have a built-in color buffer to start with as far as I know.

---

<div class="post-metadata">

**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Post date:** [April 17, 2024, 1:23am UTC](https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170/4 "2024-04-17T01:23:23Z")

</div>

Yeah unfortunately supporting per-instance parameters is a bit more complicated with BatchedMesh due to the underlying functions being used. The fields either have to be specified for every vertex in each geometry or the parameters need to be written to a texture so they can be sampled. I’ve put together a demonstration here showing how a texture can be used to specify per-object material parameters but it’s not an officially supported extension or part of three.js:

> **[GitHub - gkjohnson/batched-material-properties-demo: Demonstration of...](https://github.com/gkjohnson/batched-material-properties-demo)**
>
> Demonstration of rendering three.js' BatchedMesh with different material properties in one draw call. - gkjohnson/batched-material-properties-demo

---

<div class="post-metadata">

**Author:** ![kikedao](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kikedao/32/26038_2.png) [@kikedao](https://discourse.threejs.org/u/kikedao)\
**Post date:** [April 17, 2024, 8:48am UTC](https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170/5 "2024-04-17T08:48:57Z")

</div>

Thanks a lot @gkjohnson , I think your demo and explanation put me in the right track.  
I have to investigate more but I see that `BatchedMesh` uses a texture for the instances positions that is then used in the `setMatrixAt()` method.  
I may try to replicate the same for opacity and with a bit of luck propose a PR to include it in the library.  
I will come back to this thread with my conclusions.

Thx a lot!

---

<div class="post-metadata">

**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Post date:** [April 17, 2024, 2:38pm UTC](https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170/6 "2024-04-17T14:38:37Z")

</div>

> I may try to replicate the same for opacity and with a bit of luck propose a PR to include it in the library.

My feeling is that there should be some kind of generalized approach to this in three.js. Node materials _should_ make this easier. It doesn’t seem viable to add support for every material property one by one as it’s needed.

Making a prototype or adding to three/examples to show how it would work might be a good way to start. This is how BatchedMesh was added.

---

<div class="post-metadata">

**Author:** ![kikedao](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kikedao/32/26038_2.png) [@kikedao](https://discourse.threejs.org/u/kikedao)\
**Post date:** [April 17, 2024, 10:14pm UTC](https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170/7 "2024-04-17T22:14:51Z")

</div>

I really fell down the rabbit hole and I ended up trying to modify the library to support it…

And I still can’t believe it but it works, and pretty well I think!

Here is the PR where you can see a little video of it working:

> <https://github.com/mrdoob/three.js/pull/28151>
>
> \*\*Description\*\*
> 
> This PR adds per-instance \`setOpacity\` and \`getOpacity\` to \`B…atchedMesh\`.
> 
> I created this PR inspired by these two threads from the forum:
> https://discourse.threejs.org/t/batchedmesh-per-geometry-opacity/61284
> https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170
> 
> I tested it in the project I'm working on and it seems to work wonders with absolute perfect performance.
> 
> If you are fine with this implementing \`setColorAt\` shouldn't be too difficult, and with that the \`InstancedMesh\` and \`BatchedMesh\` APIs would finally converge :).
> 
> Here is a video capture of it animating individually the opacity of all instances in the \`BatchedMesh\` with the help of gsap (the links you see in the graph are tube geometries all used in the same \`BatchedMesh\`):
> 
> https://github.com/mrdoob/three.js/assets/1637356/20784690-be7e-46b2-81f1-33a58a4d5f4d

@gkjohnson I understand your concerns, but in my opinion this is something that `BatchedMesh` should support out of the box, just as `InstancedMesh` has the `setColorAt` method (and it doesn’t have `setOpacityAt` just because `InstancedMesh` can’t do correct sorting, but `BatchedMesh` in theory does).

If the PR is approved I could also add a `setColorAt` method to `BatchedMesh` and then `InstancedMesh` and `BatchedMes`h would finally have similar APIs as far as possible.

---

<div class="post-metadata">

**Author:** ![siddancha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/siddancha/32/56912_2.png) [@siddancha](https://discourse.threejs.org/u/siddancha)\
**Post date:** [February 18, 2025, 9:06pm UTC](https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170/8 "2025-02-18T21:06:07Z")

</div>

@kikedao How did you set per-instance opacity in InstancedMesh? My understanding was that it is currently not possible.

---

<div class="post-metadata">

**Author:** ![agargaro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/agargaro/32/35529_2.png) [@agargaro](https://discourse.threejs.org/u/agargaro)\
**Post date:** [February 19, 2025, 9:00pm UTC](https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170/9 "2025-02-19T21:00:20Z")

</div>

Hi, if you need opacity per instance with InstancedMesh, you can use this library

> **[GitHub - agargaro/instanced-mesh: Enhanced InstancedMesh with frustum culling, fast...](https://github.com/agargaro/instanced-mesh)**
>
> Enhanced InstancedMesh with frustum culling, fast raycasting (using BVH), sorting, visibility management, LOD and more.

---

<div class="post-metadata">

**Author:** ![siddancha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/siddancha/32/56912_2.png) [@siddancha](https://discourse.threejs.org/u/siddancha)\
**Post date:** [February 21, 2025, 5:57am UTC](https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170/10 "2025-02-21T05:57:34Z")

</div>

Thanks @agargaro! I have one question: does sorting need to be enabled to set the visibility of a subset of instances to false?

---

<div class="post-metadata">

**Author:** ![agargaro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/agargaro/32/35529_2.png) [@agargaro](https://discourse.threejs.org/u/agargaro)\
**Post date:** [February 28, 2025, 11:40am UTC](https://discourse.threejs.org/t/batchedmesh-set-per-instance-opacity/64170/11 "2025-02-28T11:40:57Z")

</div>

No, but it is useful when working with transparent objects.