@luma.gl/engine 8.6.0-alpha.5 → 9.0.0-alpha.10

package/dist/lib/animation-loop.d.ts

@@ -1,95 +1,51 @@
 /// <reference types="offscreencanvas" />
-import { Device } from '@luma.gl/api';
-import type { WebGLDeviceProps } from '@luma.gl/webgl';
-import { Query, Framebuffer } from '@luma.gl/webgl';
-import { Stats, Stat } from '@probe.gl/stats';
+import { Device, DeviceProps } from '@luma.gl/api';
 import { Timeline } from '../animation/timeline';
-declare type DeviceProps = WebGLDeviceProps;
-declare type ContextProps = WebGLDeviceProps;
+import { AnimationProps } from '../lib/animation-props';
+import { Stats, Stat } from '@probe.gl/stats';
 /** AnimationLoop properties */
 export declare type AnimationLoopProps = {
-    onCreateDevice?: (props: DeviceProps) => Device;
-    onCreateContext?: (props: ContextProps) => WebGLRenderingContext;
+    onCreateDevice?: (props: DeviceProps) => Promise<Device>;
     onAddHTML?: (div: HTMLDivElement) => string;
-    onInitialize?: (animationProps: AnimationProps) => {} | void;
+    onInitialize?: (animationProps: AnimationProps) => void;
     onRender?: (animationProps: AnimationProps) => void;
     onFinalize?: (animationProps: AnimationProps) => void;
-    onError?: (reason: any) => void;
+    onError?: (reason: Error) => void;
+    device?: Device | null;
+    deviceProps?: DeviceProps;
     stats?: Stats;
-    device?: Device;
-    glOptions?: ContextProps;
     debug?: boolean;
     autoResizeViewport?: boolean;
     autoResizeDrawingBuffer?: boolean;
     useDevicePixels?: number | boolean;
-    /** @deprecated Use .device */
-    gl?: WebGLRenderingContext;
-    /** @deprecated Will be removed */
-    createFramebuffer?: boolean;
-};
-export declare type AnimationProps = {
-    device: Device;
-    stop: () => AnimationLoop;
-    canvas: HTMLCanvasElement | OffscreenCanvas;
-    useDevicePixels: number | boolean;
-    needsRedraw?: string;
-    startTime: number;
-    engineTime: number;
-    tick: number;
-    tock: number;
-    time: number;
-    width: number;
-    height: number;
-    aspect: number;
-    timeline: Timeline;
-    animationLoop: AnimationLoop;
-    _mousePosition?: [number, number];
-    /** @deprecated Will be removed, create your own Framebuffer */
-    framebuffer: Framebuffer;
-    /** @deprecated Use .device */
-    gl: WebGLRenderingContext;
-    /** @deprecated Use .timeline */
-    _timeline: Timeline;
-    /** @deprecated Use .animationLoop */
-    _loop: AnimationLoop;
-    /** @deprecated Use .animationLoop */
-    _animationLoop: AnimationLoop;
 };
 /** Convenient animation loop */
-export default class AnimationLoop {
-    device: Device;
-    canvas: HTMLCanvasElement | OffscreenCanvas;
+export declare class AnimationLoop {
+    device: Device | null;
+    canvas: HTMLCanvasElement | OffscreenCanvas | null;
     props: Required<AnimationLoopProps>;
-    animationProps: AnimationProps;
-    framebuffer: Framebuffer;
-    timeline: Timeline;
+    animationProps: AnimationProps | null;
+    timeline: Timeline | null;
     stats: Stats;
     cpuTime: Stat;
     gpuTime: Stat;
     frameRate: Stat;
     display: any;
-    needsRedraw: string | null;
+    needsRedraw: string | false;
     _initialized: boolean;
     _running: boolean;
     _animationFrameId: any;
-    _pageLoadPromise: Promise<{}> | null;
     _nextFramePromise: Promise<AnimationLoop> | null;
     _resolveNextFrame: ((AnimationLoop: any) => void) | null;
     _cpuStartTime: number;
-    _gpuTimeQuery: Query | null;
-    /** @deprecated */
-    gl: WebGLRenderingContext;
     constructor(props?: AnimationLoopProps);
     destroy(): void;
     /** @deprecated Use .destroy() */
     delete(): void;
     setNeedsRedraw(reason: string): this;
     setProps(props: AnimationLoopProps): this;
-    start(opts?: {}): this;
-    /** Starts a render loop if not already running
-     * @param {Object} context - contains frame specific info (E.g. tick, width, height, etc)
-     */
-    _start(opts: any): Promise<this>;
+    /** Starts a render loop if not already running */
+    start(): Promise<this | null>;
     /** Explicitly draw a frame */
     redraw(): this;
     stop(): this;
@@ -97,17 +53,7 @@ export default class AnimationLoop {
     detachTimeline(): void;
     waitForRender(): Promise<AnimationLoop>;
     toDataURL(): Promise<string>;
-    isContextLost(): boolean;
-    onCreateDevice(deviceProps: DeviceProps): Device;
-    onInitialize(animationProps: AnimationProps): {} | void;
-    onRender(animationProps: AnimationProps): void;
-    onFinalize(animationProps: AnimationProps): void;
-    /** @deprecated Use .onCreateDevice() */
-    onCreateContext(props: ContextProps): WebGLRenderingContext;
-    /** @deprecated */
-    getHTMLControlValue(id: any, defaultValue?: number): number;
-    _initialize(props: AnimationLoopProps): void;
-    _getPageLoadPromise(): Promise<{}>;
+    _initialize(): void;
     _setDisplay(display: any): void;
     _requestAnimationFrame(): void;
     _cancelAnimationFrame(): void;
@@ -115,13 +61,11 @@ export default class AnimationLoop {
     _renderFrame(props: AnimationProps): void;
     _clearNeedsRedraw(): void;
     _setupFrame(): void;
-    _initializeCallbackData(): void;
-    _updateCallbackData(): void;
-    _finalizeCallbackData(): void;
-    /** Add application's data to the app context object */
-    _addCallbackData(appContext: any): void;
+    _initializeAnimationProps(): void;
+    _getAnimationProps(): AnimationProps;
+    _updateAnimationProps(): void;
     /** Either uses supplied or existing context, or calls provided callback to create one */
-    _createDevice(props: DeviceProps): void;
+    _createDevice(): Promise<void>;
     _createInfoDiv(): void;
     _getSizeAndAspect(): {
         width: number;
@@ -138,12 +82,7 @@ export default class AnimationLoop {
     _beginTimers(): void;
     _endTimers(): void;
     _startEventHandling(): void;
-    _onMousemove(e: any): void;
-    _onMouseleave(e: any): void;
-    /** @deprecated */
-    _createFramebuffer(): void;
-    /** @deprecated */
-    _resizeFramebuffer(): void;
+    _onMousemove(event: Event): void;
+    _onMouseleave(event: Event): void;
 }
-export {};
 //# sourceMappingURL=animation-loop.d.ts.map

package/dist/lib/animation-loop.d.ts.map

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

package/dist/lib/animation-loop.js

@@ -1,40 +1,34 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { luma } from '@luma.gl/api';
-import { lumaStats, log } from '@luma.gl/api';
-import { isWebGL, resetParameters } from '@luma.gl/webgl';
-import { requestAnimationFrame, cancelAnimationFrame, Query, Framebuffer } from '@luma.gl/webgl';
+import { requestAnimationFrame, cancelAnimationFrame } from '@luma.gl/api';
+import { Stats } from '@probe.gl/stats';
 import { isBrowser } from '@probe.gl/env';
 const isPage = isBrowser() && typeof document !== 'undefined';
 let statIdCounter = 0;
 const DEFAULT_ANIMATION_LOOP_PROPS = {
   onCreateDevice: props => luma.createDevice(props),
-  onCreateContext: null,
-  onAddHTML: null,
+  onAddHTML: () => '',
   onInitialize: () => ({}),
   onRender: () => {},
   onFinalize: () => {},
   onError: error => console.error(error),
   device: null,
+  deviceProps: {},
   debug: false,
+  stats: luma.stats.get("animation-loop-".concat(statIdCounter++)),
   useDevicePixels: true,
   autoResizeViewport: true,
-  autoResizeDrawingBuffer: true,
-  stats: lumaStats.get("animation-loop-".concat(statIdCounter++)),
-  gl: null,
-  glOptions: {},
-  createFramebuffer: false
+  autoResizeDrawingBuffer: true
 };
-export default class AnimationLoop {
+export class AnimationLoop {
   constructor(props = {}) {
-    _defineProperty(this, "device", void 0);
+    _defineProperty(this, "device", null);
 
-    _defineProperty(this, "canvas", void 0);
+    _defineProperty(this, "canvas", null);
 
     _defineProperty(this, "props", void 0);
 
-    _defineProperty(this, "animationProps", void 0);
-
-    _defineProperty(this, "framebuffer", null);
+    _defineProperty(this, "animationProps", null);
 
     _defineProperty(this, "timeline", null);
 
@@ -56,18 +50,12 @@ export default class AnimationLoop {
 
     _defineProperty(this, "_animationFrameId", null);
 
-    _defineProperty(this, "_pageLoadPromise", null);
-
     _defineProperty(this, "_nextFramePromise", null);
 
     _defineProperty(this, "_resolveNextFrame", null);
 
     _defineProperty(this, "_cpuStartTime", 0);
 
-    _defineProperty(this, "_gpuTimeQuery", null);
-
-    _defineProperty(this, "gl", void 0);
-
     this.props = { ...DEFAULT_ANIMATION_LOOP_PROPS,
       ...props
     };
@@ -75,15 +63,11 @@ export default class AnimationLoop {
     let {
       useDevicePixels = true
     } = this.props;
-
-    if ('useDevicePixelRatio' in props) {
-      log.deprecated('useDevicePixelRatio', 'useDevicePixels')();
-      useDevicePixels = props.useDevicePixelRatio;
-    }
-
-    this.device = props.device;
+    this.device = props.device || null;
     this.gl = this.device && this.device.gl || props.gl;
-    this.stats = props.stats;
+    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');
@@ -115,27 +99,21 @@ export default class AnimationLoop {
 
   setProps(props) {
     if ('autoResizeViewport' in props) {
-      this.props.autoResizeViewport = props.autoResizeViewport;
+      this.props.autoResizeViewport = props.autoResizeViewport || false;
     }
 
     if ('autoResizeDrawingBuffer' in props) {
-      this.props.autoResizeDrawingBuffer = props.autoResizeDrawingBuffer;
+      this.props.autoResizeDrawingBuffer = props.autoResizeDrawingBuffer || false;
     }
 
     if ('useDevicePixels' in props) {
-      this.props.useDevicePixels = props.useDevicePixels;
+      this.props.useDevicePixels = props.useDevicePixels || false;
     }
 
     return this;
   }
 
-  start(opts = {}) {
-    this._start(opts);
-
-    return this;
-  }
-
-  async _start(opts) {
+  async start() {
     if (this._running) {
       return this;
     }
@@ -143,8 +121,6 @@ export default class AnimationLoop {
     this._running = true;
 
     try {
-      await this._getPageLoadPromise();
-
       if (!this._running) {
         return null;
       }
@@ -153,12 +129,11 @@ export default class AnimationLoop {
 
       if (!this._initialized) {
         this._initialized = true;
+        await this._createDevice();
 
-        this._initialize(opts);
-
-        appContext = await this.onInitialize(this.animationProps);
+        this._initialize();
 
-        this._addCallbackData(appContext || {});
+        await this.props.onInitialize(this._getAnimationProps());
       }
 
       if (!this._running) {
@@ -172,14 +147,17 @@ export default class AnimationLoop {
       }
 
       return this;
-    } catch (error) {
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Unknown error');
       this.props.onError(error);
-      return null;
+      throw error;
     }
   }
 
   redraw() {
-    if (this.isContextLost()) {
+    var _this$device;
+
+    if ((_this$device = this.device) !== null && _this$device !== void 0 && _this$device.isLost) {
       return this;
     }
 
@@ -187,9 +165,9 @@ export default class AnimationLoop {
 
     this._setupFrame();
 
-    this._updateCallbackData();
+    this._updateAnimationProps();
 
-    this._renderFrame(this.animationProps);
+    this._renderFrame(this._getAnimationProps());
 
     this._clearNeedsRedraw();
 
@@ -207,7 +185,9 @@ export default class AnimationLoop {
 
   stop() {
     if (this._running) {
-      this._finalizeCallbackData();
+      if (this.animationProps) {
+        this.props.onFinalize(this.animationProps);
+      }
 
       this._cancelAnimationFrame();
 
@@ -243,71 +223,24 @@ export default class AnimationLoop {
   async toDataURL() {
     this.setNeedsRedraw('toDataURL');
     await this.waitForRender();
-    return this.gl.canvas.toDataURL();
-  }
-
-  isContextLost() {
-    return this.gl.isContextLost();
-  }
-
-  onCreateDevice(deviceProps) {
-    return this.props.onCreateDevice(deviceProps);
-  }
 
-  onInitialize(animationProps) {
-    return this.props.onInitialize(animationProps);
-  }
-
-  onRender(animationProps) {
-    return this.props.onRender(animationProps);
-  }
-
-  onFinalize(animationProps) {
-    return this.props.onFinalize(animationProps);
-  }
-
-  onCreateContext(props) {
-    return this.props.onCreateContext(props);
-  }
+    if (this.canvas instanceof HTMLCanvasElement) {
+      return this.canvas.toDataURL();
+    }
 
-  getHTMLControlValue(id, defaultValue = 1) {
-    const element = document.getElementById(id);
-    return element ? Number(element.value) : defaultValue;
+    throw new Error('OffscreenCanvas');
   }
 
-  _initialize(props) {
-    this._createDevice(props);
-
-    this._createFramebuffer();
-
+  _initialize() {
     this._startEventHandling();
 
-    this._initializeCallbackData();
+    this._initializeAnimationProps();
 
-    this._updateCallbackData();
+    this._updateAnimationProps();
 
     this._resizeCanvasDrawingBuffer();
 
     this._resizeViewport();
-
-    this._gpuTimeQuery = Query.isSupported(this.gl, ['timers']) ? new Query(this.gl) : null;
-  }
-
-  _getPageLoadPromise() {
-    if (!this._pageLoadPromise) {
-      this._pageLoadPromise = isPage ? new Promise((resolve, reject) => {
-        if (isPage && document.readyState === 'complete') {
-          resolve(document);
-          return;
-        }
-
-        window.addEventListener('load', () => {
-          resolve(document);
-        });
-      }) : Promise.resolve({});
-    }
-
-    return this._pageLoadPromise;
   }
 
   _setDisplay(display) {
@@ -357,45 +290,58 @@ export default class AnimationLoop {
       return;
     }
 
-    this.onRender(props);
+    this.props.onRender(props);
   }
 
   _clearNeedsRedraw() {
-    this.needsRedraw = null;
+    this.needsRedraw = false;
   }
 
   _setupFrame() {
     this._resizeCanvasDrawingBuffer();
 
     this._resizeViewport();
-
-    this._resizeFramebuffer();
   }
 
-  _initializeCallbackData() {
+  _initializeAnimationProps() {
+    var _this$device2, _this$device2$canvasC;
+
+    if (!this.device) {
+      throw new Error('loop');
+    }
+
     this.animationProps = {
+      animationLoop: this,
       device: this.device,
-      gl: this.gl,
-      stop: this.stop,
-      canvas: this.gl.canvas,
+      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: null,
+      needsRedraw: false,
+      width: 1,
+      height: 1,
+      aspect: 1,
+      time: 0,
       startTime: Date.now(),
       engineTime: 0,
       tick: 0,
       tock: 0,
-      timeline: this.timeline,
-      animationLoop: this,
-      time: 0,
-      _mousePosition: null,
-      framebuffer: this.framebuffer,
-      _timeline: this.timeline,
-      _loop: this,
-      _animationLoop: this
+      _mousePosition: null
     };
   }
 
-  _updateCallbackData() {
+  _getAnimationProps() {
+    if (!this.animationProps) {
+      throw new Error('animationProps');
+    }
+
+    return this.animationProps;
+  }
+
+  _updateAnimationProps() {
+    if (!this.animationProps) {
+      return;
+    }
+
     const {
       width,
       height,
@@ -425,35 +371,20 @@ export default class AnimationLoop {
     this.animationProps.time = this.timeline ? this.timeline.getTime() : this.animationProps.engineTime;
   }
 
-  _finalizeCallbackData() {
-    this.onFinalize(this.animationProps);
-  }
-
-  _addCallbackData(appContext) {
-    if (typeof appContext === 'object' && appContext !== null) {
-      this.animationProps = Object.assign({}, this.animationProps, appContext);
-    }
-  }
+  async _createDevice() {
+    var _this$device$canvasCo;
 
-  _createDevice(props) {
     const deviceProps = { ...this.props,
-      ...props,
-      ...this.props.glOptions
+      ...this.props.deviceProps
     };
-    this.device = this.onCreateDevice(deviceProps);
-    this.gl = this.device.gl;
-
-    if (!isWebGL(this.gl)) {
-      throw new Error('AnimationLoop.onCreateContext - illegal context returned');
-    }
-
-    resetParameters(this.gl);
+    this.device = await this.props.onCreateDevice(deviceProps);
+    this.canvas = (_this$device$canvasCo = this.device.canvasContext) === null || _this$device$canvasCo === void 0 ? void 0 : _this$device$canvasCo.canvas;
 
     this._createInfoDiv();
   }
 
   _createInfoDiv() {
-    if (this.gl.canvas && this.props.onAddHTML) {
+    if (this.canvas && this.props.onAddHTML) {
       const wrapperDiv = document.createElement('div');
       document.body.appendChild(wrapperDiv);
       wrapperDiv.style.position = 'relative';
@@ -463,7 +394,11 @@ export default class AnimationLoop {
       div.style.bottom = '10px';
       div.style.width = '300px';
       div.style.background = 'white';
-      wrapperDiv.appendChild(this.gl.canvas);
+
+      if (this.canvas instanceof HTMLCanvasElement) {
+        wrapperDiv.appendChild(this.canvas);
+      }
+
       wrapperDiv.appendChild(div);
       const html = this.props.onAddHTML(div);
 
@@ -474,12 +409,19 @@ export default class AnimationLoop {
   }
 
   _getSizeAndAspect() {
-    const width = this.gl.drawingBufferWidth;
-    const height = this.gl.drawingBufferHeight;
+    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.gl;
+    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;
@@ -495,14 +437,16 @@ export default class AnimationLoop {
   }
 
   _resizeViewport() {
-    if (this.props.autoResizeViewport) {
-      this.gl.viewport(0, 0, this.gl.drawingBufferWidth, this.gl.drawingBufferHeight);
+    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) {
-      this.device.resize({
+      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
       });
     }
@@ -511,58 +455,27 @@ export default class AnimationLoop {
   _beginTimers() {
     this.frameRate.timeEnd();
     this.frameRate.timeStart();
-
-    if (this._gpuTimeQuery && this._gpuTimeQuery.isResultAvailable() && !this._gpuTimeQuery.isTimerDisjoint()) {
-      this.stats.get('GPU Time').addTime(this._gpuTimeQuery.getTimerMilliseconds());
-    }
-
-    if (this._gpuTimeQuery) {
-      this._gpuTimeQuery.beginTimeElapsedQuery();
-    }
-
-    this.cpuTime.timeStart();
   }
 
   _endTimers() {
     this.cpuTime.timeEnd();
-
-    if (this._gpuTimeQuery) {
-      this._gpuTimeQuery.end();
-    }
   }
 
   _startEventHandling() {
-    const {
-      canvas
-    } = this.gl;
-
-    if (canvas) {
-      canvas.addEventListener('mousemove', this._onMousemove);
-      canvas.addEventListener('mouseleave', this._onMouseleave);
+    if (this.canvas) {
+      this.canvas.addEventListener('mousemove', this._onMousemove);
+      this.canvas.addEventListener('mouseleave', this._onMouseleave);
     }
   }
 
-  _onMousemove(e) {
-    this.animationProps._mousePosition = [e.offsetX, e.offsetY];
-  }
-
-  _onMouseleave(e) {
-    this.animationProps._mousePosition = null;
-  }
-
-  _createFramebuffer() {
-    if (this.props.createFramebuffer) {
-      this.framebuffer = new Framebuffer(this.gl);
+  _onMousemove(event) {
+    if (event instanceof MouseEvent) {
+      this._getAnimationProps()._mousePosition = [event.offsetX, event.offsetY];
     }
   }
 
-  _resizeFramebuffer() {
-    if (this.framebuffer) {
-      this.framebuffer.resize({
-        width: this.gl.drawingBufferWidth,
-        height: this.gl.drawingBufferHeight
-      });
-    }
+  _onMouseleave(event) {
+    this._getAnimationProps()._mousePosition = null;
   }
 
 }