feat: Start replacing gl with device

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

@@ -239,7 +239,7 @@ export default class ContourLayer<DataT = any, ExtraPropsT = {}> extends GridAgg
     const cellSizeChanged = oldProps.cellSize !== cellSize;
     let gpuAggregation = props.gpuAggregation;
     if (this.state.gpuAggregation !== props.gpuAggregation) {
-      if (gpuAggregation && !GPUGridAggregator.isSupported(this.context.gl)) {
+      if (gpuAggregation && !GPUGridAggregator.isSupported(this.context.device)) {
         log.warn('GPU Grid Aggregation not supported, falling back to CPU')();
         gpuAggregation = false;
       }

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

@@ -83,7 +83,7 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
     });
   }
 
-  initializeState({gl}: LayerContext) {
+  initializeState(): void {
     const attributeManager = this.getAttributeManager()!;
     attributeManager.addInstanced({
       colors: {
@@ -95,13 +95,13 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
         noAlloc: true
       }
     });
-    const model = this._getModel(gl);
+    const model = this._getModel();
     this._setupUniformBuffer(model);
     this.setState({model});
   }
 
-  _getModel(gl: WebGLRenderingContext): Model {
-    return new Model(gl, {
+  _getModel(): Model {
+    return new Model(this.context.device, {
       ...this.getShaders(),
       id: this.props.id,
       geometry: new CubeGeometry(),

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

@@ -175,8 +175,8 @@ export default class GPUGridLayer<DataT = any, ExtraPropsT = {}> extends GridAgg
   static layerName = 'GPUGridLayer';
   static defaultProps = defaultProps;
 
-  initializeState({gl}: LayerContext): void {
-    const isSupported = GPUGridAggregator.isSupported(gl);
+  initializeState({device}: LayerContext): void {
+    const isSupported = GPUGridAggregator.isSupported(device);
     if (!isSupported) {
       log.error('GPUGridLayer is not supported on this browser, use GridLayer instead')();
     }
@@ -192,7 +192,7 @@ export default class GPUGridLayer<DataT = any, ExtraPropsT = {}> extends GridAgg
           needMin: true,
           needMax: true,
           combineMaxMin: true,
-          maxMinBuffer: new Buffer(gl, {
+          maxMinBuffer: new Buffer(device, {
             byteLength: 4 * 4,
             accessor: {size: 4, type: GL.FLOAT, divisor: 1}
           })
@@ -201,7 +201,7 @@ export default class GPUGridLayer<DataT = any, ExtraPropsT = {}> extends GridAgg
           needMin: true,
           needMax: true,
           combineMaxMin: true,
-          maxMinBuffer: new Buffer(gl, {
+          maxMinBuffer: new Buffer(device, {
             byteLength: 4 * 4,
             accessor: {size: 4, type: GL.FLOAT, divisor: 1}
           })

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

@@ -42,12 +42,11 @@ export default abstract class GridAggregationLayer<
   };
 
   initializeAggregationLayer({dimensions}) {
-    const {gl} = this.context;
     super.initializeAggregationLayer(dimensions);
     this.setState({
       // CPU aggregation results
       layerData: {},
-      gpuGridAggregator: new GPUGridAggregator(gl, {id: `${this.id}-gpu-aggregator`}),
+      gpuGridAggregator: new GPUGridAggregator(this.context.device, {id: `${this.id}-gpu-aggregator`}),
       cpuGridAggregator: pointToDensityGridDataCPU
     });
   }

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

@@ -335,7 +335,7 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
 
   // override Composite layer private method to create AttributeManager instance
   _getAttributeManager() {
-    return new AttributeManager(this.context.gl, {
+    return new AttributeManager(this.context.device, {
       id: this.props.id,
       stats: this.context.stats
     });
@@ -364,18 +364,17 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
   }
 
   _createTextures() {
-    const {gl} = this.context;
     const {textureSize, format, type} = this.state;
 
     this.setState({
-      weightsTexture: new Texture2D(gl, {
+      weightsTexture: new Texture2D(this.context.device, {
         width: textureSize,
         height: textureSize,
         format,
         type,
         ...TEXTURE_OPTIONS
       }),
-      maxWeightsTexture: new Texture2D(gl, {format, type, ...TEXTURE_OPTIONS}) // 1 X 1 texture,
+      maxWeightsTexture: new Texture2D(this.context.device, {format, type, ...TEXTURE_OPTIONS}) // 1 X 1 texture,
     });
   }
 
@@ -419,12 +418,11 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
   }
 
   _createWeightsTransform(shaders = {}) {
-    const {gl} = this.context;
     let {weightsTransform} = this.state;
     const {weightsTexture} = this.state;
     weightsTransform?.delete();
 
-    weightsTransform = new Transform(gl, {
+    weightsTransform = new Transform(this.context.device, {
       id: `${this.id}-weights-transform`,
       elementCount: 1,
       _targetTexture: weightsTexture,
@@ -435,15 +433,14 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
   }
 
   _setupResources() {
-    const {gl} = this.context;
     this._createTextures();
     const {textureSize, weightsTexture, maxWeightsTexture} = this.state;
 
     const weightsTransformShaders = this.getShaders('weights-transform');
     this._createWeightsTransform(weightsTransformShaders);
 
     const maxWeightsTransformShaders = this.getShaders('max-weights-transform');
-    const maxWeightTransform = new Transform(gl, {
+    const maxWeightTransform = new Transform(this.context.device, {
       id: `${this.id}-max-weights-transform`,
       _sourceTextures: {
         inTexture: weightsTexture
@@ -459,11 +456,11 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
       maxWeightsTexture,
       maxWeightTransform,
       zoom: null,
-      triPositionBuffer: new Buffer(gl, {
+      triPositionBuffer: new Buffer(this.context.device, {
         byteLength: 48,
         accessor: {size: 3}
       }),
-      triTexCoordBuffer: new Buffer(gl, {
+      triTexCoordBuffer: new Buffer(this.context.device, {
         byteLength: 48,
         accessor: {size: 2}
       })
@@ -565,7 +562,7 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
         width: colorRange.length
       });
     } else {
-      colorTexture = new Texture2D(this.context.gl, {
+      colorTexture = new Texture2D(this.context.device, {
         data: colors,
         width: colorRange.length,
         height: 1,

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

@@ -18,6 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+import type {Device} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {Model, Geometry, Texture2D} from '@luma.gl/core';
 import {Layer, LayerContext, project32} from '@deck.gl/core';
@@ -42,21 +43,21 @@ export default class TriangleLayer extends Layer<_TriangleLayerProps> {
     return {vs, fs, modules: [project32]};
   }
 
-  initializeState({gl}: LayerContext): void {
+  initializeState({device}: LayerContext): void {
     const attributeManager = this.getAttributeManager()!;
     attributeManager.add({
       positions: {size: 3, noAlloc: true},
       texCoords: {size: 2, noAlloc: true}
     });
     this.setState({
-      model: this._getModel(gl)
+      model: this._getModel(device)
     });
   }
 
-  _getModel(gl: WebGLRenderingContext): Model {
+  _getModel(device: Device): Model {
     const {vertexCount} = this.props;
 
-    return new Model(gl, {
+    return new Model(device, {
       ...this.getShaders(),
       id: this.props.id,
       geometry: new Geometry({

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

@@ -4,7 +4,7 @@
 
 # Usage (Aggregation in World space)
 ```
-const aggregator = new GPUGridAggregator(gl);
+const aggregator = new GPUGridAggregator(device);
 
 const results = aggregator.run({
   attributes, // position and weight attributes
@@ -29,7 +29,7 @@ const results = aggregator.run({
 You can also perform aggregation in screen space by provide a viewport and set `projectPoints` to true. Aggregator will first project positions and then aggregate them in screen space.
 
 ```
-const aggregator = new GPUGridAggregator(gl);
+const aggregator = new GPUGridAggregator(device);
 
 const results = aggregator.run({
   attributes, // position and weight attributes
@@ -57,7 +57,7 @@ const results = aggregator.run({
 
 ‘ScreenGridAggregator’ constructor takes following arguments and constructs an object.
 
-* gl (WebGLContext) : used for querying WebGL features and creating required webgl resources.
+* device (WebGLContext) : used for querying WebGL features and creating required webgl resources.
 * opts (Object) : Optionally contains and ‘id’ and ‘sahderCache’ object for caching/re-using shaders.
 
 

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

@@ -18,6 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+import type {Device} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {
   Model,
@@ -106,7 +107,9 @@ export default class GPUGridAggregator {
     return {cellCounts, cellWeights};
   }
 
-  static isSupported(gl) {
+  static isSupported(device: Device) {
+    // @ts-expect-error
+    const gl = device.gl as WebGLRenderingContext;
     return hasFeatures(gl, REQUIRED_FEATURES);
   }
 
@@ -135,7 +138,7 @@ export default class GPUGridAggregator {
   //   }
   // }
 
-  constructor(gl, opts = {}) {
+  constructor(device: Device, opts = {}) {
     this.id = opts.id || 'gpu-grid-aggregator';
     this.gl = gl;
     this.state = {

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

@@ -1,3 +1,4 @@
+import type {Device} from '@luma.gl/api';
 import {ProgramManager} from '@luma.gl/core';
 import {Texture2D} from '@luma.gl/gltools';
 import {AmbientLight} from './ambient-light';
@@ -37,7 +38,7 @@ export default class LightingEffect implements Effect {
   private pointLights: PointLight[] = [];
   private shadowPasses: ShadowPass[] = [];
   private shadowMaps: Texture2D[] = [];
-  private dummyShadowMap?: Texture2D;
+  private dummyShadowMap: Texture2D | null = null;
   private pipelineFactory?: ProgramManager;
   private shadowMatrices?: Matrix4[];
 
@@ -66,19 +67,16 @@ export default class LightingEffect implements Effect {
   }
 
   preRender(
-    gl: WebGLRenderingContext,
+    device: Device,
     {layers, layerFilter, viewports, onViewportActive, views}: PreRenderOptions
   ) {
-    // @ts-expect-error
-    const device = gl.device;
-
     if (!this.shadow) return;
 
     // create light matrix every frame to make sure always updated from light source
     this.shadowMatrices = this._calculateMatrices();
 
     if (this.shadowPasses.length === 0) {
-      this._createShadowPasses(gl);
+      this._createShadowPasses(device);
     }
     if (!this.pipelineFactory) {
       this.pipelineFactory = ProgramManager.getDefaultProgramManager(device);
@@ -88,7 +86,7 @@ export default class LightingEffect implements Effect {
     }
 
     if (!this.dummyShadowMap) {
-      this.dummyShadowMap = new Texture2D(gl, {
+      this.dummyShadowMap = new Texture2D(device, {
         width: 1,
         height: 1
       });
@@ -158,7 +156,7 @@ export default class LightingEffect implements Effect {
 
     if (this.shadow && this.pipelineFactory) {
       this.pipelineFactory.removeDefaultModule(shadow);
-      this.pipelineFactory = undefined;
+      this.pipelineFactory = null!;
     }
   }
 
@@ -174,9 +172,9 @@ export default class LightingEffect implements Effect {
     return lightMatrices;
   }
 
-  private _createShadowPasses(gl: WebGLRenderingContext): void {
+  private _createShadowPasses(device: Device): void {
     for (let i = 0; i < this.directionalLights.length; i++) {
-      const shadowPass = new ShadowPass(gl);
+      const shadowPass = new ShadowPass(device);
       this.shadowPasses[i] = shadowPass;
       this.shadowMaps[i] = shadowPass.shadowMap;
     }

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

@@ -1,3 +1,4 @@
+import type {Device} from '@luma.gl/api';
 import {Texture2D} from '@luma.gl/core';
 // import {readPixelsToArray} from '@luma.gl/core';
 import {equals} from '@math.gl/core';
@@ -45,11 +46,11 @@ export default class MaskEffect implements Effect {
   private lastViewport?: Viewport;
 
   preRender(
-    gl: WebGLRenderingContext,
+    device: Device,
     {layers, layerFilter, viewports, onViewportActive, views}: PreRenderOptions
   ): void {
     if (!this.dummyMaskMap) {
-      this.dummyMaskMap = new Texture2D(gl, {
+      this.dummyMaskMap = new Texture2D(device, {
         width: 1,
         height: 1
       });
@@ -64,7 +65,7 @@ export default class MaskEffect implements Effect {
     this.masks = {};
 
     if (!this.maskPass) {
-      this.maskPass = new MaskPass(gl, {id: 'default-mask'});
+      this.maskPass = new MaskPass(device, {id: 'default-mask'});
       this.maskMap = this.maskPass.maskMap;
     }
 

modules/core/src/effects/post-process-effect.ts

@@ -1,8 +1,10 @@
-import ScreenPass from '../passes/screen-pass';
+import type {Device} from '@luma.gl/api';
+import type {Framebuffer} from '@luma.gl/gltools';
 import {normalizeShaderModule} from '@luma.gl/core';
 
+import ScreenPass from '../passes/screen-pass';
+
 import type {Effect, PostRenderOptions} from '../lib/effect';
-import type {Framebuffer} from '@luma.gl/gltools';
 import type {ShaderModule} from '../types/types';
 
 export default class PostProcessEffect implements Effect {
@@ -21,8 +23,8 @@ export default class PostProcessEffect implements Effect {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   preRender(): void {}
 
-  postRender(gl: WebGLRenderingContext, params: PostRenderOptions): Framebuffer {
-    const passes = this.passes || createPasses(gl, this.module, this.id, this.props);
+  postRender(device: Device, params: PostRenderOptions): Framebuffer {
+    const passes = this.passes || createPasses(device, this.module, this.id, this.props);
     this.passes = passes;
 
     const {target} = params;
@@ -52,14 +54,14 @@ export default class PostProcessEffect implements Effect {
 }
 
 function createPasses(
-  gl: WebGLRenderingContext,
+  device: Device,
   module: ShaderModule,
   id: string,
   moduleSettings: any
 ): ScreenPass[] {
   if (!module.passes) {
     const fs = getFragmentShaderForRenderPass(module);
-    const pass = new ScreenPass(gl, {
+    const pass = new ScreenPass(device, {
       id,
       module,
       fs,
@@ -72,7 +74,7 @@ function createPasses(
     const fs = getFragmentShaderForRenderPass(module, pass);
     const idn = `${id}-${index}`;
 
-    return new ScreenPass(gl, {
+    return new ScreenPass(device, {
       id: idn,
       module,
       fs,