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

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

@@ -1,423 +1,367 @@
-// luma.gl, MIT license
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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-${statIdCounter++}`),
-    // view parameters
-    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-".concat(statIdCounter++)),
+  useDevicePixels: true,
+  autoResizeViewport: false,
+  autoResizeDrawingBuffer: false
 };
-/** Convenient animation loop */
 export class AnimationLoop {
-    // _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();
+  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');
+    }
+    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 {
+      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();
         this._requestAnimationFrame();
-    }
-    // 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;
-    }
+      }
+      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.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