Optimize the use of Transform API

packages/controls/src/FreeControl.ts

@@ -281,7 +281,7 @@ export class FreeControl extends Script {
    */
   updateSpherical(): void {
     this._v3Cache.setValue(0, 0, -1);
-    Vector3.transformByQuat(this._v3Cache, this.camera.rotation, this._v3Cache);
+    Vector3.transformByQuat(this._v3Cache, this.camera.transform.rotationQuaternion, this._v3Cache);
     this._spherical.setFromVec3(this._v3Cache);
     this._theta = this._spherical.theta;
     this._phi = this._spherical.phi;

packages/controls/src/OrbitControl.ts

@@ -400,7 +400,7 @@ export class OrbitControl extends Script {
    */
   pan(deltaX: number, deltaY: number) {
     // perspective only
-    const position: Vector3 = this.camera.position;
+    const position: Vector3 = this.camera.transform.position;
     position.cloneTo(this._vPan);
     this._vPan.subtract(this.target);
     let targetDistance = this._vPan.length();

packages/controls/src/Spherical.ts

@@ -43,10 +43,11 @@ export class Spherical {
 
   setToVec3(v3: Vector3) {
     const sinPhiRadius = Math.sin(this.phi) * this.radius;
-
-    v3.x = sinPhiRadius * Math.sin(this.theta);
-    v3.y = Math.cos(this.phi) * this.radius;
-    v3.z = sinPhiRadius * Math.cos(this.theta);
+    v3.setValue(
+      sinPhiRadius * Math.sin(this.theta),
+      Math.cos(this.phi) * this.radius,
+      sinPhiRadius * Math.cos(this.theta)
+    );
 
     return this;
   }

packages/core/src/Transform.ts

@@ -1,6 +1,7 @@
 import { MathUtil, Matrix, Matrix3x3, Quaternion, Vector3 } from "@oasis-engine/math";
 import { deepClone, ignoreClone } from "./clone/CloneManager";
 import { Component } from "./Component";
+import { Entity } from "./Entity";
 import { UpdateFlag } from "./UpdateFlag";
 import { UpdateFlagManager } from "./UpdateFlagManager";
 
@@ -13,7 +14,6 @@ export class Transform extends Component {
   private static _tempMat30: Matrix3x3 = new Matrix3x3();
   private static _tempMat31: Matrix3x3 = new Matrix3x3();
   private static _tempMat32: Matrix3x3 = new Matrix3x3();
-  private static _tempMat40: Matrix = new Matrix();
   private static _tempMat41: Matrix = new Matrix();
   private static _tempMat42: Matrix = new Matrix();
   private static _tempMat43: Matrix = new Matrix();
@@ -49,7 +49,6 @@ export class Transform extends Component {
 
   /**
    * Local position.
-   * @remarks Need to re-assign after modification to ensure that the modification takes effect.
    */
   get position(): Vector3 {
     return this._position;
@@ -59,13 +58,10 @@ export class Transform extends Component {
     if (this._position !== value) {
       value.cloneTo(this._position);
     }
-    this._setDirtyFlagTrue(TransformFlag.LocalMatrix);
-    this._updateWorldPositionFlag();
   }
 
   /**
    * World position.
-   * @remarks Need to re-assign after modification to ensure that the modification takes effect.
    */
   get worldPosition(): Vector3 {
     if (this._isContainDirtyFlag(TransformFlag.WorldPosition)) {
@@ -83,27 +79,16 @@ export class Transform extends Component {
     if (this._worldPosition !== value) {
       value.cloneTo(this._worldPosition);
     }
-    const parent = this._getParentTransform();
-    if (parent) {
-      Matrix.invert(parent.worldMatrix, Transform._tempMat41);
-      Vector3.transformCoordinate(value, Transform._tempMat41, this._position);
-    } else {
-      value.cloneTo(this._position);
-    }
-    this.position = this._position;
-    this._setDirtyFlagFalse(TransformFlag.WorldPosition);
   }
 
   /**
    * Local rotation, defining the rotation value in degrees.
    * Rotations are performed around the Y axis, the X axis, and the Z axis, in that order.
-   * @remarks Need to re-assign after modification to ensure that the modification takes effect.
    */
   get rotation(): Vector3 {
     if (this._isContainDirtyFlag(TransformFlag.LocalEuler)) {
       this._rotationQuaternion.toEuler(this._rotation);
       this._rotation.scale(MathUtil.radToDegreeFactor); // radians to degrees
-
       this._setDirtyFlagFalse(TransformFlag.LocalEuler);
     }
     return this._rotation;
@@ -113,15 +98,11 @@ export class Transform extends Component {
     if (this._rotation !== value) {
       value.cloneTo(this._rotation);
     }
-    this._setDirtyFlagTrue(TransformFlag.LocalMatrix | TransformFlag.LocalQuat);
-    this._setDirtyFlagFalse(TransformFlag.LocalEuler);
-    this._updateWorldRotationFlag();
   }
 
   /**
    * World rotation, defining the rotation value in degrees.
    * Rotations are performed around the Y axis, the X axis, and the Z axis, in that order.
-   * @remarks Need to re-assign after modification to ensure that the modification takes effect.
    */
   get worldRotation(): Vector3 {
     if (this._isContainDirtyFlag(TransformFlag.WorldEuler)) {
@@ -136,19 +117,10 @@ export class Transform extends Component {
     if (this._worldRotation !== value) {
       value.cloneTo(this._worldRotation);
     }
-    Quaternion.rotationEuler(
-      MathUtil.degreeToRadian(value.x),
-      MathUtil.degreeToRadian(value.y),
-      MathUtil.degreeToRadian(value.z),
-      this._worldRotationQuaternion
-    );
-    this.worldRotationQuaternion = this._worldRotationQuaternion;
-    this._setDirtyFlagFalse(TransformFlag.WorldEuler);
   }
 
   /**
    * Local rotation, defining the rotation by using a unit quaternion.
-   * @remarks Need to re-assign after modification to ensure that the modification takes effect.
    */
   get rotationQuaternion(): Quaternion {
     if (this._isContainDirtyFlag(TransformFlag.LocalQuat)) {
@@ -167,14 +139,10 @@ export class Transform extends Component {
     if (this._rotationQuaternion !== value) {
       value.cloneTo(this._rotationQuaternion);
     }
-    this._setDirtyFlagTrue(TransformFlag.LocalMatrix | TransformFlag.LocalEuler);
-    this._setDirtyFlagFalse(TransformFlag.LocalQuat);
-    this._updateWorldRotationFlag();
   }
 
   /**
    * World rotation, defining the rotation by using a unit quaternion.
-   * @remarks Need to re-assign after modification to ensure that the modification takes effect.
    */
   get worldRotationQuaternion(): Quaternion {
     if (this._isContainDirtyFlag(TransformFlag.WorldQuat)) {
@@ -193,20 +161,10 @@ export class Transform extends Component {
     if (this._worldRotationQuaternion !== value) {
       value.cloneTo(this._worldRotationQuaternion);
     }
-    const parent = this._getParentTransform();
-    if (parent) {
-      Quaternion.invert(parent.worldRotationQuaternion, Transform._tempQuat0);
-      Quaternion.multiply(value, Transform._tempQuat0, this._rotationQuaternion);
-    } else {
-      value.cloneTo(this._rotationQuaternion);
-    }
-    this.rotationQuaternion = this._rotationQuaternion;
-    this._setDirtyFlagFalse(TransformFlag.WorldQuat);
   }
 
   /**
    * Local scaling.
-   * @remarks Need to re-assign after modification to ensure that the modification takes effect.
    */
   get scale(): Vector3 {
     return this._scale;
@@ -216,8 +174,6 @@ export class Transform extends Component {
     if (this._scale !== value) {
       value.cloneTo(this._scale);
     }
-    this._setDirtyFlagTrue(TransformFlag.LocalMatrix);
-    this._updateWorldScaleFlag();
   }
 
   /**
@@ -293,6 +249,74 @@ export class Transform extends Component {
     this._setDirtyFlagFalse(TransformFlag.WorldMatrix);
   }
 
+  constructor(entity: Entity) {
+    super(entity);
+
+    //@ts-ignore
+    this._position._onValueChanged = () => {
+      this._setDirtyFlagTrue(TransformFlag.LocalMatrix);
+      this._updateWorldPositionFlag();
+    };
+
+    //@ts-ignore
+    this._worldPosition._onValueChanged = () => {
+      const worldPosition = this._worldPosition;
+      const parent = this._getParentTransform();
+      if (parent) {
+        Matrix.invert(parent.worldMatrix, Transform._tempMat41);
+        Vector3.transformCoordinate(worldPosition, Transform._tempMat41, this._position);
+      } else {
+        worldPosition.cloneTo(this._position);
+      }
+      this._setDirtyFlagFalse(TransformFlag.WorldPosition);
+    };
+
+    //@ts-ignore
+    this._rotation._onValueChanged = () => {
+      this._setDirtyFlagTrue(TransformFlag.LocalMatrix | TransformFlag.LocalQuat);
+      this._setDirtyFlagFalse(TransformFlag.LocalEuler);
+      this._updateWorldRotationFlag();
+    };
+
+    //@ts-ignore
+    this._worldRotation._onValueChanged = () => {
+      const worldRotation = this._worldRotation;
+      Quaternion.rotationEuler(
+        MathUtil.degreeToRadian(worldRotation.x),
+        MathUtil.degreeToRadian(worldRotation.y),
+        MathUtil.degreeToRadian(worldRotation.z),
+        this._worldRotationQuaternion
+      );
+      this._setDirtyFlagFalse(TransformFlag.WorldEuler);
+    };
+
+    //@ts-ignore
+    this._rotationQuaternion._onValueChanged = () => {
+      this._setDirtyFlagTrue(TransformFlag.LocalMatrix | TransformFlag.LocalEuler);
+      this._setDirtyFlagFalse(TransformFlag.LocalQuat);
+      this._updateWorldRotationFlag();
+    };
+
+    //@ts-ignore
+    this._worldRotationQuaternion._onValueChanged = () => {
+      const worldRotationQuaternion = this._worldRotationQuaternion;
+      const parent = this._getParentTransform();
+      if (parent) {
+        Quaternion.invert(parent.worldRotationQuaternion, Transform._tempQuat0);
+        Quaternion.multiply(worldRotationQuaternion, Transform._tempQuat0, this._rotationQuaternion);
+      } else {
+        worldRotationQuaternion.cloneTo(this._rotationQuaternion);
+      }
+      this._setDirtyFlagFalse(TransformFlag.WorldQuat);
+    };
+
+    //@ts-ignore
+    this._scale._onValueChanged = () => {
+      this._setDirtyFlagTrue(TransformFlag.LocalMatrix);
+      this._updateWorldScaleFlag();
+    };
+  }
+
   /**
    * Set local position by X, Y, Z value.
    * @param x - X coordinate
@@ -301,7 +325,6 @@ export class Transform extends Component {
    */
   setPosition(x: number, y: number, z: number): void {
     this._position.setValue(x, y, z);
-    this.position = this._position;
   }
 
   /**
@@ -313,7 +336,6 @@ export class Transform extends Component {
    */
   setRotation(x: number, y: number, z: number): void {
     this._rotation.setValue(x, y, z);
-    this.rotation = this._rotation;
   }
 
   /**
@@ -325,7 +347,6 @@ export class Transform extends Component {
    */
   setRotationQuaternion(x: number, y: number, z: number, w: number): void {
     this._rotationQuaternion.setValue(x, y, z, w);
-    this.rotationQuaternion = this._rotationQuaternion;
   }
 
   /**
@@ -336,7 +357,6 @@ export class Transform extends Component {
    */
   setScale(x: number, y: number, z: number): void {
     this._scale.setValue(x, y, z);
-    this.scale = this._scale;
   }
 
   /**
@@ -347,7 +367,6 @@ export class Transform extends Component {
    */
   setWorldPosition(x: number, y: number, z: number): void {
     this._worldPosition.setValue(x, y, z);
-    this.worldPosition = this._worldPosition;
   }
 
   /**
@@ -358,7 +377,6 @@ export class Transform extends Component {
    */
   setWorldRotation(x: number, y: number, z: number): void {
     this._worldRotation.setValue(x, y, z);
-    this.worldRotation = this._worldRotation;
   }
 
   /**
@@ -370,7 +388,6 @@ export class Transform extends Component {
    */
   setWorldRotationQuaternion(x: number, y: number, z: number, w: number): void {
     this._worldRotationQuaternion.setValue(x, y, z, w);
-    this.worldRotationQuaternion = this._worldRotationQuaternion;
   }
 
   /**
@@ -499,7 +516,6 @@ export class Transform extends Component {
     worldUp = worldUp ?? Transform._tempVec3.setValue(0, 1, 0);
     Matrix.lookAt(position, worldPosition, worldUp, rotMat);
     rotMat.getRotation(worldRotationQuaternion).invert();
-    this.worldRotationQuaternion = worldRotationQuaternion;
   }
 
   /**
@@ -688,9 +704,9 @@ export class Transform extends Component {
 
   private _translate(translation: Vector3, relativeToLocal: boolean = true): void {
     if (relativeToLocal) {
-      this.position = this._position.add(translation);
+      this._position.add(translation);
     } else {
-      this.worldPosition = this._worldPosition.add(translation);
+      this._worldPosition.add(translation);
     }
   }
 

packages/core/src/animation/Animator.ts

@@ -653,9 +653,7 @@ export class Animator extends Component {
           value = Animator._tempQuaternion;
           break;
         case AnimationProperty.Scale: {
-          const scale = transform.scale;
           Vector3.lerp(srcValue as Vector3, destValue as Vector3, crossWeight, Animator._tempVector3);
-          transform.scale = scale;
           value = Animator._tempVector3;
           break;
         }
@@ -685,7 +683,6 @@ export class Animator extends Component {
           } else {
             const position = transform.position;
             Vector3.lerp(position, <Vector3>value, weight, position);
-            transform.position = position;
           }
           break;
         case AnimationProperty.Rotation:
@@ -694,7 +691,6 @@ export class Animator extends Component {
           } else {
             const rotationQuaternion = transform.rotationQuaternion;
             Quaternion.slerp(rotationQuaternion, <Quaternion>value, weight, rotationQuaternion);
-            transform.rotationQuaternion = rotationQuaternion;
           }
           break;
         case AnimationProperty.Scale:
@@ -703,7 +699,6 @@ export class Animator extends Component {
           } else {
             const scale = transform.scale;
             Vector3.lerp(scale, <Vector3>value, weight, scale);
-            transform.scale = scale;
           }
           break;
       }