chore(tests): Update tests to use device instead of gl (v9) (#7482)

modules/aggregation-layers/src/grid-aggregation-layer.ts

@@ -108,14 +108,13 @@ export default abstract class GridAggregationLayer<
   allocateResources(numRow, numCol) {
     if (this.state.numRow !== numRow || this.state.numCol !== numCol) {
       const dataBytes = numCol * numRow * 4 * 4;
-      const gl = this.context.gl;
       const {weights} = this.state;
       for (const name in weights) {
         const weight = weights[name];
         if (weight.aggregationBuffer) {
           weight.aggregationBuffer.delete();
         }
-        weight.aggregationBuffer = new Buffer(gl, {
+        weight.aggregationBuffer = new Buffer(this.context.device, {
           byteLength: dataBytes,
           accessor: {
             size: 4,

modules/aggregation-layers/src/grid-layer/grid-layer.ts

@@ -90,7 +90,7 @@ export default class GridLayer<DataT = any, ExtraPropsT = {}> extends CompositeL
       // cpu aggregation is requested
       return false;
     }
-    if (!GPUGridAggregator.isSupported(this.context.gl)) {
+    if (!GPUGridAggregator.isSupported(this.context.device)) {
       return false;
     }
     if (lowerPercentile !== 0 || upperPercentile !== 100) {

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

@@ -1,3 +1,4 @@
+import {Device} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {isWebGL2} from '@luma.gl/core';
 
@@ -79,11 +80,11 @@ export function getTextureCoordinates(point: number[], bounds: number[]) {
 }
 
 // Returns format and type for creating texture objects
-export function getTextureParams({gl, floatTargetSupport}) {
+export function getTextureParams({device: Device, floatTargetSupport}) {
   return floatTargetSupport
     ? {
         // format:  should be RGBA32F on WebGL2 (float textures), RGBA in WebGL1 for float or non float textures
-        format: isWebGL2(gl) ? GL.RGBA32F : GL.RGBA,
+        format: device.isWebGL2 ? GL.RGBA32F : GL.RGBA,
         type: GL.FLOAT
       }
     : {

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

@@ -207,8 +207,7 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
   };
 
   initializeState() {
-    const {gl} = this.context;
-    if (!hasFeatures(gl, REQUIRED_FEATURES)) {
+    if (!hasFeatures(this.context.device, REQUIRED_FEATURES)) {
       this.setState({supported: false});
       log.error(`HeatmapLayer: ${this.id} is not supported on this browser`)();
       return;
@@ -388,12 +387,12 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
   }
 
   _setupTextureParams() {
-    const {gl} = this.context;
+    const {device} = this.context;
     const {weightsTextureSize} = this.props;
 
-    const textureSize = Math.min(weightsTextureSize, getParameters(gl, gl.MAX_TEXTURE_SIZE));
-    const floatTargetSupport = hasFeatures(gl, FLOAT_TARGET_FEATURES);
-    const {format, type} = getTextureParams({gl, floatTargetSupport});
+    const textureSize = Math.min(weightsTextureSize, getParameters(device, GL.MAX_TEXTURE_SIZE));
+    const floatTargetSupport = hasFeatures(device, FLOAT_TARGET_FEATURES);
+    const {format, type} = getTextureParams({device, floatTargetSupport});
     const weightsScale = floatTargetSupport ? 1 : 1 / 255;
     this.setState({textureSize, format, type, weightsScale});
     if (!floatTargetSupport) {

modules/aggregation-layers/src/screen-grid-layer/screen-grid-cell-layer.ts

@@ -55,9 +55,7 @@ export default class ScreenGridCellLayer<DataT = any, ExtraPropsT = {}> extends
   static defaultProps = defaultProps;
 
   static isSupported(device: Device) {
-    // @ts-expect-error
-    const gl = device.gl as WebGLRenderingContext;
-    return hasFeatures(gl, [FEATURES.TEXTURE_FLOAT]);
+    return hasFeatures(device, [FEATURES.TEXTURE_FLOAT]);
   }
 
   state!: Layer['state'] & {

modules/aggregation-layers/src/screen-grid-layer/screen-grid-layer.ts

@@ -37,7 +37,7 @@ import GPUGridAggregator from '../utils/gpu-grid-aggregation/gpu-grid-aggregator
 import {AGGREGATION_OPERATION, getValueFunc} from '../utils/aggregation-operation-utils';
 import ScreenGridCellLayer from './screen-grid-cell-layer';
 import GridAggregationLayer, {GridAggregationLayerProps} from '../grid-aggregation-layer';
-import {getFloatTexture} from '../utils/resource-utils.js';
+import {getFloatTexture} from '../utils/resource-utils';
 
 const defaultProps: DefaultProps<ScreenGridLayerProps> = {
   ...ScreenGridCellLayer.defaultProps,

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

@@ -50,7 +50,7 @@ import AGGREGATE_TO_GRID_FS from './aggregate-to-grid-fs.glsl';
 import AGGREGATE_ALL_VS from './aggregate-all-vs.glsl';
 import AGGREGATE_ALL_FS from './aggregate-all-fs.glsl';
 import TRANSFORM_MEAN_VS from './transform-mean-vs.glsl';
-import {getFloatTexture, getFramebuffer} from './../resource-utils.js';
+import {getFloatTexture, getFramebuffer} from './../resource-utils';
 
 const BUFFER_NAMES = ['aggregationBuffer', 'maxMinBuffer', 'minBuffer', 'maxBuffer'];
 const ARRAY_BUFFER_MAP = {
@@ -109,9 +109,7 @@ export default class GPUGridAggregator {
   }
 
   static isSupported(device: Device) {
-    // @ts-expect-error
-    const gl = device.gl as WebGLRenderingContext;
-    return hasFeatures(gl, REQUIRED_FEATURES);
+    return hasFeatures(device, REQUIRED_FEATURES);
   }
 
   // DEBUG ONLY
@@ -159,19 +157,15 @@ export default class GPUGridAggregator {
   };
 
   device: Device;
-  /** @deprecated */
-  gl: WebGLRenderingContext;
   _hasGPUSupport: boolean;
 
   constructor(device: Device, opts = {}) {
     this.id = opts.id || 'gpu-grid-aggregator';
     this.device = device;
 
-    // @ts-expect-error;
-    this.gl = device.gl as WebGLRenderingContext;
-    this._hasGPUSupport =
-      isWebGL2(this.gl) && // gl_InstanceID usage in min/max calculation shaders
-      hasFeatures(this.gl, [
+    // gl_InstanceID usage in min/max calculation shaders
+    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
         FEATURES.TEXTURE_FLOAT // sample from a float texture
@@ -458,7 +452,7 @@ export default class GPUGridAggregator {
       if (this.meanTransform) {
         this.meanTransform.update(transformOptions);
       } else {
-        this.meanTransform = getMeanTransform(gl, transformOptions);
+        this.meanTransform = getMeanTransform(this.device, transformOptions);
       }
       this.meanTransform.run({
         parameters: {

modules/arcgis/src/commons.js → modules/arcgis/src/commons.ts

@@ -1,14 +1,16 @@
 /* eslint-disable no-invalid-this */
 
+import type {Device} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
 import {Deck} from '@deck.gl/core';
 import {Model, Buffer, Framebuffer, instrumentGLContext, withParameters} from '@luma.gl/core';
 
-export function initializeResources(gl) {
-  instrumentGLContext(gl);
+export function initializeResources(device: Device) {
+  instrumentGLContext(device);
 
-  this.buffer = new Buffer(gl, new Int8Array([-1, -1, 1, -1, -1, 1, 1, 1]));
+  this.buffer = new Buffer(device, new Int8Array([-1, -1, 1, -1, -1, 1, 1, 1]));
 
-  this.model = new Model(gl, {
+  this.model = new Model(device, {
     vs: `
       attribute vec2 a_pos;
       varying vec2 v_texcoord;
@@ -31,10 +33,10 @@ export function initializeResources(gl) {
       a_pos: this.buffer
     },
     vertexCount: 4,
-    drawMode: gl.TRIANGLE_STRIP
+    drawMode: GL.TRIANGLE_STRIP
   });
 
-  this.deckFbo = new Framebuffer(gl, {width: 1, height: 1});
+  this.deckFbo = new Framebuffer(device, {width: 1, height: 1});
 
   this.deckInstance = new Deck({
     // The view state will be set dynamically to track the MapView current extent.
@@ -44,7 +46,7 @@ export function initializeResources(gl) {
     controller: false,
 
     // We use the same WebGL context as the ArcGIS API for JavaScript.
-    gl,
+    gl: device.gl,
 
     // We need depth testing in general; we don't know what layers might be added to the deck.
     parameters: {

modules/core/src/effects/lighting/lighting-effect.ts

@@ -123,7 +123,7 @@ export default class LightingEffect implements Effect {
   getModuleParameters(layer: Layer) {
     const parameters: {
       lightSources?: {
-        ambientLight?: AmbientLight;
+        ambientLight?: AmbientLight | null;
         directionalLights: DirectionalLight[];
         pointLights: PointLight[];
       };

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

@@ -146,11 +146,9 @@ export default class DataColumn<Options, State> implements IShaderAttribute {
     if (doublePrecision) {
       bufferType = GL.FLOAT;
     } else if (!logicalType && opts.isIndexed) {
-      // @ts-expect-error
-      const gl = device.gl as WebGLRenderingContext;
 
       bufferType =
-        gl && hasFeature(gl, 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-picker.ts

@@ -19,12 +19,7 @@
 // THE SOFTWARE.
 
 import type {Device} from '@luma.gl/api';
-import {
-  Framebuffer,
-  Texture2D,
-  isWebGL2,
-  readPixelsToArray
-} from '@luma.gl/core';
+import {Framebuffer, Texture2D, isWebGL2, readPixelsToArray} from '@luma.gl/core';
 import GL from '@luma.gl/constants';
 import PickLayersPass, {PickingColorDecoder} from '../passes/pick-layers-pass';
 import {getClosestObject, getUniqueObjects, PickedPixel} from './picking/query-object';
@@ -363,14 +358,14 @@ export default class DeckPicker {
     // Convert from canvas top-left to WebGL bottom-left coordinates
     // And compensate for pixelRatio
     const pixelRatio = this.device.canvasContext.cssToDeviceRatio();
-    const leftTop =  this.device.canvasContext.cssToDevicePixels([x, y], true);
+    const leftTop = this.device.canvasContext.cssToDevicePixels([x, y], true);
 
     // take left and top (y inverted in device pixels) from start location
     const deviceLeft = leftTop.x;
     const deviceTop = leftTop.y + leftTop.height;
 
     // take right and bottom (y inverted in device pixels) from end location
-    const rightBottom =  this.device.canvasContext.cssToDevicePixels([x + width, y + height], true);
+    const rightBottom = this.device.canvasContext.cssToDevicePixels([x + width, y + height], true);
     const deviceRight = rightBottom.x + rightBottom.width;
     const deviceBottom = rightBottom.y;
 

modules/core/src/lib/deck.ts

@@ -903,6 +903,7 @@ export default class Deck {
 
     // if external context...
     if (!this.canvas) {
+      debugger
       this.canvas = gl.canvas;
       // @ts-expect-error - Currently luma.gl v9 does not expose these options
       instrumentGLContext(gl, {enable: true, copyState: true});
@@ -955,8 +956,7 @@ export default class Deck {
     const viewport = this.viewManager.getViewports()[0];
 
     // Note: avoid React setState due GL animation loop / setState timing issue
-    this.layerManager = new LayerManager({
-      device: this.device,
+    this.layerManager = new LayerManager(this.device, {
       deck: this,
       stats: this.stats,
       viewport,

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

@@ -57,8 +57,6 @@ export type LayerContext = {
 export type LayersList = (Layer | undefined | false | null | LayersList)[];
 
 export type LayerManagerProps = {
-  // Apparently LayerManager is supposed to be instantiatable without gl context?
-  device: Device | null;
   deck?: Deck;
   stats?: Stats;
   viewport?: Viewport;
@@ -75,8 +73,14 @@ export default class LayerManager {
   private _nextLayers: LayersList | null = null;
   private _debug: boolean = false;
 
+  /**
+   * @param device 
+   * @param param1 
+   */
   // eslint-disable-next-line
-  constructor({device, deck, stats, viewport, timeline}: LayerManagerProps) {
+  constructor(device: Device, props: LayerManagerProps) {
+    const {deck, stats, viewport, timeline} = props || {};
+
     // Currently deck.gl expects the DeckGL.layers array to be different
     // whenever React rerenders. If the same layers array is used, the
     // LayerManager's diffing algorithm will generate a fatal error and
@@ -95,7 +99,7 @@ export default class LayerManager {
       layerManager: this,
       device,
       // @ts-expect-error
-      gl: device && device.gl,
+      gl: device?.gl,
       deck,
       // Enabling luma.gl Program caching using private API (_cachePrograms)
       pipelineFactory: (device && createProgramManager(device))!,

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

@@ -26,7 +26,7 @@ export default class ResourceManager {
     this._context = {
       device: props.device,
       // @ts-expect-error
-      gl: props.device.gl,
+      gl: props.device?.gl,
       resourceManager: this
     };
     this._resources = {};

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

@@ -382,10 +382,11 @@ function getGLViewport(
   const useTarget = target && target.id !== 'default-framebuffer';
 
   const pixelRatio =
-    (moduleParameters && moduleParameters.devicePixelRatio) || device.canvasContext.cssToDeviceRatio();
+    (moduleParameters && moduleParameters.devicePixelRatio) ||
+    device.canvasContext.cssToDeviceRatio();
 
   // Default framebuffer is used when writing to canvas
-  const [,drawingBufferHeight] = device.canvasContext.getDrawingBufferSize();
+  const [, drawingBufferHeight] = device.canvasContext.getDrawingBufferSize();
   const height = useTarget ? target.height : drawingBufferHeight;
 
   // Convert viewport top-left CSS coordinates to bottom up WebGL coordinates

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

@@ -31,9 +31,8 @@ export default class ScreenPass extends Pass {
   }
 
   render(params: ScreenPassRenderOptions): void {
-    // @ts-expect-error
-    const gl = device.gl as WebGLRenderingContext;
-    setParameters(this.device, {viewport: [0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight]});
+    const [drawingBufferWidth, drawingBufferHeight] = this.device.canvasContext.getDrawingBufferSize()
+    setParameters(this.device, {viewport: [0, 0, drawingBufferWidth, drawingBufferHeight]});
 
     // TODO change to device when luma.gl is fixed
     withParameters(this.device, {framebuffer: params.outputBuffer, clearColor: [0, 0, 0, 0]}, () =>

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

@@ -28,10 +28,7 @@ export default class ShadowPass extends LayersPass {
       }
     });
 
-    // @ts-expect-error
-    const gl = device.gl as WebGLRenderingContext;
-
-    this.depthBuffer = new Renderbuffer(gl, {
+    this.depthBuffer = new Renderbuffer(device, {
       format: GL.DEPTH_COMPONENT16,
       width: 1,
       height: 1