Fix camera aspect ratio

packages/core/src/Camera.ts

@@ -107,8 +107,6 @@ export class Camera extends Component {
   @deepClone
   private _inverseProjectionMatrix: Matrix = new Matrix();
   @deepClone
-  private _lastAspectSize: Vector2 = new Vector2(0, 0);
-  @deepClone
   private _invViewProjMat: Matrix = new Matrix();
 
   /**
@@ -159,8 +157,8 @@ export class Camera extends Component {
    * the manual value will be kept. Call resetAspectRatio() to restore it.
    */
   get aspectRatio(): number {
-    const canvas = this._entity.engine.canvas;
-    return this._customAspectRatio ?? (canvas.width * this._viewport.z) / (canvas.height * this._viewport.w);
+    const pixelViewport = this.pixelViewport;
+    return this._customAspectRatio ?? pixelViewport.width / pixelViewport.height;
   }
 
   set aspectRatio(value: number) {
@@ -181,8 +179,6 @@ export class Camera extends Component {
     if (value !== this._viewport) {
       this._viewport.copyFrom(value);
     }
-    this._projMatChange();
-    this._updatePixelViewport();
   }
 
   /**
@@ -261,18 +257,11 @@ export class Camera extends Component {
   get projectionMatrix(): Matrix {
     const virtualCamera = this._virtualCamera;
     const projectionMatrix = virtualCamera.projectionMatrix;
-    const canvas = this._entity.engine.canvas;
 
-    if (
-      (!this._isProjectionDirty || this._isProjMatSetting) &&
-      this._lastAspectSize.x === canvas.width &&
-      this._lastAspectSize.y === canvas.height
-    ) {
+    if (!this._isProjectionDirty || this._isProjMatSetting) {
       return projectionMatrix;
     }
     this._isProjectionDirty = false;
-    this._lastAspectSize.x = canvas.width;
-    this._lastAspectSize.y = canvas.height;
     const aspectRatio = this.aspectRatio;
     if (!virtualCamera.isOrthographic) {
       Matrix.perspective(
@@ -315,7 +304,7 @@ export class Camera extends Component {
       this._renderTarget && this._addResourceReferCount(this._renderTarget, -1);
       value && this._addResourceReferCount(value, 1);
       this._renderTarget = value;
-      this._updatePixelViewport();
+      this._onPixelViewportChanged();
     }
   }
 
@@ -333,6 +322,10 @@ export class Camera extends Component {
     this._renderPipeline = new BasicRenderPipeline(this);
     this._addResourceReferCount(this.shaderData, 1);
     this._updatePixelViewport();
+
+    this._onPixelViewportChanged = this._onPixelViewportChanged.bind(this);
+    //@ts-ignore
+    this._viewport._onValueChanged = this._onPixelViewportChanged;
   }
 
   /**
@@ -592,6 +585,9 @@ export class Camera extends Component {
     this._isViewMatrixDirty.destroy();
     this._addResourceReferCount(this.shaderData, -1);
 
+    //@ts-ignore
+    this._viewport._onValueChanged = null;
+
     this._entity = null;
     this._globalShaderMacro = null;
     this._frustum = null;
@@ -604,15 +600,23 @@ export class Camera extends Component {
     this._isInvViewProjDirty = null;
     this._viewport = null;
     this._inverseProjectionMatrix = null;
-    this._lastAspectSize = null;
     this._invViewProjMat = null;
   }
 
   private _updatePixelViewport(): void {
-    const viewport = this._viewport;
-    const width = this._renderTarget?.width ?? this.engine.canvas.width;
-    const height = this._renderTarget?.height ?? this.engine.canvas.height;
+    let width: number, height: number;
+
+    const renderTarget = this._renderTarget;
+    if (renderTarget) {
+      width = renderTarget.width;
+      height = renderTarget.height;
+    } else {
+      const canvas = this.engine.canvas;
+      width = canvas.width;
+      height = canvas.height;
+    }
 
+    const viewport = this._viewport;
     this._pixelViewport.set(viewport.x * width, viewport.y * height, viewport.z * width, viewport.w * height);
   }
 
@@ -668,4 +672,10 @@ export class Camera extends Component {
     }
     return this._inverseProjectionMatrix;
   }
+
+  @ignoreClone
+  private _onPixelViewportChanged(): void {
+    this._updatePixelViewport();
+    this._customAspectRatio ?? this._projMatChange();
+  }
 }

tests/src/core/Camera.test.ts

@@ -20,7 +20,7 @@ describe("camera test", function () {
     // Test default values
     expect(camera.aspectRatio).to.eq(1);
     expect(camera.entity.transform.worldPosition).not.to.be.undefined;
-    expect(camera.viewport).to.deep.eq(new Vector4(0, 0, 1, 1));
+    expect(camera.viewport).to.deep.include(new Vector4(0, 0, 1, 1).toJSON());
     expect(camera.fieldOfView).to.eq(45);
     expect(camera.isOrthographic).to.eq(false);
 
@@ -65,9 +65,9 @@ describe("camera test", function () {
     // Test viewport
     const originViewPort = new Vector4(0, 0, 1, 1);
     const expectedViewPort = new Vector4(0, 1, 0, 1);
-    expect(camera.viewport).to.deep.eq(originViewPort);
+    expect(camera.viewport).to.deep.include(originViewPort.toJSON());
     camera.viewport = expectedViewPort;
-    expect(camera.viewport).to.deep.eq(expectedViewPort);
+    expect(camera.viewport).to.deep.include(expectedViewPort.toJSON());
     camera.viewport = originViewPort;
 
     // Test orthographicSize