chore(model): remove unnecessary use of THREE.SkinnedMesh

src/lib/model/Model.ts

@@ -4,14 +4,13 @@ import ModelAnimator from './ModelAnimator.js';
 import ModelAnimation from './ModelAnimation.js';
 import { getSizeCategory } from '../world.js';
 
-class Model extends THREE.Object3D {
+class Model extends THREE.Mesh {
   animation: ModelAnimation;
 
   diffuseColor: THREE.Color;
   emissiveColor: THREE.Color;
   alpha = 1.0;
 
-  #mesh: THREE.Mesh;
   #skinned: boolean;
 
   #boundingSphereWorld = new THREE.Sphere();
@@ -21,31 +20,25 @@ class Model extends THREE.Object3D {
 
   constructor(
     geometry: THREE.BufferGeometry,
-    materials: THREE.Material[],
+    materials: ModelMaterial[],
     animator: ModelAnimator,
     skinned: boolean,
   ) {
-    super();
+    super(geometry, materials);
 
-    this.#skinned = skinned;
-
-    // Avoid skinning overhead when model does not make use of bone animations
-    if (skinned) {
-      this.#mesh = new THREE.SkinnedMesh(geometry, materials);
-      (this.#mesh as THREE.SkinnedMesh).boundingSphere = this.boundingSphere;
-    } else {
-      this.#mesh = new THREE.Mesh(geometry, materials);
-    }
+    // Model culling is handled by scene managers
+    this.frustumCulled = false;
 
-    this.#mesh.frustumCulled = false;
-    this.#mesh.onBeforeRender = this.#onBeforeRender.bind(this);
-    this.add(this.#mesh);
+    this.#skinned = skinned;
 
     // Every model instance gets a unique animation state managed by a single animator
     this.animation = animator.createAnimation(this);
 
-    if (skinned) {
-      (this.#mesh as THREE.SkinnedMesh).skeleton = this.animation.skeleton as any;
+    // If skinned, make skeleton available to materials for bone texture uploads
+    if (this.#skinned) {
+      for (const material of materials) {
+        material.skeleton = this.animation.skeleton;
+      }
     }
 
     this.diffuseColor = new THREE.Color(1.0, 1.0, 1.0);
@@ -54,21 +47,17 @@ class Model extends THREE.Object3D {
   }
 
   get boundingBox() {
-    return this.#mesh.geometry.boundingBox;
+    return this.geometry.boundingBox;
   }
 
   get boundingSphere() {
-    return this.#mesh.geometry.boundingSphere;
+    return this.geometry.boundingSphere;
   }
 
   get boundingSphereWorld() {
     return this.#boundingSphereWorld;
   }
 
-  get mesh() {
-    return this.#mesh;
-  }
-
   get size() {
     return this.#size;
   }
@@ -123,7 +112,7 @@ class Model extends THREE.Object3D {
     this.#sizeCategory = getSizeCategory(this.#size);
   }
 
-  #onBeforeRender(
+  onBeforeRender(
     renderer: THREE.WebGLRenderer,
     scene: THREE.Scene,
     camera: THREE.Camera,

src/lib/model/ModelAnimation.ts

@@ -108,7 +108,7 @@ class ModelAnimation extends THREE.Object3D {
       bones.push(bone);
     }
 
-    this.skeleton = new ModelSkeleton(this.#model.mesh, bones);
+    this.skeleton = new ModelSkeleton(this.#model, bones);
   }
 
   #autoplay() {

src/lib/model/ModelMaterial.ts

@@ -6,6 +6,7 @@ import {
 } from './const.js';
 import { THREE_BLEND_STATE } from '../blend.js';
 import Model from './Model.js';
+import ModelSkeleton from './ModelSkeleton.js';
 
 const DEFAULT_BLEND: M2_MATERIAL_BLEND = M2_MATERIAL_BLEND.BLEND_OPAQUE;
 const DEFAULT_FLAGS: number = 0x0;
@@ -148,6 +149,10 @@ class ModelMaterial extends THREE.RawShaderMaterial {
     this.#materialParams.setZ(lit);
   }
 
+  set skeleton(skeleton: ModelSkeleton) {
+    this.uniforms.boneTexture = { value: skeleton.boneTexture };
+  }
+
   prepareMaterial(model: Model) {
     const { animation } = model;
 

src/lib/model/ModelSkeleton.ts

@@ -29,10 +29,6 @@ class ModelSkeleton {
     }
   }
 
-  update() {
-    // noop
-  }
-
   updateBones(camera: THREE.Camera) {
     // Ensure model view matrix is synchronized
     this.#root.modelViewMatrix.multiplyMatrices(camera.matrixWorldInverse, this.#root.matrixWorld);