@luma.gl/engine 9.3.0-alpha.4 → 9.3.0-alpha.6

package/dist/scenegraph/model-node.d.ts

@@ -4,11 +4,11 @@ import { Model } from "../model/model.js";
 export type ModelNodeProps = ScenegraphNodeProps & {
     model: Model;
     managedResources?: any[];
-    bounds?: [number[], number[]];
+    bounds?: [[number, number, number], [number, number, number]];
 };
 export declare class ModelNode extends ScenegraphNode {
     readonly model: Model;
-    bounds: [number[], number[]] | null;
+    bounds: [[number, number, number], [number, number, number]] | null;
     managedResources: any[];
     constructor(props: ModelNodeProps);
     destroy(): void;

package/dist/scenegraph/model-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model-node.d.ts","sourceRoot":"","sources":["../../src/scenegraph/model-node.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AACzC,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAC,6BAA0B;AACtE,OAAO,EAAC,KAAK,EAAC,0BAAuB;AAErC,MAAM,MAAM,cAAc,GAAG,mBAAmB,GAAG;IACjD,KAAK,EAAE,KAAK,CAAC;IACb,gBAAgB,CAAC,EAAE,GAAG,EAAE,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;CAC/B,CAAC;AAEF,qBAAa,SAAU,SAAQ,cAAc;IAC3C,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI,CAAQ;IAC3C,gBAAgB,EAAE,GAAG,EAAE,CAAC;gBAOZ,KAAK,EAAE,cAAc;IAUxB,OAAO,IAAI,IAAI;IAUf,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI;IAKjD,IAAI,CAAC,UAAU,EAAE,UAAU;CAI5B"}
+{"version":3,"file":"model-node.d.ts","sourceRoot":"","sources":["../../src/scenegraph/model-node.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AACzC,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAC,6BAA0B;AACtE,OAAO,EAAC,KAAK,EAAC,0BAAuB;AAErC,MAAM,MAAM,cAAc,GAAG,mBAAmB,GAAG;IACjD,KAAK,EAAE,KAAK,CAAC;IACb,gBAAgB,CAAC,EAAE,GAAG,EAAE,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CAC/D,CAAC;AAEF,qBAAa,SAAU,SAAQ,cAAc;IAC3C,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,CAAQ;IAC3E,gBAAgB,EAAE,GAAG,EAAE,CAAC;gBAOZ,KAAK,EAAE,cAAc;IAUxB,OAAO,IAAI,IAAI;IAUf,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI;IAKjD,IAAI,CAAC,UAAU,EAAE,UAAU;CAI5B"}

package/dist/scenegraph/model-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"model-node.js","sourceRoot":"","sources":["../../src/scenegraph/model-node.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAGpC,OAAO,EAAC,cAAc,EAAsB,6BAA0B;AAStE,MAAM,OAAO,SAAU,SAAQ,cAAc;IAClC,KAAK,CAAQ;IACtB,MAAM,GAAgC,IAAI,CAAC;IAC3C,gBAAgB,CAAQ;IAExB,8EAA8E;IAC9E,yBAAyB;IACzB,wBAAwB;IACxB,sBAAsB;IAEtB,YAAY,KAAqB;QAC/B,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,0CAA0C;QAC1C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,IAAI,EAAE,CAAC;QACrD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC;QACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAEQ,OAAO;QACd,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACrB,mBAAmB;YACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACpB,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;QAC9D,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;IAC7B,CAAC;IAEQ,SAAS;QAChB,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,uBAAuB;IACvB,IAAI,CAAC,UAAsB;QACzB,yDAAyD;QACzD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACrC,CAAC;CACF"}
+{"version":3,"file":"model-node.js","sourceRoot":"","sources":["../../src/scenegraph/model-node.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAGpC,OAAO,EAAC,cAAc,EAAsB,6BAA0B;AAStE,MAAM,OAAO,SAAU,SAAQ,cAAc;IAClC,KAAK,CAAQ;IACtB,MAAM,GAAgE,IAAI,CAAC;IAC3E,gBAAgB,CAAQ;IAExB,8EAA8E;IAC9E,yBAAyB;IACzB,wBAAwB;IACxB,sBAAsB;IAEtB,YAAY,KAAqB;QAC/B,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,0CAA0C;QAC1C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,IAAI,EAAE,CAAC;QACrD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC;QACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAEQ,OAAO;QACd,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACrB,mBAAmB;YACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACpB,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;QAC9D,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;IAC7B,CAAC;IAEQ,SAAS;QAChB,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,uBAAuB;IACvB,IAAI,CAAC,UAAsB;QACzB,yDAAyD;QACzD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACrC,CAAC;CACF"}

package/dist/scenegraph/scenegraph-node.d.ts

@@ -37,7 +37,7 @@ export declare class ScenegraphNode {
         update?: boolean;
     }): this;
     updateMatrix(): this;
-    update(options?: {
+    update({ position, rotation, scale }?: {
         position?: any;
         rotation?: any;
         scale?: any;

package/dist/scenegraph/scenegraph-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scenegraph-node.d.ts","sourceRoot":"","sources":["../../src/scenegraph/scenegraph-node.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAG7D,+CAA+C;AAC/C,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,qBAAa,cAAc;IACzB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAiB;IAEhC,OAAO,UAAQ;IACf,QAAQ,UAAiB;IACzB,QAAQ,UAAiB;IACzB,KAAK,UAAwB;IAC7B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IAEvC,KAAK,EAAE,mBAAmB,CAAM;gBAEpB,KAAK,GAAE,mBAAwB;IAQ3C,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI;IAIxC,OAAO,IAAI,IAAI;IAEf,iCAAiC;IACjC,MAAM,IAAI,IAAI;IAGd,QAAQ,CAAC,KAAK,EAAE,mBAAmB,GAAG,IAAI;IAK1C,QAAQ,IAAI,MAAM;IAIlB,WAAW,CAAC,QAAQ,EAAE,GAAG,GAAG,IAAI;IAMhC,WAAW,CAAC,QAAQ,EAAE,GAAG,GAAG,IAAI;IAMhC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAM1B,SAAS,CAAC,MAAM,EAAE,GAAG,EAAE,UAAU,GAAE,OAAc,GAAG,IAAI;IAQxD,mBAAmB,CAAC,UAAU,EAAE;QAC9B,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,KAAK,CAAC,EAAE,GAAG,CAAC;QACZ,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,GAAG,IAAI;IAiBR,YAAY,IAAI,IAAI;IAYpB,MAAM,CAAC,OAAO,GAAE;QAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;QAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;QAAC,KAAK,CAAC,EAAE,GAAG,CAAA;KAAM,GAAG,IAAI;IAezE,qBAAqB,CACnB,UAAU,EAAE,GAAG,EACf,WAAW,CAAC,EAAE,GAAG,GAChB;QACD,UAAU,EAAE,GAAG,CAAC;QAChB,WAAW,EAAE,GAAG,CAAC;QACjB,YAAY,EAAE,GAAG,CAAC;QAClB,WAAW,EAAE,GAAG,CAAC;QACjB,kBAAkB,EAAE,GAAG,CAAC;QACxB,2BAA2B,EAAE,GAAG,CAAC;KAClC;IA0CD,uBAAuB,CAAC,KAAK,EAAE,mBAAmB,GAAG,IAAI;CAsB1D"}
+{"version":3,"file":"scenegraph-node.d.ts","sourceRoot":"","sources":["../../src/scenegraph/scenegraph-node.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAS7D,+CAA+C;AAC/C,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,qBAAa,cAAc;IACzB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAiB;IAEhC,OAAO,UAAQ;IACf,QAAQ,UAAiB;IACzB,QAAQ,UAAiB;IACzB,KAAK,UAAwB;IAC7B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IAEvC,KAAK,EAAE,mBAAmB,CAAM;gBAEpB,KAAK,GAAE,mBAAwB;IAQ3C,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI;IAIxC,OAAO,IAAI,IAAI;IAEf,iCAAiC;IACjC,MAAM,IAAI,IAAI;IAGd,QAAQ,CAAC,KAAK,EAAE,mBAAmB,GAAG,IAAI;IAK1C,QAAQ,IAAI,MAAM;IAIlB,WAAW,CAAC,QAAQ,EAAE,GAAG,GAAG,IAAI;IAMhC,WAAW,CAAC,QAAQ,EAAE,GAAG,GAAG,IAAI;IAMhC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAM1B,SAAS,CAAC,MAAM,EAAE,GAAG,EAAE,UAAU,GAAE,OAAc,GAAG,IAAI;IAQxD,mBAAmB,CAAC,UAAU,EAAE;QAC9B,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,KAAK,CAAC,EAAE,GAAG,CAAC;QACZ,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,GAAG,IAAI;IAiBR,YAAY,IAAI,IAAI;IAcpB,MAAM,CAAC,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAC,GAAE;QAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;QAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;QAAC,KAAK,CAAC,EAAE,GAAG,CAAA;KAAM,GAAG,IAAI;IAgB7F,qBAAqB,CACnB,UAAU,EAAE,GAAG,EACf,WAAW,CAAC,EAAE,GAAG,GAChB;QACD,UAAU,EAAE,GAAG,CAAC;QAChB,WAAW,EAAE,GAAG,CAAC;QACjB,YAAY,EAAE,GAAG,CAAC;QAClB,WAAW,EAAE,GAAG,CAAC;QACjB,kBAAkB,EAAE,GAAG,CAAC;QACxB,2BAA2B,EAAE,GAAG,CAAC;KAClC;IA0CD,uBAAuB,CAAC,KAAK,EAAE,mBAAmB,GAAG,IAAI;CAwB1D"}

package/dist/scenegraph/scenegraph-node.js

@@ -3,6 +3,11 @@
 // Copyright (c) vis.gl contributors
 import { Vector3, Matrix4 } from '@math.gl/core';
 import { uid } from "../utils/uid.js";
+function assert(condition, message) {
+    if (!condition) {
+        throw new Error(message);
+    }
+}
 export class ScenegraphNode {
     id;
     matrix = new Matrix4();
@@ -33,17 +38,17 @@ export class ScenegraphNode {
         return `{type: ScenegraphNode, id: ${this.id})}`;
     }
     setPosition(position) {
-        // assert(position.length === 3, 'setPosition requires vector argument');
+        assert(position.length === 3, 'setPosition requires vector argument');
         this.position = position;
         return this;
     }
     setRotation(rotation) {
-        // assert(rotation.length === 3, 'setRotation requires vector argument');
+        assert(rotation.length === 3 || rotation.length === 4, 'setRotation requires vector argument');
         this.rotation = rotation;
         return this;
     }
     setScale(scale) {
-        // assert(scale.length === 3, 'setScale requires vector argument');
+        assert(scale.length === 3, 'setScale requires vector argument');
         this.scale = scale;
         return this;
     }
@@ -72,17 +77,19 @@ export class ScenegraphNode {
         return this;
     }
     updateMatrix() {
-        const pos = this.position;
-        const rot = this.rotation;
-        const scale = this.scale;
         this.matrix.identity();
-        this.matrix.translate(pos);
-        this.matrix.rotateXYZ(rot);
-        this.matrix.scale(scale);
+        this.matrix.translate(this.position);
+        if (this.rotation.length === 4) {
+            const rotationMatrix = new Matrix4().fromQuaternion(this.rotation);
+            this.matrix.multiplyRight(rotationMatrix);
+        }
+        else {
+            this.matrix.rotateXYZ(this.rotation);
+        }
+        this.matrix.scale(this.scale);
         return this;
     }
-    update(options = {}) {
-        const { position, rotation, scale } = options;
+    update({ position, rotation, scale } = {}) {
         if (position) {
             this.setPosition(position);
         }
@@ -138,17 +145,18 @@ export class ScenegraphNode {
         // if ('display' in props) {
         //   this.display = props.display;
         // }
-        if ('position' in props) {
+        if (props?.position) {
             this.setPosition(props.position);
         }
-        if ('rotation' in props) {
+        if (props?.rotation) {
             this.setRotation(props.rotation);
         }
-        if ('scale' in props) {
+        if (props?.scale) {
             this.setScale(props.scale);
         }
+        this.updateMatrix();
         // Matrix overwrites other props
-        if ('matrix' in props) {
+        if (props?.matrix) {
             this.setMatrix(props.matrix);
         }
         Object.assign(this.props, props);

package/dist/scenegraph/scenegraph-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"scenegraph-node.js","sourceRoot":"","sources":["../../src/scenegraph/scenegraph-node.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"scenegraph-node.js","sourceRoot":"","sources":["../../src/scenegraph/scenegraph-node.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/engine",
-  "version": "9.3.0-alpha.4",
+  "version": "9.3.0-alpha.6",
   "description": "3D Engine Components for luma.gl",
   "type": "module",
   "license": "MIT",
@@ -49,5 +49,5 @@
     "@probe.gl/log": "^4.1.1",
     "@probe.gl/stats": "^4.1.1"
   },
-  "gitHead": "7486e7b0377fb6ab961b4499828681bede60f3b1"
+  "gitHead": "59fda5480c4d0bb3d64545d4621175221f2b6c7c"
 }

package/src/animation-loop/animation-loop.ts

@@ -12,6 +12,7 @@ import {AnimationProps} from './animation-props';
 import {Stats, Stat} from '@probe.gl/stats';
 
 let statIdCounter = 0;
+const ANIMATION_LOOP_STATS = 'Animation Loop';
 
 /** AnimationLoop properties */
 export type AnimationLoopProps = {
@@ -45,7 +46,7 @@ export class AnimationLoop {
     onFinalize: () => {},
     onError: error => console.error(error), // eslint-disable-line no-console
 
-    stats: luma.stats.get(`animation-loop-${statIdCounter++}`),
+    stats: undefined!,
 
     // view parameters
     autoResizeViewport: false
@@ -58,6 +59,7 @@ export class AnimationLoop {
   animationProps: AnimationProps | null = null;
   timeline: Timeline | null = null;
   stats: Stats;
+  sharedStats: Stats;
   cpuTime: Stat;
   gpuTime: Stat;
   frameRate: Stat;
@@ -73,8 +75,7 @@ export class AnimationLoop {
   _resolveNextFrame: ((animationLoop: AnimationLoop) => void) | null = null;
   _cpuStartTime: number = 0;
   _error: Error | null = null;
-
-  // _gpuTimeQuery: Query | null = null;
+  _lastFrameTime: number = 0;
 
   /*
    * @param {HTMLCanvasElement} canvas - if provided, width and height will be passed to context
@@ -88,10 +89,12 @@ export class AnimationLoop {
     }
 
     // state
-    this.stats = props.stats || new Stats({id: 'animation-loop-stats'});
+    this.stats = props.stats || new Stats({id: `animation-loop-${statIdCounter++}`});
+    this.sharedStats = luma.stats.get(ANIMATION_LOOP_STATS);
+    this.frameRate = this.stats.get('Frame Rate');
+    this.frameRate.setSampleSize(1);
     this.cpuTime = this.stats.get('CPU Time');
     this.gpuTime = this.stats.get('GPU Time');
-    this.frameRate = this.stats.get('Frame Rate');
 
     this.setProps({autoResizeViewport: props.autoResizeViewport});
 
@@ -106,6 +109,7 @@ export class AnimationLoop {
   destroy(): void {
     this.stop();
     this._setDisplay(null);
+    this.device?._disableDebugGPUTime();
   }
 
   /** @deprecated Use .destroy() */
@@ -192,17 +196,18 @@ export class AnimationLoop {
       this._nextFramePromise = null;
       this._resolveNextFrame = null;
       this._running = false;
+      this._lastFrameTime = 0;
     }
     return this;
   }
 
   /** Explicitly draw a frame */
-  redraw(): this {
+  redraw(time?: number): this {
     if (this.device?.isLost || this._error) {
       return this;
     }
 
-    this._beginFrameTimers();
+    this._beginFrameTimers(time);
 
     this._setupFrame();
     this._updateAnimationProps();
@@ -268,7 +273,7 @@ export class AnimationLoop {
     // Default viewport setup, in case onInitialize wants to render
     this._resizeViewport();
 
-    // this._gpuTimeQuery = Query.isSupported(this.gl, ['timers']) ? new Query(this.gl) : null;
+    this.device?._enableDebugGPUTime();
   }
 
   _setDisplay(display: any): void {
@@ -314,11 +319,11 @@ export class AnimationLoop {
     this._animationFrameId = null;
   }
 
-  _animationFrame(): void {
+  _animationFrame(time: number): void {
     if (!this._running) {
       return;
     }
-    this.redraw();
+    this.redraw(time);
     this._requestAnimationFrame();
   }
 
@@ -467,20 +472,10 @@ export class AnimationLoop {
     if (!this.device) {
       return {width: 1, height: 1, aspect: 1};
     }
-    // https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
-    const [width, height] = this.device?.getDefaultCanvasContext().getDevicePixelSize() || [1, 1];
-
-    // https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html
-    let aspect = 1;
-    const canvas = this.device?.getDefaultCanvasContext().canvas;
-
-    // @ts-expect-error
-    if (canvas && canvas.clientHeight) {
-      // @ts-expect-error
-      aspect = canvas.clientWidth / canvas.clientHeight;
-    } else if (width > 0 && height > 0) {
-      aspect = width / height;
-    }
+    // Match projection setup to the actual render target dimensions, which may
+    // differ from the CSS size when device-pixel scaling or backend clamping applies.
+    const [width, height] = this.device.getDefaultCanvasContext().getDrawingBufferSize();
+    const aspect = width > 0 && height > 0 ? width / height : 1;
 
     return {width, height, aspect};
   }
@@ -502,36 +497,70 @@ export class AnimationLoop {
     }
   }
 
-  _beginFrameTimers() {
-    this.frameRate.timeEnd();
-    this.frameRate.timeStart();
-
-    // Check if timer for last frame has completed.
-    // GPU timer results are never available in the same
-    // frame they are captured.
-    // if (
-    //   this._gpuTimeQuery &&
-    //   this._gpuTimeQuery.isResultAvailable() &&
-    //   !this._gpuTimeQuery.isTimerDisjoint()
-    // ) {
-    //   this.stats.get('GPU Time').addTime(this._gpuTimeQuery.getTimerMilliseconds());
-    // }
+  _beginFrameTimers(time?: number) {
+    const now = time ?? (typeof performance !== 'undefined' ? performance.now() : Date.now());
+    if (this._lastFrameTime) {
+      const frameTime = now - this._lastFrameTime;
+      if (frameTime > 0) {
+        this.frameRate.addTime(frameTime);
+      }
+    }
+    this._lastFrameTime = now;
 
-    // if (this._gpuTimeQuery) {
-    //   // GPU time query start
-    //   this._gpuTimeQuery.beginTimeElapsedQuery();
-    // }
+    if (this.device?._isDebugGPUTimeEnabled()) {
+      this._consumeEncodedGpuTime();
+    }
 
     this.cpuTime.timeStart();
   }
 
   _endFrameTimers() {
+    if (this.device?._isDebugGPUTimeEnabled()) {
+      this._consumeEncodedGpuTime();
+    }
+
     this.cpuTime.timeEnd();
+    this._updateSharedStats();
+  }
 
-    // if (this._gpuTimeQuery) {
-    //   // GPU time query end. Results will be available on next frame.
-    //   this._gpuTimeQuery.end();
-    // }
+  _consumeEncodedGpuTime(): void {
+    if (!this.device) {
+      return;
+    }
+
+    const gpuTimeMs = this.device.commandEncoder._gpuTimeMs;
+    if (gpuTimeMs !== undefined) {
+      this.gpuTime.addTime(gpuTimeMs);
+      this.device.commandEncoder._gpuTimeMs = undefined;
+    }
+  }
+
+  _updateSharedStats(): void {
+    if (this.stats === this.sharedStats) {
+      return;
+    }
+
+    for (const name of Object.keys(this.sharedStats.stats)) {
+      if (!this.stats.stats[name]) {
+        delete this.sharedStats.stats[name];
+      }
+    }
+
+    this.stats.forEach(sourceStat => {
+      const targetStat = this.sharedStats.get(sourceStat.name, sourceStat.type);
+      targetStat.sampleSize = sourceStat.sampleSize;
+      targetStat.time = sourceStat.time;
+      targetStat.count = sourceStat.count;
+      targetStat.samples = sourceStat.samples;
+      targetStat.lastTiming = sourceStat.lastTiming;
+      targetStat.lastSampleTime = sourceStat.lastSampleTime;
+      targetStat.lastSampleCount = sourceStat.lastSampleCount;
+      targetStat._count = sourceStat._count;
+      targetStat._time = sourceStat._time;
+      targetStat._samples = sourceStat._samples;
+      targetStat._startTime = sourceStat._startTime;
+      targetStat._timerPending = sourceStat._timerPending;
+    });
   }
 
   // Event handling

package/src/animation-loop/make-animation-loop.ts

@@ -36,14 +36,14 @@ export function makeAnimationLoop(
     device,
 
     async onInitialize(animationProps: AnimationProps): Promise<unknown> {
-      clearError(animationProps.animationLoop.device!);
+      clearError(animationProps.animationLoop.device);
       try {
         // @ts-expect-error abstract to prevent instantiation
         renderLoop = new AnimationLoopTemplateCtor(animationProps);
         // Any async loading can be handled here
         return await renderLoop?.onInitialize(animationProps);
       } catch (error) {
-        setError(animationProps.animationLoop.device!, error as Error);
+        setError(animationProps.animationLoop.device, error as Error);
         return null;
       }
     },
@@ -63,8 +63,12 @@ export function makeAnimationLoop(
   return animationLoop;
 }
 
-function setError(device: Device, error: Error): void {
-  const canvas = device?.getDefaultCanvasContext().canvas;
+function setError(device: Device | null, error: Error): void {
+  if (!device) {
+    return;
+  }
+
+  const canvas = device.getDefaultCanvasContext().canvas;
   if (canvas instanceof HTMLCanvasElement) {
     canvas.style.overflow = 'visible';
     let errorDiv = document.getElementById('animation-loop-error');
@@ -82,7 +86,11 @@ function setError(device: Device, error: Error): void {
   }
 }
 
-function clearError(device: Device): void {
+function clearError(device: Device | null): void {
+  if (!device) {
+    return;
+  }
+
   const errorDiv = document.getElementById('animation-loop-error');
   if (errorDiv) {
     errorDiv.remove();

package/src/animation-loop/request-animation-frame.ts

@@ -7,14 +7,40 @@
 /** Node.js polyfill for requestAnimationFrame */
 // / <reference types="@types/node" />
 export function requestAnimationFramePolyfill(callback: (time?: any) => void): any {
-  return typeof window !== 'undefined' && window.requestAnimationFrame
-    ? window.requestAnimationFrame(callback)
-    : setTimeout(callback, 1000 / 60);
+  const browserRequestAnimationFrame =
+    typeof window !== 'undefined'
+      ? window.requestAnimationFrame ||
+        (window as Window & {webkitRequestAnimationFrame?: (cb: FrameRequestCallback) => number})
+          .webkitRequestAnimationFrame ||
+        (window as Window & {mozRequestAnimationFrame?: (cb: FrameRequestCallback) => number})
+          .mozRequestAnimationFrame
+      : null;
+
+  if (browserRequestAnimationFrame) {
+    return browserRequestAnimationFrame.call(window, callback);
+  }
+
+  return setTimeout(
+    () => callback(typeof performance !== 'undefined' ? performance.now() : Date.now()),
+    1000 / 60
+  );
 }
 
 /** Node.js polyfill for cancelAnimationFrame */
 export function cancelAnimationFramePolyfill(timerId: any): void {
-  return typeof window !== 'undefined' && window.cancelAnimationFrame
-    ? window.cancelAnimationFrame(timerId)
-    : clearTimeout(timerId);
+  const browserCancelAnimationFrame =
+    typeof window !== 'undefined'
+      ? window.cancelAnimationFrame ||
+        (window as Window & {webkitCancelAnimationFrame?: (handle: number) => void})
+          .webkitCancelAnimationFrame ||
+        (window as Window & {mozCancelAnimationFrame?: (handle: number) => void})
+          .mozCancelAnimationFrame
+      : null;
+
+  if (browserCancelAnimationFrame) {
+    browserCancelAnimationFrame.call(window, timerId);
+    return;
+  }
+
+  clearTimeout(timerId);
 }