BatchedMesh set per-instance opacity

Questions
1

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!

2

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

3

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.

4

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:

2 Likes
5

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!

1 Like
6

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.

1 Like
7

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:

@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 BatchedMesh would finally have similar APIs as far as possible.