feat(model): add support for color animations

package.json

@@ -36,7 +36,7 @@
   ],
   "dependencies": {
     "@tweenjs/tween.js": "^23.1.1",
-    "@wowserhq/format": "^0.20.0"
+    "@wowserhq/format": "^0.21.0"
   },
   "peerDependencies": {
     "three": "^0.160.0"

src/lib/model/ModelManager.ts

@@ -18,6 +18,7 @@ type ModelResources = {
   animator: ModelAnimator;
   textureWeightCount: number;
   textureTransformCount: number;
+  colorCount: number;
 };
 
 type ModelManagerOptions = {
@@ -90,6 +91,7 @@ class ModelManager {
       animator,
       textureWeightCount: spec.textureWeights.length,
       textureTransformCount: spec.textureTransforms.length,
+      colorCount: spec.colors.length,
     };
 
     this.#loaded.set(refId, resources);
@@ -167,6 +169,7 @@ class ModelManager {
     );
     const textureWeightIndex = spec.textureWeightIndex;
     const textureTransformIndices = spec.textureTransformIndices;
+    const colorIndex = spec.colorIndex;
     const uniforms = { ...this.#sceneLight.uniforms };
 
     return new ModelMaterial(
@@ -175,6 +178,7 @@ class ModelManager {
       textures,
       textureWeightIndex,
       textureTransformIndices,
+      colorIndex,
       uniforms,
       spec.blend,
       spec.flags,
@@ -203,6 +207,7 @@ class ModelManager {
       resources.animator,
       resources.textureWeightCount,
       resources.textureTransformCount,
+      resources.colorCount,
     );
 
     mesh.name = resources.name;
@@ -247,6 +252,17 @@ class ModelManager {
       );
     }
 
+    for (const [index, color] of spec.colors.entries()) {
+      animator.registerTrack(`.colors[${index}].color`, color.colorTrack, THREE.ColorKeyframeTrack);
+
+      animator.registerTrack(
+        `.colors[${index}].alpha`,
+        color.alphaTrack,
+        THREE.NumberKeyframeTrack,
+        (value: number) => value / 0x7fff,
+      );
+    }
+
     return animator;
   }
 }

src/lib/model/ModelMaterial.ts

@@ -15,6 +15,8 @@ class ModelMaterial extends THREE.RawShaderMaterial {
   #textureTransformIndices: number[];
   #textureTransforms: THREE.Matrix4[];
 
+  #colorIndex: number;
+
   #blend: M2_MATERIAL_BLEND;
 
   #materialParams: THREE.Vector4;
@@ -28,6 +30,7 @@ class ModelMaterial extends THREE.RawShaderMaterial {
     textures: THREE.Texture[],
     textureWeightIndex: number,
     textureTransformIndices: number[],
+    colorIndex: number,
     uniforms: Record<string, THREE.IUniform> = {},
     blend = DEFAULT_BLEND,
     flags = DEFAULT_FLAGS,
@@ -38,6 +41,8 @@ class ModelMaterial extends THREE.RawShaderMaterial {
     this.#textureTransformIndices = textureTransformIndices;
     this.#textureTransforms = [new THREE.Matrix4(), new THREE.Matrix4()];
 
+    this.#colorIndex = colorIndex;
+
     this.#blend = blend;
 
     this.#materialParams = new THREE.Vector4(0.0, 0.0, 0.0, 0.0);
@@ -107,6 +112,10 @@ class ModelMaterial extends THREE.RawShaderMaterial {
     return this.#materialParams.y;
   }
 
+  get colorIndex() {
+    return this.#colorIndex;
+  }
+
   get fogged() {
     return this.#materialParams.w;
   }

src/lib/model/ModelMesh.ts

@@ -8,6 +8,13 @@ type ModelTextureTransform = {
   scaling: THREE.Vector3;
 };
 
+type ModelColor = {
+  color: THREE.Color;
+  alpha: number;
+};
+
+const _color = new THREE.Color();
+
 class ModelMesh extends THREE.Mesh {
   #animator: ModelAnimator;
   #animationActions: Set<THREE.AnimationAction> = new Set();
@@ -18,13 +25,15 @@ class ModelMesh extends THREE.Mesh {
 
   textureWeights: number[] = [];
   textureTransforms: ModelTextureTransform[] = [];
+  colors: ModelColor[] = [];
 
   constructor(
     geometry: THREE.BufferGeometry,
     materials: THREE.Material[],
     animator: ModelAnimator,
     textureWeightCount: number,
     textureTransformCount: number,
+    colorCount: number,
   ) {
     super(geometry, materials);
 
@@ -49,6 +58,13 @@ class ModelMesh extends THREE.Mesh {
       });
     }
 
+    for (let i = 0; i < colorCount; i++) {
+      this.colors.push({
+        color: new THREE.Color(1.0, 1.0, 1.0),
+        alpha: 1.0,
+      });
+    }
+
     // Animations
 
     // Automatically play all loops
@@ -76,10 +92,18 @@ class ModelMesh extends THREE.Mesh {
     material: ModelMaterial,
     group: THREE.Group,
   ) {
+    const color = this.colors[material.colorIndex];
+
     const textureWeight = this.textureWeights[material.textureWeightIndex] ?? 1.0;
-    material.alpha = this.#alpha * textureWeight;
+    const colorAlpha = color?.alpha ?? 1.0;
+    material.alpha = this.#alpha * textureWeight * colorAlpha;
 
-    material.setDiffuseColor(this.#diffuseColor);
+    const colorColor = color?.color;
+    _color.copy(this.#diffuseColor);
+    if (color) {
+      _color.multiply(colorColor);
+    }
+    material.setDiffuseColor(_color);
     material.setEmissiveColor(this.#emissiveColor);
 
     for (let i = 0; i < material.textureTransformIndices.length; i++) {

src/lib/model/loader/ModelLoaderWorker.ts

@@ -33,6 +33,7 @@ class ModelLoaderWorker extends SceneWorker {
     const loops = model.loops;
     const textureWeights = model.textureWeights;
     const textureTransforms = model.textureTransforms;
+    const colors = model.colors;
 
     const spec: ModelSpec = {
       name: model.name,
@@ -42,6 +43,7 @@ class ModelLoaderWorker extends SceneWorker {
       sequences,
       textureWeights,
       textureTransforms,
+      colors,
     };
 
     const transfer = [spec.geometry.vertexBuffer, spec.geometry.indexBuffer];
@@ -106,6 +108,7 @@ class ModelLoaderWorker extends SceneWorker {
       textures,
       textureWeightIndex: batch.textureWeightIndex,
       textureTransformIndices: batch.textureTransformIndices,
+      colorIndex: batch.colorIndex,
       vertexShader: batch.vertexShader,
       fragmentShader: batch.fragmentShader,
     };

src/lib/model/loader/types.ts

@@ -3,6 +3,7 @@ import {
   M2_MATERIAL_BLEND,
   M2_TEXTURE_COMPONENT,
   M2_VERTEX_SHADER,
+  M2Color,
   M2TextureTransform,
   M2TextureWeight,
 } from '@wowserhq/format';
@@ -18,6 +19,7 @@ type MaterialSpec = {
   textures: TextureSpec[];
   textureWeightIndex: number;
   textureTransformIndices: number[];
+  colorIndex: number;
   vertexShader: M2_VERTEX_SHADER;
   fragmentShader: M2_FRAGMENT_SHADER;
   blend: M2_MATERIAL_BLEND;
@@ -56,6 +58,7 @@ type ModelSpec = {
   loops: Uint32Array;
   textureWeights: M2TextureWeight[];
   textureTransforms: M2TextureTransform[];
+  colors: M2Color[];
 };
 
 export { ModelSpec, MaterialSpec, TextureSpec, SequenceSpec };