chore: Fix more tests (#7484)

modules/aggregation-layers/src/heatmap-layer/heatmap-layer-utils.ts

@@ -80,11 +80,17 @@ export function getTextureCoordinates(point: number[], bounds: number[]) {
 }
 
 // Returns format and type for creating texture objects
-export function getTextureParams({device: Device, floatTargetSupport}) {
+export function getTextureParams({
+  device,
+  floatTargetSupport
+}: {
+  device: Device;
+  floatTargetSupport?: boolean;
+}) {
   return floatTargetSupport
     ? {
         // format:  should be RGBA32F on WebGL2 (float textures), RGBA in WebGL1 for float or non float textures
-        format: device.isWebGL2 ? GL.RGBA32F : GL.RGBA,
+        format: device.info.type === 'webgl2' ? GL.RGBA32F : GL.RGBA,
         type: GL.FLOAT
       }
     : {

modules/aggregation-layers/src/utils/gpu-grid-aggregation/gpu-grid-aggregator.ts

@@ -164,7 +164,8 @@ export default class GPUGridAggregator {
     this.device = device;
 
     // gl_InstanceID usage in min/max calculation shaders
-    this._hasGPUSupport = this.device.info.type === 'webgl2' &&
+    this._hasGPUSupport =
+      this.device.info.type === 'webgl2' &&
       hasFeatures(this.device, [
         FEATURES.BLEND_EQUATION_MINMAX, // set min/max blend modes
         FEATURES.COLOR_ATTACHMENT_RGBA32F, // render to float texture

modules/core/src/lib/attribute/data-column.ts

@@ -146,9 +146,10 @@ export default class DataColumn<Options, State> implements IShaderAttribute {
     if (doublePrecision) {
       bufferType = GL.FLOAT;
     } else if (!logicalType && opts.isIndexed) {
-
       bufferType =
-        device && hasFeature(device, FEATURES.ELEMENT_INDEX_UINT32) ? GL.UNSIGNED_INT : GL.UNSIGNED_SHORT;
+        device && hasFeature(device, FEATURES.ELEMENT_INDEX_UINT32)
+          ? GL.UNSIGNED_INT
+          : GL.UNSIGNED_SHORT;
     } else {
       bufferType = logicalType || GL.FLOAT;
     }

modules/core/src/lib/deck.ts

@@ -31,7 +31,7 @@ import typedArrayManager from '../utils/typed-array-manager';
 import {VERSION} from './init';
 
 import {getBrowser} from '@probe.gl/env';
-import {Device} from '@luma.gl/api';
+import {luma, Device, DeviceProps} from '@luma.gl/api';
 import {WebGLDevice} from '@luma.gl/webgl';
 import GL from '@luma.gl/constants';
 import {
@@ -132,9 +132,15 @@ export type DeckProps = {
    * Will be auto-created if not supplied.
    */
   canvas?: HTMLCanvasElement | string | null;
-  /** WebGL context. Will be auto-created if not supplied. */
+
+  /** luma.gl GPU device. A device will be auto-created if not supplied. */
+  device?: Device | null;
+  /** A device will be auto-created if not supplied using these props. */
+  deviceProps?: DeviceProps;
+
+  /** WebGL context @deprecated Use props.device */
   gl?: WebGLRenderingContext | null;
-  /** Additional options used when creating the WebGL context. */
+  /** Options used when creating a WebGL context. @deprecated Use props.deviceProps */
   glOptions?: WebGLContextAttributes;
 
   /**
@@ -238,10 +244,12 @@ const defaultProps = {
   initialViewState: null,
   pickingRadius: 0,
   layerFilter: null,
-  glOptions: {},
   parameters: {},
   parent: null,
+  device: null,
+  deviceProps: {},
   gl: null,
+  glOptions: {},
   canvas: null,
   layers: [],
   effects: [],
@@ -302,47 +310,59 @@ export default class Deck {
   protected deckPicker: DeckPicker | null = null;
   protected eventManager: EventManager | null = null;
   protected tooltip: Tooltip | null = null;
-  protected metrics: DeckMetrics;
   protected animationLoop: AnimationLoop;
-  protected stats: Stats;
 
   /** Internal view state if no callback is supplied */
   protected viewState: any;
-  protected cursorState: CursorState;
+  protected cursorState: CursorState = {
+    isHovering: false,
+    isDragging: false
+  };
 
-  private _needsRedraw: false | string;
+  protected stats = new Stats({id: 'deck.gl'});
+  protected metrics: DeckMetrics = {
+    fps: 0,
+    setPropsTime: 0,
+    updateAttributesTime: 0,
+    framesRedrawn: 0,
+    pickTime: 0,
+    pickCount: 0,
+    gpuTime: 0,
+    gpuTimePerFrame: 0,
+    cpuTime: 0,
+    cpuTimePerFrame: 0,
+    bufferMemory: 0,
+    textureMemory: 0,
+    renderbufferMemory: 0,
+    gpuMemory: 0
+  };
+  private _metricsCounter: number = 0;
+
+  private _needsRedraw: false | string = 'Initial render';
   private _pickRequest: {
     mode: string;
     event: MjolnirPointerEvent | null;
     x: number;
     y: number;
     radius: number;
+  } = {
+    mode: 'hover',
+    x: -1,
+    y: -1,
+    radius: 0,
+    event: null
   };
+
   /**
    * Pick and store the object under the pointer on `pointerdown`.
    * This object is reused for subsequent `onClick` and `onDrag*` callbacks.
    */
   private _lastPointerDownInfo: PickingInfo | null = null;
-  private _metricsCounter: number;
 
   constructor(props: DeckProps) {
     this.props = {...defaultProps, ...props};
     props = this.props;
 
-    this._needsRedraw = 'Initial render';
-    this._pickRequest = {
-      mode: 'hover',
-      x: -1,
-      y: -1,
-      radius: 0,
-      event: null
-    };
-
-    this.cursorState = {
-      isHovering: false,
-      isDragging: false
-    };
-
     if (props.viewState && props.initialViewState) {
       log.warn(
         'View state tracking is disabled. Use either `initialViewState` for auto update or `viewState` for manual update.'
@@ -353,32 +373,23 @@ export default class Deck {
     }
     this.viewState = props.initialViewState;
 
-    if (!props.gl) {
-      // Note: LayerManager creation deferred until gl context available
+    // See if we already have a device
+    if (props.device) {
+      this.device = props.device;
+    } else if (props.gl) {
+      this.device = WebGLDevice.attach(props.gl);
+    } else {
+      // device will be created asynchronously by the animation loop when that is initialized
+    }
+
+    // Create a canvas if no device is available
+    if (!this.device) {
       if (typeof document !== 'undefined') {
         this.canvas = this._createCanvas(props);
       }
     }
-    this.animationLoop = this._createAnimationLoop(props);
 
-    this.stats = new Stats({id: 'deck.gl'});
-    this.metrics = {
-      fps: 0,
-      setPropsTime: 0,
-      updateAttributesTime: 0,
-      framesRedrawn: 0,
-      pickTime: 0,
-      pickCount: 0,
-      gpuTime: 0,
-      gpuTimePerFrame: 0,
-      cpuTime: 0,
-      cpuTimePerFrame: 0,
-      bufferMemory: 0,
-      textureMemory: 0,
-      renderbufferMemory: 0,
-      gpuMemory: 0
-    };
-    this._metricsCounter = 0;
+    this.animationLoop = this._createAnimationLoop(props);
 
     this.setProps(props);
 
@@ -392,9 +403,11 @@ export default class Deck {
 
   /** Stop rendering and dispose all resources */
   finalize() {
-    this.animationLoop.destroy();
     this._lastPointerDownInfo = null;
 
+    this.animationLoop?.destroy();
+    this.animationLoop = null;
+
     this.layerManager?.finalize();
     this.layerManager = null;
 
@@ -770,16 +783,17 @@ export default class Deck {
       // height,
       useDevicePixels,
       autoResizeViewport: false,
-      gl,
-      onCreateContext: opts =>
-        createGLContext({
+      device: this.device,
+      onCreateDevice: props =>
+        luma.createDevice({
           ...glOptions,
-          ...opts,
+          ...props,
           canvas: this.canvas,
           debug,
+          // @ts-expect-error Note can use device.lost
           onContextLost: () => this._onContextLost()
         }),
-      onInitialize: context => this._setGLContext(context.gl),
+      onInitialize: context => this._setDevice(context.device),
 
       onRender: this._onRenderFrame.bind(this),
       // onBeforeRender,
@@ -893,20 +907,21 @@ export default class Deck {
     }
   }
 
-  /** @deprecated */
-  private _setGLContext(gl: WebGLRenderingContext) {
-    this.device = WebGLDevice.attach(gl);
+  private _setDevice(device: Device) {
+    this.device = device;
 
     if (this.layerManager) {
       return;
     }
 
     // if external context...
     if (!this.canvas) {
-      debugger
-      this.canvas = gl.canvas;
+      // @ts-expect-error
+      this.canvas = device.canvasContext.canvas;
       // @ts-expect-error - Currently luma.gl v9 does not expose these options
-      instrumentGLContext(gl, {enable: true, copyState: true});
+      // All WebGLDevice contexts are instrumented, but it seems the device
+      // should have a method to start state tracking even if not enabled?
+      instrumentGLContext(this.device.gl, {enable: true, copyState: true});
     }
 
     this.tooltip = new Tooltip(this.canvas);
@@ -920,14 +935,17 @@ export default class Deck {
     });
 
     this.props.onDeviceInitialized(this.device);
-    this.props.onWebGLInitialized(gl);
+    if (this.device instanceof WebGLDevice) {
+      // Legacy callback - warn?
+      this.props.onWebGLInitialized(this.device.gl);
+    }
 
     // timeline for transitions
     const timeline = new Timeline();
     timeline.play();
     this.animationLoop.attachTimeline(timeline);
 
-    this.eventManager = new EventManager(this.props.parent || gl.canvas, {
+    this.eventManager = new EventManager(this.props.parent || this.canvas, {
       touchAction: this.props.touchAction,
       recognizerOptions: this.props.eventRecognizerOptions,
       events: {
@@ -992,7 +1010,7 @@ export default class Deck {
   ) {
     const {device, gl} = this.layerManager?.context;
 
-    setParameters(gl, this.props.parameters);
+    setParameters(device, this.props.parameters);
 
     this.props.onBeforeRender({device, gl});
 

modules/core/src/lib/layer-manager.ts

@@ -74,8 +74,8 @@ export default class LayerManager {
   private _debug: boolean = false;
 
   /**
-   * @param device 
-   * @param param1 
+   * @param device
+   * @param param1
    */
   // eslint-disable-next-line
   constructor(device: Device, props: LayerManagerProps) {

modules/core/src/passes/screen-pass.ts

@@ -31,7 +31,8 @@ export default class ScreenPass extends Pass {
   }
 
   render(params: ScreenPassRenderOptions): void {
-    const [drawingBufferWidth, drawingBufferHeight] = this.device.canvasContext.getDrawingBufferSize()
+    const [drawingBufferWidth, drawingBufferHeight] =
+      this.device.canvasContext.getDrawingBufferSize();
     setParameters(this.device, {viewport: [0, 0, drawingBufferWidth, drawingBufferHeight]});
 
     // TODO change to device when luma.gl is fixed

modules/extensions/src/data-filter/aggregator.ts

@@ -1,4 +1,3 @@
-
 import {Device} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {Model, Texture2D, Framebuffer, isWebGL2} from '@luma.gl/core';
@@ -53,7 +52,7 @@ void main() {
 export function supportsFloatTarget(device: Device): boolean {
   // @ts-expect-error
   const gl = device.gl;
-  
+
   // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#Support_for_float_textures_doesnt_mean_you_can_render_into_them!
   return Boolean(
     gl.getExtension('EXT_float_blend') &&
@@ -87,11 +86,7 @@ export function getFramebuffer(device: Device, useFloatTarget: boolean): Framebu
 }
 
 // Increments the counter based on dataFilter_value
-export function getModel(
-  device: Device,
-  shaderOptions: any,
-  useFloatTarget: boolean
-): Model {
+export function getModel(device: Device, shaderOptions: any, useFloatTarget: boolean): Model {
   shaderOptions.defines.NON_INSTANCED_MODEL = 1;
   if (useFloatTarget) {
     shaderOptions.defines.FLOAT_TARGET = 1;

modules/mesh-layers/src/scenegraph-layer/scenegraph-layer.ts

@@ -262,7 +262,7 @@ export default class ScenegraphLayer<DataT = any, ExtraPropsT = {}> extends Laye
       scenegraphData = props.scenegraph;
     }
 
-    const options = {layer: this, devicePixelRatio};
+    const options = {layer: this, devicePixelRatio, device: this.context.device};
     const scenegraph = props.getScene(scenegraphData, options);
     const animator = props.getAnimator(scenegraphData, options);
 

modules/test-utils/src/utils/setup-gl.js

@@ -17,4 +17,3 @@ export const gl = createTestContext({
 // // console.log('Context', globalThis.glContext);
 
 globalThis.glContext = globalThis.glContext || gl;
-

test/apps/wboit/wboit-layer/wboit-layer.js

@@ -42,7 +42,7 @@ export default class WBOITLayer extends SolidPolygonLayer {
   initializeState() {
     super.initializeState();
 
-    const [drawingBufferWidth, drawingBufferHeight] = this.context.device.canvasContext.getDra
+    const [drawingBufferWidth, drawingBufferHeight] = this.context.device.canvasContext.getDra;
 
     const textureOpts = {
       type: GL.FLOAT,
@@ -170,7 +170,10 @@ export default class WBOITLayer extends SolidPolygonLayer {
       fs: oitBlendFs,
       drawMode: GL.TRIANGLE_STRIP,
       attributes: {
-        positions: [new Buffer(this.context.device, new Float32Array([-1, 1, -1, -1, 1, 1, 1, -1])), {size: 2}]
+        positions: [
+          new Buffer(this.context.device, new Float32Array([-1, 1, -1, -1, 1, 1, 1, -1])),
+          {size: 2}
+        ]
       },
       vertexCount: 4,
       uniforms: {