Resize GLInstancedBufferAttribute

examples/test.ts

@@ -1,20 +1,40 @@
-import { Main, PerspectiveCameraAuto } from '@three.ez/main';
-import { DirectionalLight, MeshPhongMaterial, Scene, SphereGeometry } from 'three';
-import { InstancedMesh2 } from '../src/index.js';
+// import { Main, PerspectiveCameraAuto } from '@three.ez/main';
+// import { MeshNormalMaterial, Scene, SphereGeometry } from 'three';
+// import { createTexture_mat4, InstancedMesh2 } from '../src/index.js';
 
-const main = new Main();
+// const count = 2;
+// const worldSize = 10;
 
-const spheres = new InstancedMesh2(main.renderer, 99 * 99, new SphereGeometry(0.4), new MeshPhongMaterial({ color: 'cyan' }));
-spheres.perObjectFrustumCulled = false;
+// const main = new Main(); // init renderer and other stuff
+// const camera = new PerspectiveCameraAuto(70, 0.1, 500).translateZ(10);
+// const scene = new Scene();
 
-spheres.updateInstances((obj, index) => {
-  obj.position.x = index % 99 - 49;
-  obj.position.y = Math.trunc(index / 99) - 49;
-});
+// const spheres = new InstancedMesh2(main.renderer, count, new SphereGeometry(), new MeshNormalMaterial());
+// spheres.createInstances((obj, index) => {
+//   obj.position.randomDirection().multiplyScalar(((Math.random() * 0.99 + 0.01) * worldSize) / 2);
+// });
 
-spheres.on('click', (e) => spheres.setVisibilityAt(e.intersection.instanceId, false));
+// scene.add(spheres);
 
-const camera = new PerspectiveCameraAuto(70).translateZ(5);
-const dirLight = new DirectionalLight().translateZ(5);
-const scene = new Scene().add(spheres, dirLight);
-main.createView({ scene, camera, backgroundColor: 'white' });
+// main.createView({ scene, camera, enabled: false });
+
+// setTimeout(() => {
+//   const newCount = 8;
+
+//   spheres._maxCount = newCount;
+//   spheres.instancesCount = newCount;
+
+//   spheres.instanceIndex.array = new Uint32Array(newCount);
+//   spheres._indexArray = spheres.instanceIndex.array;
+
+//   spheres.visibilityArray = new Array(newCount).fill(true);
+
+//   const kek = createTexture_mat4(newCount); // fix creating only image and not texture
+//   spheres.matricesTexture.image = kek.image;
+//   spheres.matricesTexture.needsUpdate = true;
+//   spheres._matrixArray = kek.image.data as unknown as Float32Array;
+
+//   spheres.createInstances((obj, index) => {
+//     obj.position.randomDirection().multiplyScalar(((Math.random() * 0.99 + 0.01) * worldSize) / 2);
+//   });
+// }, 1000);

package.json

@@ -34,7 +34,8 @@
     "BVH",
     "acceleration",
     "raycasting",
-    "LOD"
+    "LOD",
+    "InstancedMesh2"
   ],
   "scripts": {
     "start": "vite",

src/core/InstancedMesh2.ts

@@ -223,7 +223,7 @@ export class InstancedMesh2<
     material.isInstancedMeshPatched = true;
   }
 
-  public updateInstances(onUpdate: UpdateEntityCallback<Entity<TCustomData>>): void {
+  public updateInstances(onUpdate: UpdateEntityCallback<Entity<TCustomData>>): this {
     const count = this.instancesCount;
     const instances = this.instances;
 
@@ -236,7 +236,7 @@ export class InstancedMesh2<
         instance.updateMatrix();
       }
 
-      return;
+      return this;
     }
 
     const instance = this._instance;
@@ -251,9 +251,11 @@ export class InstancedMesh2<
       onUpdate(instance as Entity<TCustomData>, i);
       instance.updateMatrix();
     }
+
+    return this;
   }
 
-  public createInstances(onInstanceCreation?: UpdateEntityCallback<Entity<TCustomData>>): void {
+  public createInstances(onInstanceCreation?: UpdateEntityCallback<Entity<TCustomData>>): this {
     const count = this._maxCount; // TODO we can create only first N count ?
     const instancesUseEuler = this._instancesUseEuler;
     const instances = this.instances = new Array(count);
@@ -267,6 +269,8 @@ export class InstancedMesh2<
         instance.updateMatrix();
       }
     }
+
+    return this;
   }
 
   public computeBVH(config: BVHParams = {}): void {

src/core/utils/GLInstancedBufferAttribute.ts

@@ -5,6 +5,7 @@ export class GLInstancedBufferAttribute extends GLBufferAttribute {
   public isGLInstancedBufferAttribute = true;
   public meshPerAttribute: number;
   public array: TypedArray;
+  protected _cacheArray: TypedArray;
   /** @internal */ _needsUpdate = false;
 
   constructor(gl: WebGL2RenderingContext, type: GLenum, itemSize: number, elementSize: 1 | 2 | 4, array: TypedArray, meshPerAttribute = 1) {
@@ -13,6 +14,7 @@ export class GLInstancedBufferAttribute extends GLBufferAttribute {
 
     this.meshPerAttribute = meshPerAttribute;
     this.array = array;
+    this._cacheArray = array;
 
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
     gl.bufferData(gl.ARRAY_BUFFER, array, gl.DYNAMIC_DRAW);
@@ -23,12 +25,19 @@ export class GLInstancedBufferAttribute extends GLBufferAttribute {
 
     const gl = renderer.getContext(); // TODO check performance or cache it
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.array, 0, count);
+
+    if (this.array === this._cacheArray) {
+      gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.array, 0, count);
+    } else {
+      gl.bufferData(gl.ARRAY_BUFFER, this.array, gl.DYNAMIC_DRAW);
+      this._cacheArray = this.array;
+    }
 
     this._needsUpdate = false;
   }
 
   public clone(): this {
+    // empty but necessary to avoid exception when clone geometry
     return this;
   }
 }