feat: Start replacing gl with device (v9) (#7464)

visgl · Jan 5, 2023 · 34249e2 · 34249e2
1 parent a896de0
commit 34249e2
Show file tree

Hide file tree

Showing 32 changed files with 175 additions and 150 deletions.
diff --git a/examples/playground/index.html b/examples/playground/index.html
@@ -12,6 +12,7 @@
     #editor {flex: 0 1 100%;}
     #right-pane {flex: 0 1 60%; position: relative;}
   </style>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css' rel='stylesheet' />
 </head>
 <body>
   <div id="app"></div>

diff --git a/modules/aggregation-layers/src/contour-layer/contour-layer.ts b/modules/aggregation-layers/src/contour-layer/contour-layer.ts
@@ -245,7 +245,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;
       }

diff --git a/modules/aggregation-layers/src/gpu-grid-layer/gpu-grid-cell-layer.ts b/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(),

diff --git a/modules/aggregation-layers/src/gpu-grid-layer/gpu-grid-layer.ts b/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}
           })

diff --git a/modules/aggregation-layers/src/grid-aggregation-layer.ts b/modules/aggregation-layers/src/grid-aggregation-layer.ts
@@ -42,12 +42,13 @@ 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
     });
   }

diff --git a/modules/aggregation-layers/src/heatmap-layer/heatmap-layer.ts b/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,

diff --git a/modules/aggregation-layers/src/heatmap-layer/triangle-layer.ts b/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({

diff --git a/modules/aggregation-layers/src/screen-grid-layer/screen-grid-cell-layer.ts b/modules/aggregation-layers/src/screen-grid-layer/screen-grid-cell-layer.ts
@@ -18,6 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+import {Device} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {Model, Geometry, FEATURES, hasFeatures, Texture2D, DefaultProps} from '@luma.gl/core';
 import {Layer, LayerProps, log, picking, UpdateParameters} from '@deck.gl/core';
@@ -53,7 +54,9 @@ export default class ScreenGridCellLayer<DataT = any, ExtraPropsT = {}> extends
   static layerName = 'ScreenGridCellLayer';
   static defaultProps = defaultProps;
 
-  static isSupported(gl) {
+  static isSupported(device: Device) {
+    // @ts-expect-error
+    const gl = device.gl as WebGLRenderingContext;
     return hasFeatures(gl, [FEATURES.TEXTURE_FLOAT]);
   }
 
@@ -65,15 +68,14 @@ export default class ScreenGridCellLayer<DataT = any, ExtraPropsT = {}> extends
   }
 
   initializeState() {
-    const {gl} = this.context;
     const attributeManager = this.getAttributeManager()!;
     attributeManager.addInstanced({
       // eslint-disable-next-line @typescript-eslint/unbound-method
       instancePositions: {size: 3, update: this.calculateInstancePositions},
       instanceCounts: {size: 4, noAlloc: true}
     });
     this.setState({
-      model: this._getModel(gl)
+      model: this._getModel()
     });
   }
 
@@ -141,8 +143,8 @@ export default class ScreenGridCellLayer<DataT = any, ExtraPropsT = {}> extends
 
   // Private Methods
 
-  _getModel(gl: WebGLRenderingContext): Model {
-    return new Model(gl, {
+  _getModel(): Model {
+    return new Model(this.context.device, {
       ...this.getShaders(),
       id: this.props.id,
       geometry: new Geometry({

diff --git a/modules/aggregation-layers/src/screen-grid-layer/screen-grid-layer.ts b/modules/aggregation-layers/src/screen-grid-layer/screen-grid-layer.ts
@@ -154,8 +154,7 @@ export default class ScreenGridLayer<DataT = any, ExtraProps = {}> extends GridA
   };
 
   initializeState() {
-    const {gl} = this.context;
-    if (!ScreenGridCellLayer.isSupported(gl)) {
+    if (!ScreenGridCellLayer.isSupported(this.context.device)) {
       // max aggregated value is sampled from a float texture
       this.setState({supported: false});
       log.error(`ScreenGridLayer: ${this.id} is not supported on this browser`)();
@@ -171,7 +170,7 @@ export default class ScreenGridLayer<DataT = any, ExtraProps = {}> extends GridA
         size: 1,
         operation: AGGREGATION_OPERATION.SUM,
         needMax: true,
-        maxTexture: getFloatTexture(gl, {id: `${this.id}-max-texture`})
+        maxTexture: getFloatTexture(this.context.device, {id: `${this.id}-max-texture`})
       }
     };
     this.setState({
@@ -275,7 +274,7 @@ export default class ScreenGridLayer<DataT = any, ExtraProps = {}> extends GridA
     const {viewportChanged} = opts.changeFlags;
     let gpuAggregation = opts.props.gpuAggregation;
     if (this.state.gpuAggregation !== opts.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;
       }

diff --git a/.../src/utils/aggregation-operation-utils.js → .../src/utils/aggregation-operation-utils.ts b/.../src/utils/aggregation-operation-utils.js → .../src/utils/aggregation-operation-utils.ts
diff --git a/...grid-aggregation/aggregate-all-fs.glsl.js → ...grid-aggregation/aggregate-all-fs.glsl.ts b/...grid-aggregation/aggregate-all-fs.glsl.js → ...grid-aggregation/aggregate-all-fs.glsl.ts
diff --git a/...grid-aggregation/aggregate-all-vs.glsl.js → ...grid-aggregation/aggregate-all-vs.glsl.ts b/...grid-aggregation/aggregate-all-vs.glsl.js → ...grid-aggregation/aggregate-all-vs.glsl.ts
diff --git a/...-aggregation/aggregate-to-grid-fs.glsl.js → ...-aggregation/aggregate-to-grid-fs.glsl.ts b/...-aggregation/aggregate-to-grid-fs.glsl.js → ...-aggregation/aggregate-to-grid-fs.glsl.ts
diff --git a/...-aggregation/aggregate-to-grid-vs.glsl.js → ...-aggregation/aggregate-to-grid-vs.glsl.ts b/...-aggregation/aggregate-to-grid-vs.glsl.js → ...-aggregation/aggregate-to-grid-vs.glsl.ts
diff --git a/...regation/gpu-grid-aggregator-constants.js → ...regation/gpu-grid-aggregator-constants.ts b/...regation/gpu-grid-aggregator-constants.js → ...regation/gpu-grid-aggregator-constants.ts
diff --git a/...-aggregation/gpu-grid-aggregator-utils.js → ...-aggregation/gpu-grid-aggregator-utils.ts b/...-aggregation/gpu-grid-aggregator-utils.js → ...-aggregation/gpu-grid-aggregator-utils.ts
diff --git a/modules/aggregation-layers/src/utils/gpu-grid-aggregation/gpu-grid-aggregator.md b/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.