What is the recommended way to do sprite or mesh batching?

Questions
5

Not sure I understand this question. Opacity is defined on material level.

If a bufferedGeometry had a single material with a texture and the texture had varying levels of transparency, each submesh could have different UVs and would display with different levels of transparency.
Is there a way to set this transparency with a variable rather than UVs like vertex alpha? Maybe I could have a separate alpha map with it’s own UVs? A custom shader might be the way to go.

three.js is not optimized for sprite rendering. The problem is that even if textures share a common image (e.g. a sprite sheet), the engine currently creates for each instance of Texture a WebGLTexture object which can cause really high memory allocation. Next to draw calls, this is the most often performance problem in context of sprite rendering.
However, we are trying to fix this issue. Related PR: WebGLTextures: Avoid unnecessary texture uploads. by Mugen87 · Pull Request #17949 · mrdoob/three.js · GitHub

That’s great you are working on the memory issue, thanks for that, it will be a big help. The performance issue I’ve seen with multiple sprites has been using the same texture instance so for example:

texture = new THREE.Texture(…);

for (i<1000)
sprite = new THREE.Sprite(SpriteMaterial({map:texture}))

I had a quick look at the Pixi renderer code, it looks like they have an automatic batching system:

“This renderer works by automatically managing WebGLBatches”

It seems to build a pool of draw calls. It builds a shader that “colors each vertex based on a “aTextureId” attribute that points to an texture in “uSampler”. This enables the objects with different textures to be drawn in the same draw call.”

It looks like they iterate over the scene and run checks on which geometry/textures can be batched together and then render those batches.

It is most optimal to do that batching on the entire scene but usually there are just a few heavy objects that need rendered. I think I’ll start by making a wrapper around a bufferedGeometry and update the geometry/UVs. Maybe use a custom shader to be able to use multiple textures and alpha values.