WebGLRenderer: Allow InstancedMesh provide a unique ID for WebGLBindingStates.

[OndrejSpanel]

Fixed #32552.

Description

Allow meshes to provide a specific ID for WebGLBindingState cache, and implement this for InstancedMesh.

This makes sure two different InstancedMesh which share the same geometry get a different binding state, caching VAO for them, including their custom attributes like instanceMatrix or instanceColor.

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	355.17 84.44	355.64 84.53	+467 B +90 B
WebGPU	618.32 171.7	618.32 171.7	+0 B +0 B
WebGPU Nodes	616.92 171.45	616.92 171.45	+0 B +0 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	487.34 119.31	487.81 119.41	+467 B +96 B
WebGPU	688.95 187.13	688.95 187.13	+0 B +0 B
WebGPU Nodes	638.79 174.32	638.79 174.32	+0 B +0 B

[Mugen87]

For other reviewers: The effective changes of this PR are quite compact. It's easier to see by removing changes to the formatting from the diff: https://github.com/mrdoob/three.js/pull/32556/files?w=1

[OndrejSpanel]

It's easier to see by removing changes to the formatting from the diff

I could try removing them, if I knew how.

... oh wait, the changes are mostly caused by changed nesting level. No way to remove that, I guess.

[OndrejSpanel]

I think there is one more thing to be checked / considered. When disposing InstancedMesh, corresponding bingings states need to be removed as well. Marking as draft before this is clarified, as not handling this properly could cause resource leaks.

[OndrejSpanel]

As I am testing this in the game, I realized I need a slightly different id. I have different InstancedMesh instances which share the same instanceMatrix / instanceColor. This is done because I create a copy of the scene for shadow map rendering and to render env. reflection map, and the copy is as shallow as possible (meshes sharing geometries and attributes with the main scene).

Instead of checking for InstancedMesh, I need to check for instanceMatrix BufferAtrribute.id (and perhaps even instanceColor, although in my case those two are always paired and checking one of them is enough).

Without this I am unable to implement the proper cleanup.

I think the nicest way how to get this working would be to go back to the original idea of using getBindingStateId and implementing it as getBindingStateId = this.instanceMatrix.id, but if you prefer, I can still use the isInstancedMesh test and access the property (which I have committed now).

[OndrejSpanel]

This is done because I create a copy of the scene for shadow map rendering and to render env. reflection map, and the copy is as shallow as possible (meshes sharing geometries and attributes with the main scene).

Turns out this is not true. Shadow and env. scenes have each their own instancer and create different instance chains. Original design should be fine, at least for my use case.

@Mugen87 However if you prefer the new version, I am fine with that as well, both should work equally well for me.

That said, I experience some resource leaks with current implementation in my game and I will not mark this as Ready for review until I solve it.

[OndrejSpanel]

That said, I experience some resource leaks with current implementation in my game and I will not mark this as Ready for review until I solve it.

The issue was on the application side, shadow scene was missing dispose of instanced meshes.

I have different InstancedMesh instances which share the same instanceMatrix / instanceColor

If anyone was tempted to do this, I would warn against it. It is hard to get it right, as on any mesh disposal its atributes are destroyed (gl.deleteBuffer), shared or not, making cached binding states of any other meshes sharing the same attribute invalid.

[Mugen87]

Tested the disposal with webgl_instancing_dynamic and the result looks as expected 👍 .