Blend shape animation

packages/core/src/Transform.ts

@@ -2,6 +2,7 @@ import { MathUtil, Matrix, Matrix3x3, Quaternion, Vector3 } from "@oasis-engine/
 import { deepClone, ignoreClone } from "./clone/CloneManager";
 import { Component } from "./Component";
 import { UpdateFlag } from "./UpdateFlag";
+import { UpdateFlagManager } from "./UpdateFlagManager";
 
 /**
  * Used to implement transformation related functions.
@@ -38,7 +39,7 @@ export class Transform extends Component {
   @deepClone
   private _worldMatrix: Matrix = new Matrix();
   @ignoreClone
-  private _changeFlags: UpdateFlag[] = [];
+  private _updateFlagManager: UpdateFlagManager = new UpdateFlagManager();
   @ignoreClone
   private _isParentDirty: boolean = true;
   @ignoreClone
@@ -505,7 +506,7 @@ export class Transform extends Component {
    * @returns Change flag
    */
   registerWorldChangeFlag(): UpdateFlag {
-    return new UpdateFlag(this._changeFlags);
+    return this._updateFlagManager.register();
   }
 
   /**
@@ -660,10 +661,7 @@ export class Transform extends Component {
 
   private _worldAssociatedChange(type: number): void {
     this._dirtyFlag |= type;
-    const len = this._changeFlags.length;
-    for (let i = len - 1; i >= 0; i--) {
-      this._changeFlags[i].flag = true;
-    }
+    this._updateFlagManager.distribute();
   }
 
   private _rotateByQuat(rotateQuat: Quaternion, relativeToLocal: boolean) {

packages/core/src/UpdateFlagManager.ts

@@ -0,0 +1,19 @@
+import { UpdateFlag } from "./UpdateFlag";
+
+/**
+ * @internal
+ */
+export class UpdateFlagManager {
+  private _updateFlags: UpdateFlag[] = [];
+
+  register(): UpdateFlag {
+    return new UpdateFlag(this._updateFlags);
+  }
+
+  distribute(): void {
+    const updateFlags = this._updateFlags;
+    for (let i = updateFlags.length - 1; i >= 0; i--) {
+      updateFlags[i].flag = true;
+    }
+  }
+}

packages/core/src/animation/AnimationClip.ts

@@ -77,6 +77,10 @@ export class AnimationClip extends Motion {
       case "scale":
         property = AnimationProperty.Scale;
         break;
+      case "blendShapeWeights":
+        property = AnimationProperty.BlendShapeWeights;
+        break;
+      default:
     }
     const curveData: AnimationClipCurveData<Component> = {
       relativePath,

packages/core/src/animation/AnimationCurve.ts

@@ -2,6 +2,7 @@ import { Quaternion, Vector2, Vector3, Vector4 } from "@oasis-engine/math";
 import { InterpolableValueType } from "./enums/InterpolableValueType";
 import { InterpolationType } from "./enums/InterpolationType";
 import {
+  FloatArrayKeyframe,
   FloatKeyframe,
   InterpolableValue,
   Keyframe,
@@ -48,6 +49,7 @@ export class AnimationCurve {
     }
 
     if (!this._valueSize) {
+      //CM: It's not reasonable to write here.
       if (key instanceof FloatKeyframe) {
         this._valueSize = 1;
         this._valueType = InterpolableValueType.Float;
@@ -73,6 +75,13 @@ export class AnimationCurve {
         this._valueType = InterpolableValueType.Quaternion;
         this._currentValue = new Quaternion();
       }
+
+      if (key instanceof FloatArrayKeyframe) {
+        const size = key.value.length;
+        this._valueSize = size;
+        this._valueType = InterpolableValueType.FloatArray;
+        this._currentValue = new Float32Array(size);
+      }
     }
     this.keys.sort((a, b) => a.time - b.time);
   }
@@ -81,7 +90,7 @@ export class AnimationCurve {
    * Evaluate the curve at time.
    * @param time - The time within the curve you want to evaluate
    */
-  evaluate(time: number): Readonly<InterpolableValue> {
+  evaluate(time: number): InterpolableValue {
     const { keys, interpolation } = this;
     const { length } = this.keys;
 
@@ -163,6 +172,14 @@ export class AnimationCurve {
     switch (_valueType) {
       case InterpolableValueType.Float:
         return <number>keys[frameIndex].value * (1 - t) + <number>keys[nextFrameIndex].value * t;
+      case InterpolableValueType.FloatArray:
+        const curValue = this._currentValue;
+        const value = <Float32Array>keys[frameIndex].value;
+        const nextValue = <Float32Array>keys[frameIndex].value;
+        for (let i = 0, n = value.length; i < n; i++) {
+          curValue[i] = value[i] * (1 - t) + nextValue[i] * t;
+        }
+        return curValue;
       case InterpolableValueType.Vector2:
         Vector2.lerp(
           <Vector2>keys[frameIndex].value,

packages/core/src/animation/Animator.ts

@@ -2,6 +2,7 @@ import { Quaternion, Vector3 } from "@oasis-engine/math";
 import { ignoreClone } from "../clone/CloneManager";
 import { Component } from "../Component";
 import { Entity } from "../Entity";
+import { SkinnedMeshRenderer } from "../mesh";
 import { ClassPool } from "../RenderPipeline/ClassPool";
 import { Transform } from "../Transform";
 import { AnimationCurve } from "./AnimationCurve";
@@ -559,10 +560,10 @@ export class Animator extends Component {
     }
   }
 
-  private _applyClipValue(owener: AnimationCurveOwner, value: InterpolableValue, weight: number): void {
-    if (owener.type === Transform) {
-      const transform = owener.target.transform;
-      switch (owener.property) {
+  private _applyClipValue(owner: AnimationCurveOwner, value: InterpolableValue, weight: number): void {
+    if (owner.type === Transform) {
+      const transform = owner.target.transform;
+      switch (owner.property) {
         case AnimationProperty.Position:
           if (weight === 1.0) {
             transform.position = <Vector3>value;
@@ -591,6 +592,12 @@ export class Animator extends Component {
           }
           break;
       }
+    } else if (owner.type === SkinnedMeshRenderer) {
+      switch (owner.property) {
+        case AnimationProperty.BlendShapeWeights:
+          (<SkinnedMeshRenderer>owner.component).blendShapeWeights = <Float32Array>value;
+          break;
+      }
     }
   }
 

packages/core/src/animation/KeyFrame.ts

@@ -1,6 +1,6 @@
 import { Vector2, Vector3, Vector4, Quaternion } from "@oasis-engine/math";
 
-export type InterpolableValue = number | Vector2 | Vector3 | Vector4 | Quaternion;
+export type InterpolableValue = number | Vector2 | Vector3 | Vector4 | Quaternion | Float32Array;
 
 /**
  * A single keyframe that can be injected into an animation curve.
@@ -13,7 +13,7 @@ export interface Keyframe {
   /** The time of the keyframe. */
   time: number;
   /** The value of the curve at keyframe. */
-  value: number | Vector2 | Vector3 | Vector4 | Quaternion;
+  value: number | Vector2 | Vector3 | Vector4 | Quaternion | Float32Array;
 }
 
 export class FloatKeyframe implements Keyframe {
@@ -26,6 +26,18 @@ export class FloatKeyframe implements Keyframe {
   /** The value of the curve at keyframe. */
   value: number;
 }
+
+export class FloatArrayKeyframe implements Keyframe {
+  /** Sets the incoming tangent for this key. The incoming tangent affects the slope of the curve from the previous key to this key. */
+  inTangent?: number;
+  /** Sets the outgoing tangent for this key. The outgoing tangent affects the slope of the curve from this key to the next key. */
+  outTangent?: number;
+  /** The time of the keyframe. */
+  time: number;
+  /** The value of the curve at keyframe. */
+  value: Float32Array;
+}
+
 export class Vector2Keyframe implements Keyframe {
   /** Sets the incoming tangent for this key. The incoming tangent affects the slope of the curve from the previous key to this key. */
   inTangent?: Vector2;

packages/core/src/animation/enums/AnimationProperty.ts

@@ -1,5 +1,6 @@
 export enum AnimationProperty {
   Position,
   Rotation,
-  Scale
+  Scale,
+  BlendShapeWeights
 }

packages/core/src/animation/enums/InterpolableValueType.ts

@@ -1,5 +1,6 @@
 export enum InterpolableValueType {
   Float,
+  FloatArray,
   Vector2,
   Vector3,
   Vector4,

packages/core/src/animation/internal/AnimationCurveOwner.ts

@@ -1,6 +1,7 @@
 import { Quaternion, Vector3 } from "@oasis-engine/math";
 import { Component } from "../../Component";
 import { Entity } from "../../Entity";
+import { SkinnedMeshRenderer } from "../../mesh/SkinnedMeshRenderer";
 import { AnimationProperty } from "../enums/AnimationProperty";
 import { InterpolableValue } from "../KeyFrame";
 
@@ -14,6 +15,7 @@ export class AnimationCurveOwner {
   readonly target: Entity;
   readonly type: new (entity: Entity) => Component;
   readonly property: AnimationProperty;
+  readonly component: Component;
   readonly defaultValue: InterpolableValue;
   readonly fixedPoseValue: InterpolableValue;
 
@@ -25,14 +27,22 @@ export class AnimationCurveOwner {
       case AnimationProperty.Position:
         this.defaultValue = new Vector3();
         this.fixedPoseValue = new Vector3();
+        this.component = target.transform;
         break;
       case AnimationProperty.Rotation:
         this.defaultValue = new Quaternion();
         this.fixedPoseValue = new Quaternion();
+        this.component = target.transform;
         break;
       case AnimationProperty.Scale:
         this.defaultValue = new Vector3();
         this.fixedPoseValue = new Vector3();
+        this.component = target.transform;
+        break;
+      case AnimationProperty.BlendShapeWeights:
+        this.defaultValue = new Float32Array(4);
+        this.fixedPoseValue = new Float32Array(4);
+        this.component = target.getComponent(SkinnedMeshRenderer);
         break;
     }
   }

packages/core/src/base/Constant.ts

@@ -88,6 +88,7 @@ export enum DataType {
  * Some capabilities can be smoothed out by extension, and some capabilities must use WebGL 2.0.
  * */
 export enum GLCapabilityType {
+  shaderVertexID = "shaderVertexID",
   standardDerivatives = "OES_standard_derivatives",
   shaderTextureLod = "EXT_shader_texture_lod",
   elementIndexUint = "OES_element_index_uint",

packages/core/src/graphic/Mesh.ts

@@ -10,6 +10,7 @@ import { VertexBufferBinding } from "../graphic/VertexBufferBinding";
 import { VertexElement } from "../graphic/VertexElement";
 import { ShaderProgram } from "../shader/ShaderProgram";
 import { UpdateFlag } from "../UpdateFlag";
+import { UpdateFlagManager } from "../UpdateFlagManager";
 
 /**
  * Mesh.
@@ -35,7 +36,7 @@ export abstract class Mesh extends RefObject {
   _vertexElements: VertexElement[] = [];
 
   private _subMeshes: SubMesh[] = [];
-  private _updateFlags: UpdateFlag[] = [];
+  private _updateFlagManager: UpdateFlagManager = new UpdateFlagManager();
 
   /**
    * First sub-mesh. Rendered using the first material.
@@ -114,7 +115,7 @@ export abstract class Mesh extends RefObject {
    * @returns Update flag
    */
   registerUpdateFlag(): UpdateFlag {
-    return new UpdateFlag(this._updateFlags);
+    return this._updateFlagManager.register();
   }
 
   /**
@@ -139,7 +140,7 @@ export abstract class Mesh extends RefObject {
    * @override
    * Destroy.
    */
-  _onDestroy() {
+  _onDestroy(): void {
     this._vertexBufferBindings = null;
     this._indexBufferBinding = null;
     this._vertexElements = null;
@@ -186,12 +187,6 @@ export abstract class Mesh extends RefObject {
     const { semantic } = element;
     this._vertexElementMap[semantic] = element;
     this._vertexElements.push(element);
-    this._makeModified();
-  }
-
-  private _makeModified(): void {
-    for (let i = this._updateFlags.length - 1; i >= 0; i--) {
-      this._updateFlags[i].flag = true;
-    }
+    this._updateFlagManager.distribute();
   }
 }