@luma.gl/engine 9.0.0-alpha.14 → 9.0.0-alpha.16

package/dist/animation-loop/animation-loop.js

@@ -1,482 +1,423 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+// luma.gl, MIT license
 import { luma } from '@luma.gl/api';
 import { requestAnimationFrame, cancelAnimationFrame } from '@luma.gl/api';
 import { Stats } from '@probe.gl/stats';
 let statIdCounter = 0;
 const DEFAULT_ANIMATION_LOOP_PROPS = {
-  device: null,
-  onAddHTML: () => '',
-  onInitialize: async () => {
-    return null;
-  },
-  onRender: () => {},
-  onFinalize: () => {},
-  onError: error => console.error(error),
-  stats: luma.stats.get("animation-loop-".concat(statIdCounter++)),
-  useDevicePixels: true,
-  autoResizeViewport: false,
-  autoResizeDrawingBuffer: false
+    device: null,
+    onAddHTML: () => '',
+    onInitialize: async () => { return null; },
+    onRender: () => { },
+    onFinalize: () => { },
+    onError: (error) => console.error(error),
+    stats: luma.stats.get(`animation-loop-${statIdCounter++}`),
+    // view parameters
+    useDevicePixels: true,
+    autoResizeViewport: false,
+    autoResizeDrawingBuffer: false,
 };
+/** Convenient animation loop */
 export class AnimationLoop {
-  constructor(props) {
-    _defineProperty(this, "device", null);
-
-    _defineProperty(this, "canvas", null);
-
-    _defineProperty(this, "props", void 0);
-
-    _defineProperty(this, "animationProps", null);
-
-    _defineProperty(this, "timeline", null);
-
-    _defineProperty(this, "stats", void 0);
-
-    _defineProperty(this, "cpuTime", void 0);
-
-    _defineProperty(this, "gpuTime", void 0);
-
-    _defineProperty(this, "frameRate", void 0);
-
-    _defineProperty(this, "display", void 0);
-
-    _defineProperty(this, "needsRedraw", 'initialized');
-
-    _defineProperty(this, "_initialized", false);
-
-    _defineProperty(this, "_running", false);
-
-    _defineProperty(this, "_animationFrameId", null);
-
-    _defineProperty(this, "_nextFramePromise", null);
-
-    _defineProperty(this, "_resolveNextFrame", null);
-
-    _defineProperty(this, "_cpuStartTime", 0);
-
-    this.props = { ...DEFAULT_ANIMATION_LOOP_PROPS,
-      ...props
-    };
-    props = this.props;
-
-    if (!props.device) {
-      throw new Error('No device provided');
-    }
-
-    let {
-      useDevicePixels = true
-    } = this.props;
-    this.stats = props.stats || new Stats({
-      id: 'animation-loop-stats'
-    });
-    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,
-      autoResizeDrawingBuffer: props.autoResizeDrawingBuffer,
-      useDevicePixels
-    });
-    this.start = this.start.bind(this);
-    this.stop = this.stop.bind(this);
-    this._onMousemove = this._onMousemove.bind(this);
-    this._onMouseleave = this._onMouseleave.bind(this);
-  }
-
-  destroy() {
-    this.stop();
-
-    this._setDisplay(null);
-  }
-
-  delete() {
-    this.destroy();
-  }
-
-  setNeedsRedraw(reason) {
-    this.needsRedraw = this.needsRedraw || reason;
-    return this;
-  }
-
-  setProps(props) {
-    if ('autoResizeViewport' in props) {
-      this.props.autoResizeViewport = props.autoResizeViewport || false;
-    }
-
-    if ('autoResizeDrawingBuffer' in props) {
-      this.props.autoResizeDrawingBuffer = props.autoResizeDrawingBuffer || false;
-    }
-
-    if ('useDevicePixels' in props) {
-      this.props.useDevicePixels = props.useDevicePixels || false;
-    }
-
-    return this;
-  }
-
-  async start() {
-    if (this._running) {
-      return this;
-    }
-
-    this._running = true;
-
-    try {
-      if (!this._running) {
-        return null;
-      }
-
-      let appContext;
-
-      if (!this._initialized) {
-        this._initialized = true;
-        await this._initDevice();
-
-        this._initialize();
-
-        await this.props.onInitialize(this._getAnimationProps());
-      }
-
-      if (!this._running) {
-        return null;
-      }
-
-      if (appContext !== false) {
-        this._cancelAnimationFrame();
-
+    // _gpuTimeQuery: Query | null = null;
+    /*
+     * @param {HTMLCanvasElement} canvas - if provided, width and height will be passed to context
+     */
+    constructor(props) {
+        this.device = null;
+        this.canvas = null;
+        this.animationProps = null;
+        this.timeline = null;
+        this.needsRedraw = 'initialized';
+        this._initialized = false;
+        this._running = false;
+        this._animationFrameId = null;
+        this._nextFramePromise = null;
+        this._resolveNextFrame = null;
+        this._cpuStartTime = 0;
+        this.props = { ...DEFAULT_ANIMATION_LOOP_PROPS, ...props };
+        props = this.props;
+        if (!props.device) {
+            throw new Error('No device provided');
+        }
+        let { useDevicePixels = true } = this.props;
+        // state
+        this.stats = props.stats || new Stats({ id: 'animation-loop-stats' });
+        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,
+            autoResizeDrawingBuffer: props.autoResizeDrawingBuffer,
+            useDevicePixels
+        });
+        // Bind methods
+        this.start = this.start.bind(this);
+        this.stop = this.stop.bind(this);
+        this._onMousemove = this._onMousemove.bind(this);
+        this._onMouseleave = this._onMouseleave.bind(this);
+    }
+    destroy() {
+        this.stop();
+        this._setDisplay(null);
+    }
+    /** @deprecated Use .destroy() */
+    delete() {
+        this.destroy();
+    }
+    setNeedsRedraw(reason) {
+        this.needsRedraw = this.needsRedraw || reason;
+        return this;
+    }
+    // TODO - move to CanvasContext
+    setProps(props) {
+        if ('autoResizeViewport' in props) {
+            this.props.autoResizeViewport = props.autoResizeViewport || false;
+        }
+        if ('autoResizeDrawingBuffer' in props) {
+            this.props.autoResizeDrawingBuffer = props.autoResizeDrawingBuffer || false;
+        }
+        if ('useDevicePixels' in props) {
+            this.props.useDevicePixels = props.useDevicePixels || false;
+        }
+        return this;
+    }
+    /** Starts a render loop if not already running */
+    async start() {
+        if (this._running) {
+            return this;
+        }
+        this._running = true;
+        try {
+            // check that we haven't been stopped
+            if (!this._running) {
+                return null;
+            }
+            let appContext;
+            if (!this._initialized) {
+                this._initialized = true;
+                // Create the WebGL context
+                await this._initDevice();
+                this._initialize();
+                // Note: onIntialize can return a promise (e.g. in case app needs to load resources)
+                await this.props.onInitialize(this._getAnimationProps());
+            }
+            // check that we haven't been stopped
+            if (!this._running) {
+                return null;
+            }
+            // Start the loop
+            if (appContext !== false) {
+                // cancel any pending renders to ensure only one loop can ever run
+                this._cancelAnimationFrame();
+                this._requestAnimationFrame();
+            }
+            return this;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Unknown error');
+            this.props.onError(error);
+            // this._running = false; // TODO
+            throw error;
+        }
+    }
+    /** Explicitly draw a frame */
+    redraw() {
+        if (this.device?.isLost) {
+            return this;
+        }
+        this._beginTimers();
+        this._setupFrame();
+        this._updateAnimationProps();
+        this._renderFrame(this._getAnimationProps());
+        // clear needsRedraw flag
+        this._clearNeedsRedraw();
+        if (this._resolveNextFrame) {
+            this._resolveNextFrame(this);
+            this._nextFramePromise = null;
+            this._resolveNextFrame = null;
+        }
+        this._endTimers();
+        return this;
+    }
+    // Stops a render loop if already running, finalizing
+    stop() {
+        // console.debug(`Stopping ${this.constructor.name}`);
+        if (this._running) {
+            // call callback
+            // If stop is called immediately, we can end up in a state where props haven't been initialized...
+            if (this.animationProps) {
+                this.props.onFinalize(this.animationProps);
+            }
+            this._cancelAnimationFrame();
+            this._nextFramePromise = null;
+            this._resolveNextFrame = null;
+            this._running = false;
+        }
+        return this;
+    }
+    attachTimeline(timeline) {
+        this.timeline = timeline;
+        return this.timeline;
+    }
+    detachTimeline() {
+        this.timeline = null;
+    }
+    waitForRender() {
+        this.setNeedsRedraw('waitForRender');
+        if (!this._nextFramePromise) {
+            this._nextFramePromise = new Promise((resolve) => {
+                this._resolveNextFrame = resolve;
+            });
+        }
+        return this._nextFramePromise;
+    }
+    async toDataURL() {
+        this.setNeedsRedraw('toDataURL');
+        await this.waitForRender();
+        if (this.canvas instanceof HTMLCanvasElement) {
+            return this.canvas.toDataURL();
+        }
+        throw new Error('OffscreenCanvas');
+    }
+    // PRIVATE METHODS
+    _initialize() {
+        this._startEventHandling();
+        // Initialize the callback data
+        this._initializeAnimationProps();
+        this._updateAnimationProps();
+        // Default viewport setup, in case onInitialize wants to render
+        this._resizeCanvasDrawingBuffer();
+        this._resizeViewport();
+        // this._gpuTimeQuery = Query.isSupported(this.gl, ['timers']) ? new Query(this.gl) : null;
+    }
+    _setDisplay(display) {
+        if (this.display) {
+            this.display.delete();
+            this.display.animationLoop = null;
+        }
+        // store animation loop on the display
+        if (display) {
+            display.animationLoop = this;
+        }
+        this.display = display;
+    }
+    _requestAnimationFrame() {
+        if (!this._running) {
+            return;
+        }
+        // VR display has a separate animation frame to sync with headset
+        // TODO WebVR API discontinued, replaced by WebXR: https://immersive-web.github.io/webxr/
+        // See https://developer.mozilla.org/en-US/docs/Web/API/VRDisplay/requestAnimationFrame
+        // if (this.display && this.display.requestAnimationFrame) {
+        //   this._animationFrameId = this.display.requestAnimationFrame(this._animationFrame.bind(this));
+        // }
+        this._animationFrameId = requestAnimationFrame(this._animationFrame.bind(this));
+    }
+    _cancelAnimationFrame() {
+        if (this._animationFrameId !== null) {
+            return;
+        }
+        // VR display has a separate animation frame to sync with headset
+        // TODO WebVR API discontinued, replaced by WebXR: https://immersive-web.github.io/webxr/
+        // See https://developer.mozilla.org/en-US/docs/Web/API/VRDisplay/requestAnimationFrame
+        // if (this.display && this.display.cancelAnimationFrame) {
+        //   this.display.cancelAnimationFrame(this._animationFrameId);
+        // }
+        cancelAnimationFrame(this._animationFrameId);
+        this._animationFrameId = null;
+    }
+    _animationFrame() {
+        if (!this._running) {
+            return;
+        }
+        this.redraw();
         this._requestAnimationFrame();
-      }
-
-      return this;
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error('Unknown error');
-      this.props.onError(error);
-      throw error;
-    }
-  }
-
-  redraw() {
-    var _this$device;
-
-    if ((_this$device = this.device) !== null && _this$device !== void 0 && _this$device.isLost) {
-      return this;
-    }
-
-    this._beginTimers();
-
-    this._setupFrame();
-
-    this._updateAnimationProps();
-
-    this._renderFrame(this._getAnimationProps());
-
-    this._clearNeedsRedraw();
-
-    if (this._resolveNextFrame) {
-      this._resolveNextFrame(this);
-
-      this._nextFramePromise = null;
-      this._resolveNextFrame = null;
-    }
-
-    this._endTimers();
-
-    return this;
-  }
-
-  stop() {
-    if (this._running) {
-      if (this.animationProps) {
-        this.props.onFinalize(this.animationProps);
-      }
-
-      this._cancelAnimationFrame();
-
-      this._nextFramePromise = null;
-      this._resolveNextFrame = null;
-      this._running = false;
-    }
-
-    return this;
-  }
-
-  attachTimeline(timeline) {
-    this.timeline = timeline;
-    return this.timeline;
-  }
-
-  detachTimeline() {
-    this.timeline = null;
-  }
-
-  waitForRender() {
-    this.setNeedsRedraw('waitForRender');
-
-    if (!this._nextFramePromise) {
-      this._nextFramePromise = new Promise(resolve => {
-        this._resolveNextFrame = resolve;
-      });
-    }
-
-    return this._nextFramePromise;
-  }
-
-  async toDataURL() {
-    this.setNeedsRedraw('toDataURL');
-    await this.waitForRender();
-
-    if (this.canvas instanceof HTMLCanvasElement) {
-      return this.canvas.toDataURL();
-    }
-
-    throw new Error('OffscreenCanvas');
-  }
-
-  _initialize() {
-    this._startEventHandling();
-
-    this._initializeAnimationProps();
-
-    this._updateAnimationProps();
-
-    this._resizeCanvasDrawingBuffer();
-
-    this._resizeViewport();
-  }
-
-  _setDisplay(display) {
-    if (this.display) {
-      this.display.delete();
-      this.display.animationLoop = null;
-    }
-
-    if (display) {
-      display.animationLoop = this;
-    }
-
-    this.display = display;
-  }
-
-  _requestAnimationFrame() {
-    if (!this._running) {
-      return;
-    }
-
-    this._animationFrameId = requestAnimationFrame(this._animationFrame.bind(this));
-  }
-
-  _cancelAnimationFrame() {
-    if (this._animationFrameId !== null) {
-      return;
-    }
-
-    cancelAnimationFrame(this._animationFrameId);
-    this._animationFrameId = null;
-  }
-
-  _animationFrame() {
-    if (!this._running) {
-      return;
-    }
-
-    this.redraw();
-
-    this._requestAnimationFrame();
-  }
-
-  _renderFrame(animationProps) {
-    if (this.display) {
-      this.display._renderFrame(animationProps);
-
-      return;
-    }
-
-    this.props.onRender(this._getAnimationProps());
-  }
-
-  _clearNeedsRedraw() {
-    this.needsRedraw = false;
-  }
-
-  _setupFrame() {
-    this._resizeCanvasDrawingBuffer();
-
-    this._resizeViewport();
-  }
-
-  _initializeAnimationProps() {
-    var _this$device2, _this$device2$canvasC;
-
-    if (!this.device) {
-      throw new Error('loop');
-    }
-
-    this.animationProps = {
-      animationLoop: this,
-      device: this.device,
-      canvas: (_this$device2 = this.device) === null || _this$device2 === void 0 ? void 0 : (_this$device2$canvasC = _this$device2.canvasContext) === null || _this$device2$canvasC === void 0 ? void 0 : _this$device2$canvasC.canvas,
-      timeline: this.timeline,
-      useDevicePixels: this.props.useDevicePixels,
-      needsRedraw: false,
-      width: 1,
-      height: 1,
-      aspect: 1,
-      time: 0,
-      startTime: Date.now(),
-      engineTime: 0,
-      tick: 0,
-      tock: 0,
-      _mousePosition: null
-    };
-  }
-
-  _getAnimationProps() {
-    if (!this.animationProps) {
-      throw new Error('animationProps');
-    }
-
-    return this.animationProps;
-  }
-
-  _updateAnimationProps() {
-    if (!this.animationProps) {
-      return;
-    }
-
-    const {
-      width,
-      height,
-      aspect
-    } = this._getSizeAndAspect();
-
-    if (width !== this.animationProps.width || height !== this.animationProps.height) {
-      this.setNeedsRedraw('drawing buffer resized');
-    }
-
-    if (aspect !== this.animationProps.aspect) {
-      this.setNeedsRedraw('drawing buffer aspect changed');
-    }
-
-    this.animationProps.width = width;
-    this.animationProps.height = height;
-    this.animationProps.aspect = aspect;
-    this.animationProps.needsRedraw = this.needsRedraw;
-    this.animationProps.engineTime = Date.now() - this.animationProps.startTime;
-
-    if (this.timeline) {
-      this.timeline.update(this.animationProps.engineTime);
-    }
-
-    this.animationProps.tick = Math.floor(this.animationProps.time / 1000 * 60);
-    this.animationProps.tock++;
-    this.animationProps.time = this.timeline ? this.timeline.getTime() : this.animationProps.engineTime;
-  }
-
-  async _initDevice() {
-    var _this$device$canvasCo;
-
-    this.device = await this.props.device;
-
-    if (!this.device) {
-      throw new Error('No device provided');
-    }
-
-    this.canvas = ((_this$device$canvasCo = this.device.canvasContext) === null || _this$device$canvasCo === void 0 ? void 0 : _this$device$canvasCo.canvas) || null;
-  }
-
-  _createInfoDiv() {
-    if (this.canvas && this.props.onAddHTML) {
-      const wrapperDiv = document.createElement('div');
-      document.body.appendChild(wrapperDiv);
-      wrapperDiv.style.position = 'relative';
-      const div = document.createElement('div');
-      div.style.position = 'absolute';
-      div.style.left = '10px';
-      div.style.bottom = '10px';
-      div.style.width = '300px';
-      div.style.background = 'white';
-
-      if (this.canvas instanceof HTMLCanvasElement) {
-        wrapperDiv.appendChild(this.canvas);
-      }
-
-      wrapperDiv.appendChild(div);
-      const html = this.props.onAddHTML(div);
-
-      if (html) {
-        div.innerHTML = html;
-      }
-    }
-  }
-
-  _getSizeAndAspect() {
-    var _this$device3, _this$device3$canvasC, _this$device4, _this$device4$canvasC;
-
-    if (!this.device) {
-      return {
-        width: 1,
-        height: 1,
-        aspect: 1
-      };
-    }
-
-    const [width, height] = ((_this$device3 = this.device) === null || _this$device3 === void 0 ? void 0 : (_this$device3$canvasC = _this$device3.canvasContext) === null || _this$device3$canvasC === void 0 ? void 0 : _this$device3$canvasC.getPixelSize()) || [1, 1];
-    let aspect = 1;
-    const canvas = (_this$device4 = this.device) === null || _this$device4 === void 0 ? void 0 : (_this$device4$canvasC = _this$device4.canvasContext) === null || _this$device4$canvasC === void 0 ? void 0 : _this$device4$canvasC.canvas;
-
-    if (canvas && canvas.clientHeight) {
-      aspect = canvas.clientWidth / canvas.clientHeight;
-    } else if (width > 0 && height > 0) {
-      aspect = width / height;
-    }
-
-    return {
-      width,
-      height,
-      aspect
-    };
-  }
-
-  _resizeViewport() {
-    if (this.props.autoResizeViewport && this.device.gl) {
-      this.device.gl.viewport(0, 0, this.device.gl.drawingBufferWidth, this.device.gl.drawingBufferHeight);
-    }
-  }
-
-  _resizeCanvasDrawingBuffer() {
-    if (this.props.autoResizeDrawingBuffer) {
-      var _this$device5, _this$device5$canvasC;
-
-      (_this$device5 = this.device) === null || _this$device5 === void 0 ? void 0 : (_this$device5$canvasC = _this$device5.canvasContext) === null || _this$device5$canvasC === void 0 ? void 0 : _this$device5$canvasC.resize({
-        useDevicePixels: this.props.useDevicePixels
-      });
-    }
-  }
-
-  _beginTimers() {
-    this.frameRate.timeEnd();
-    this.frameRate.timeStart();
-  }
-
-  _endTimers() {
-    this.cpuTime.timeEnd();
-  }
-
-  _startEventHandling() {
-    if (this.canvas) {
-      this.canvas.addEventListener('mousemove', this._onMousemove);
-      this.canvas.addEventListener('mouseleave', this._onMouseleave);
-    }
-  }
-
-  _onMousemove(event) {
-    if (event instanceof MouseEvent) {
-      this._getAnimationProps()._mousePosition = [event.offsetX, event.offsetY];
-    }
-  }
-
-  _onMouseleave(event) {
-    this._getAnimationProps()._mousePosition = null;
-  }
-
+    }
+    // Called on each frame, can be overridden to call onRender multiple times
+    // to support e.g. stereoscopic rendering
+    _renderFrame(animationProps) {
+        // Allow e.g. VR display to render multiple frames.
+        if (this.display) {
+            this.display._renderFrame(animationProps);
+            return;
+        }
+        // call callback
+        this.props.onRender(this._getAnimationProps());
+        // end callback
+    }
+    _clearNeedsRedraw() {
+        this.needsRedraw = false;
+    }
+    _setupFrame() {
+        this._resizeCanvasDrawingBuffer();
+        this._resizeViewport();
+    }
+    // Initialize the  object that will be passed to app callbacks
+    _initializeAnimationProps() {
+        if (!this.device) {
+            throw new Error('loop');
+        }
+        this.animationProps = {
+            animationLoop: this,
+            device: this.device,
+            canvas: this.device?.canvasContext?.canvas,
+            timeline: this.timeline,
+            // Initial values
+            useDevicePixels: this.props.useDevicePixels,
+            needsRedraw: false,
+            // Placeholders
+            width: 1,
+            height: 1,
+            aspect: 1,
+            // Animation props
+            time: 0,
+            startTime: Date.now(),
+            engineTime: 0,
+            tick: 0,
+            tock: 0,
+            // Experimental
+            _mousePosition: null // Event props
+        };
+    }
+    _getAnimationProps() {
+        if (!this.animationProps) {
+            throw new Error('animationProps');
+        }
+        return this.animationProps;
+    }
+    // Update the context object that will be passed to app callbacks
+    _updateAnimationProps() {
+        if (!this.animationProps) {
+            return;
+        }
+        const { width, height, aspect } = this._getSizeAndAspect();
+        if (width !== this.animationProps.width || height !== this.animationProps.height) {
+            this.setNeedsRedraw('drawing buffer resized');
+        }
+        if (aspect !== this.animationProps.aspect) {
+            this.setNeedsRedraw('drawing buffer aspect changed');
+        }
+        this.animationProps.width = width;
+        this.animationProps.height = height;
+        this.animationProps.aspect = aspect;
+        this.animationProps.needsRedraw = this.needsRedraw;
+        // Update time properties
+        this.animationProps.engineTime = Date.now() - this.animationProps.startTime;
+        if (this.timeline) {
+            this.timeline.update(this.animationProps.engineTime);
+        }
+        this.animationProps.tick = Math.floor((this.animationProps.time / 1000) * 60);
+        this.animationProps.tock++;
+        // For back compatibility
+        this.animationProps.time = this.timeline
+            ? this.timeline.getTime()
+            : this.animationProps.engineTime;
+    }
+    /** Wait for supplied device */
+    async _initDevice() {
+        this.device = await this.props.device;
+        if (!this.device) {
+            throw new Error('No device provided');
+        }
+        this.canvas = this.device.canvasContext?.canvas || null;
+        // this._createInfoDiv();
+    }
+    _createInfoDiv() {
+        if (this.canvas && this.props.onAddHTML) {
+            const wrapperDiv = document.createElement('div');
+            document.body.appendChild(wrapperDiv);
+            wrapperDiv.style.position = 'relative';
+            const div = document.createElement('div');
+            div.style.position = 'absolute';
+            div.style.left = '10px';
+            div.style.bottom = '10px';
+            div.style.width = '300px';
+            div.style.background = 'white';
+            if (this.canvas instanceof HTMLCanvasElement) {
+                wrapperDiv.appendChild(this.canvas);
+            }
+            wrapperDiv.appendChild(div);
+            const html = this.props.onAddHTML(div);
+            if (html) {
+                div.innerHTML = html;
+            }
+        }
+    }
+    _getSizeAndAspect() {
+        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?.canvasContext?.getPixelSize() || [1, 1];
+        // https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html
+        let aspect = 1;
+        const canvas = this.device?.canvasContext?.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;
+        }
+        return { width, height, aspect };
+    }
+    /** Default viewport setup */
+    _resizeViewport() {
+        // @ts-expect-error Expose on canvasContext
+        if (this.props.autoResizeViewport && this.device.gl) {
+            // @ts-expect-error Expose canvasContext
+            this.device.gl.viewport(0, 0, this.device.gl.drawingBufferWidth, this.device.gl.drawingBufferHeight);
+        }
+    }
+    /**
+     * Resize the render buffer of the canvas to match canvas client size
+     * Optionally multiplying with devicePixel ratio
+     */
+    _resizeCanvasDrawingBuffer() {
+        if (this.props.autoResizeDrawingBuffer) {
+            this.device?.canvasContext?.resize({ useDevicePixels: this.props.useDevicePixels });
+        }
+    }
+    _beginTimers() {
+        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());
+        // }
+        // if (this._gpuTimeQuery) {
+        //   // GPU time query start
+        //   this._gpuTimeQuery.beginTimeElapsedQuery();
+        // }
+        // this.cpuTime.timeStart();
+    }
+    _endTimers() {
+        this.cpuTime.timeEnd();
+        // if (this._gpuTimeQuery) {
+        //   // GPU time query end. Results will be available on next frame.
+        //   this._gpuTimeQuery.end();
+        // }
+    }
+    // Event handling
+    _startEventHandling() {
+        if (this.canvas) {
+            this.canvas.addEventListener('mousemove', this._onMousemove);
+            this.canvas.addEventListener('mouseleave', this._onMouseleave);
+        }
+    }
+    _onMousemove(event) {
+        if (event instanceof MouseEvent) {
+            this._getAnimationProps()._mousePosition = [event.offsetX, event.offsetY];
+        }
+    }
+    _onMouseleave(event) {
+        this._getAnimationProps()._mousePosition = null;
+    }
 }
-//# sourceMappingURL=animation-loop.js.map