@luma.gl/engine 9.0.0-beta.1 → 9.0.0-beta.10

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

@@ -1,365 +1,442 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 import { luma } from '@luma.gl/core';
 import { requestAnimationFrame, cancelAnimationFrame } from '@luma.gl/core';
 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-${statIdCounter++}`),
-  useDevicePixels: true,
-  autoResizeViewport: false,
-  autoResizeDrawingBuffer: false
+    device: null,
+    onAddHTML: () => '',
+    onInitialize: async () => {
+        return null;
+    },
+    onRender: () => { },
+    onFinalize: () => { },
+    onError: error => console.error(error), // eslint-disable-line no-console
+    stats: luma.stats.get(`animation-loop-${statIdCounter++}`),
+    // view parameters
+    useDevicePixels: true,
+    autoResizeViewport: false,
+    autoResizeDrawingBuffer: false
 };
+/** Convenient animation loop */
 export class AnimationLoop {
-  constructor(props) {
-    this.device = null;
-    this.canvas = null;
-    this.props = void 0;
-    this.animationProps = null;
-    this.timeline = null;
-    this.stats = void 0;
-    this.cpuTime = void 0;
-    this.gpuTime = void 0;
-    this.frameRate = void 0;
-    this.display = void 0;
-    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');
-    }
-    const {
-      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 {
-      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();
+    device = null;
+    canvas = null;
+    props;
+    animationProps = null;
+    timeline = null;
+    stats;
+    cpuTime;
+    gpuTime;
+    frameRate;
+    display;
+    needsRedraw = 'initialized';
+    _initialized = false;
+    _running = false;
+    _animationFrameId = null;
+    _nextFramePromise = null;
+    _resolveNextFrame = null;
+    _cpuStartTime = 0;
+    // _gpuTimeQuery: Query | null = null;
+    /*
+     * @param {HTMLCanvasElement} canvas - if provided, width and height will be passed to context
+     */
+    constructor(props) {
+        this.props = { ...DEFAULT_ANIMATION_LOOP_PROPS, ...props };
+        props = this.props;
+        if (!props.device) {
+            throw new Error('No device provided');
+        }
+        const { 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();
+    }
+    /** Flags this animation loop as needing redraw */
+    setNeedsRedraw(reason) {
+        this.needsRedraw = this.needsRedraw || reason;
+        return this;
+    }
+    /** TODO - move these props 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 {
+            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;
+        }
+    }
+    /** 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;
+    }
+    /** Explicitly draw a frame */
+    redraw() {
+        if (this.device?.isLost) {
+            return this;
+        }
+        this._beginFrameTimers();
+        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._endFrameTimers();
+        return this;
+    }
+    /** Add a timeline, it will be automatically updated by the animation loop. */
+    attachTimeline(timeline) {
+        this.timeline = timeline;
+        return this.timeline;
+    }
+    /** Remove a timeline */
+    detachTimeline() {
+        this.timeline = null;
+    }
+    /** Wait until a render completes */
+    waitForRender() {
+        this.setNeedsRedraw('waitForRender');
+        if (!this._nextFramePromise) {
+            this._nextFramePromise = new Promise(resolve => {
+                this._resolveNextFrame = resolve;
+            });
+        }
+        return this._nextFramePromise;
+    }
+    /** TODO - should use device.deviceContext */
+    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.destroy();
+            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;
-    }
-  }
-  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;
-  }
-  redraw() {
-    var _this$device;
-    if ((_this$device = this.device) !== null && _this$device !== void 0 && _this$device.isLost) {
-      return this;
-    }
-    this._beginFrameTimers();
-    this._setupFrame();
-    this._updateAnimationProps();
-    this._renderFrame(this._getAnimationProps());
-    this._clearNeedsRedraw();
-    if (this._resolveNextFrame) {
-      this._resolveNextFrame(this);
-      this._nextFramePromise = null;
-      this._resolveNextFrame = null;
-    }
-    this._endFrameTimers();
-    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.destroy();
-      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());
-    this.device.submit();
-  }
-  _clearNeedsRedraw() {
-    this.needsRedraw = false;
-  }
-  _setupFrame() {
-    this._resizeCanvasDrawingBuffer();
-    this._resizeViewport();
-  }
-  _initializeAnimationProps() {
-    var _this$device2;
-    if (!this.device) {
-      throw new Error('loop');
-    }
-    this.animationProps = {
-      animationLoop: this,
-      device: this.device,
-      canvas: (_this$device2 = this.device) === null || _this$device2 === void 0 || (_this$device2 = _this$device2.canvasContext) === null || _this$device2 === void 0 ? void 0 : _this$device2.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$device4;
-    if (!this.device) {
-      return {
-        width: 1,
-        height: 1,
-        aspect: 1
-      };
-    }
-    const [width, height] = ((_this$device3 = this.device) === null || _this$device3 === void 0 || (_this$device3 = _this$device3.canvasContext) === null || _this$device3 === void 0 ? void 0 : _this$device3.getPixelSize()) || [1, 1];
-    let aspect = 1;
-    const canvas = (_this$device4 = this.device) === null || _this$device4 === void 0 || (_this$device4 = _this$device4.canvasContext) === null || _this$device4 === void 0 ? void 0 : _this$device4.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 = this.device) === null || _this$device5 === void 0 || (_this$device5 = _this$device5.canvasContext) === null || _this$device5 === void 0 ? void 0 : _this$device5.resize({
-        useDevicePixels: this.props.useDevicePixels
-      });
-    }
-  }
-  _beginFrameTimers() {
-    this.frameRate.timeEnd();
-    this.frameRate.timeStart();
-    this.cpuTime.timeStart();
-  }
-  _endFrameTimers() {
-    this.cpuTime.timeEnd();
-  }
-  _startEventHandling() {
-    if (this.canvas) {
-      this.canvas.addEventListener('mousemove', this._onMousemove.bind(this));
-      this.canvas.addEventListener('mouseleave', this._onMouseleave.bind(this));
-    }
-  }
-  _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
+        // Submit commands (necessary on WebGPU)
+        this.device.submit();
+    }
+    _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;
+        }
+        // Can this be replaced with canvas context?
+        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() {
+        // TODO can we use canvas context to code this in a portable way?
+        // @ts-expect-error Expose on canvasContext
+        if (this.props.autoResizeViewport && this.device.gl) {
+            // @ts-expect-error Expose canvasContext
+            this.device.gl.viewport(0, 0, 
+            // @ts-expect-error Expose canvasContext
+            this.device.gl.drawingBufferWidth, 
+            // @ts-expect-error Expose canvasContext
+            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 });
+        }
+    }
+    _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());
+        // }
+        // if (this._gpuTimeQuery) {
+        //   // GPU time query start
+        //   this._gpuTimeQuery.beginTimeElapsedQuery();
+        // }
+        this.cpuTime.timeStart();
+    }
+    _endFrameTimers() {
+        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.bind(this));
+            this.canvas.addEventListener('mouseleave', this._onMouseleave.bind(this));
+        }
+    }
+    _onMousemove(event) {
+        if (event instanceof MouseEvent) {
+            this._getAnimationProps()._mousePosition = [event.offsetX, event.offsetY];
+        }
+    }
+    _onMouseleave(event) {
+        this._getAnimationProps()._mousePosition = null;
+    }
 }
-//# sourceMappingURL=animation-loop.js.map