InstancedMesh: Add support for morph targets. (#817)

* Add setMorphAt

* Update three.js

* Add examples

* Update

* Delete examples

* Update patch

examples-testing/changes.patch

@@ -3056,7 +3056,7 @@ index d248a0d..16a111b 100644
      //
 
 diff --git a/examples-testing/examples/webgl_camera.ts b/examples-testing/examples/webgl_camera.ts
-index a1d44b9..09152d6 100644
+index d78fbec..6b84a2c 100644
 --- a/examples-testing/examples/webgl_camera.ts
 +++ b/examples-testing/examples/webgl_camera.ts
 @@ -6,11 +6,11 @@ let SCREEN_WIDTH = window.innerWidth;
@@ -3076,7 +3076,7 @@ index a1d44b9..09152d6 100644
  const frustumSize = 600;
 
  init();
-@@ -123,7 +123,7 @@ function init() {
+@@ -122,7 +122,7 @@ function init() {
 
  //
 
@@ -5500,6 +5500,43 @@ index 8c94528..b0e453e 100644
  const amount = parseInt(window.location.search.slice(1)) || 10;
  const count = Math.pow(amount, 3);
  const dummy = new THREE.Object3D();
+diff --git a/examples-testing/examples/webgl_instancing_morph.ts b/examples-testing/examples/webgl_instancing_morph.ts
+index 7a4245c..6eecf7c 100644
+--- a/examples-testing/examples/webgl_instancing_morph.ts
++++ b/examples-testing/examples/webgl_instancing_morph.ts
+@@ -4,7 +4,13 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+ import Stats from 'three/addons/libs/stats.module.js';
+
+-let camera, scene, renderer, stats, mesh, mixer, dummy;
++let camera: THREE.PerspectiveCamera,
++    scene: THREE.Scene,
++    renderer: THREE.WebGLRenderer,
++    stats: Stats,
++    mesh: THREE.InstancedMesh,
++    mixer: THREE.AnimationMixer,
++    dummy: THREE.Mesh;
+
+ const offset = 5000;
+
+@@ -64,7 +70,7 @@ function init() {
+     const loader = new GLTFLoader();
+
+     loader.load('models/gltf/Horse.glb', function (glb) {
+-        dummy = glb.scene.children[0];
++        dummy = glb.scene.children[0] as THREE.Mesh;
+
+         mesh = new THREE.InstancedMesh(dummy.geometry, dummy.material, 1024);
+
+@@ -142,7 +148,7 @@ function render() {
+             mesh.setMorphAt(i, dummy);
+         }
+
+-        mesh.morphTexture.needsUpdate = true;
++        mesh.morphTexture!.needsUpdate = true;
+     }
+
+     renderer.render(scene, camera);
 diff --git a/examples-testing/examples/webgl_instancing_performance.ts b/examples-testing/examples/webgl_instancing_performance.ts
 index 62ed935..b34abd6 100644
 --- a/examples-testing/examples/webgl_instancing_performance.ts

examples-testing/index.js

@@ -49,6 +49,7 @@ const files = {
         'webgl_geometry_text_shapes',
         'webgl_geometry_text_stroke',
         'webgl_helpers',
+        'webgl_instancing_morph',
         'webgl_instancing_dynamic',
         'webgl_instancing_performance',
         'webgl_instancing_raycast',

types/three/src/objects/InstancedMesh.d.ts

@@ -6,6 +6,7 @@ import { Box3 } from "../math/Box3.js";
 import { Color } from "../math/Color.js";
 import { Matrix4 } from "../math/Matrix4.js";
 import { Sphere } from "../math/Sphere.js";
+import { DataTexture } from "../textures/DataTexture.js";
 import { Mesh } from "./Mesh.js";
 
 export interface InstancedMeshEventMap extends Object3DEventMap {
@@ -82,6 +83,8 @@ export class InstancedMesh<
      */
     instanceMatrix: InstancedBufferAttribute;
 
+    morphTexture: DataTexture | null;
+
     /**
      * Computes bounding box of the all instances, updating {@link boundingBox | .boundingBox} attribute.
      * @remarks Bounding boxes aren't computed by default. They need to be explicitly computed, otherwise they are `null`.
@@ -126,6 +129,8 @@ export class InstancedMesh<
      */
     setMatrixAt(index: number, matrix: Matrix4): void;
 
+    setMorphAt(index: number, dummy: Mesh): void;
+
     /**
      * No effect in {@link InstancedMesh}.
      * @ignore

types/three/src/renderers/webgl/WebGLPrograms.d.ts

@@ -43,6 +43,7 @@ export interface WebGLProgramParameters {
     batching: boolean;
     instancing: boolean;
     instancingColor: boolean;
+    instancingMorph: boolean;
 
     supportsVertexTextures: boolean;
     outputColorSpace: ColorSpace;