WebGPU: Fix wrong instances displayed in custom RTT (#16842)

See
https://forum.babylonjs.com/t/webgpu-displays-wrong-instance-in-rtt-when-triggered-via-actions/59331

The problem is that when instances are rendered in a custom RTT, we need
different **world0**...**world3** vertex buffers for the RTT than for
normal scene rendering, because vertex buffer updates are performed on
the queue timeline. This means that all updates (those we do when
managing the RTT and those we do when rendering the normal scene) are
done before the graphics commands are submitted. Ultimately, the draw
calls for the RTT and normal scene rendering use the same buffers, and
those buffers contain what we last wrote...

This works in WebGL because Angle can detect that in the current frame,
we are updating a buffer already used by a pending graphics command, and
can act accordingly (either allocate a new buffer to copy the updated
data, or reserve unused space in an existing buffer and remap it to a
new vertex buffer under the hood).

We haven't encountered this issue in WebGPU before, probably because we
usually always render the mesh + all its instances in the custom RTT. In
this case, the **world0**...**world3** vertex buffers contain the same
data for the RTT and normal scene rendering.

As for the implementation, I “simply” moved the instance data one level
down: it is now by render pass ID, see
`_InstanceDataStorage.renderPasses`. A number of properties that were
accessible in `_InstanceDataStorage` are now accessible in
`_InstanceDataStorage.renderPasses[renderPassId]`.

To avoid too many changes in WebGL and stay as close as possible to the
old way of working (and also because VAO management was tedious with the
new changes...), we access everything via
`_InstanceDataStorage.renderPasses[0]` (see
`Mesh._getInstanceDataStorage`, we force the `renderPassId` to 0 in
WebGL before accessing `_InstanceDataStorage.renderPasses`).

Author: Popov72

packages/dev/core/src/Meshes/instancedMesh.ts

@@ -684,6 +684,9 @@ declare module "./mesh" {
             vertexBuffers: { [key: string]: Nullable<VertexBuffer> };
             strides: { [key: string]: number };
             vertexArrayObjects?: { [key: string]: WebGLVertexArrayObject };
+            renderPasses?: {
+                [renderPassId: number]: { [kind: string]: Nullable<VertexBuffer> };
+            };
         };
     }
 }
@@ -827,10 +830,10 @@ Mesh.prototype._invalidateInstanceVertexArrayObject = function () {
 };
 
 Mesh.prototype._disposeInstanceSpecificData = function () {
-    if (this._instanceDataStorage.instancesBuffer) {
-        this._instanceDataStorage.instancesBuffer.dispose();
-        this._instanceDataStorage.instancesBuffer = null;
+    for (const renderPassId in this._instanceDataStorage.renderPasses) {
+        this._instanceDataStorage.renderPasses[renderPassId].instancesBuffer?.dispose();
     }
+    this._instanceDataStorage.renderPasses = {};
 
     while (this.instances.length) {
         this.instances[0].dispose();