chore: Replace gl with device, continued (#7468)

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

Hide file tree

Showing 45 changed files with 3,404 additions and 4,014 deletions.
diff --git a/docs/upgrade-guide.md b/docs/upgrade-guide.md
@@ -2,9 +2,22 @@
 
 ## Upgrading to v9.0
 
+* deck.gl v4.1 bumps luma.gl to from v3 to v4. This is major release that brings full WebGL2 enablement to deck.gl. This should not affect you if you are mainly using the provided deck.gl layers but if you are writing your own layers using luma.gl classes you may want to look at the upgrade guide of luma.gl.
+
+
 ### Custom Layers
 
-- drawModes `GL.TRIANGLE_FAN` and `GL.LINE_LOOP` are no longer supported when creating geometries.
+Create models with device instead of gl.
+
+```typescript
+// luma.gl vp
+new Model(this.context.device, {opts});
+// luma.gl v8
+new Model(this.context.gl, {opts});
+```
+
+
+- drawModes `GL.TRIANGLE_FAN` and `GL.LINE_LOOP` are not supported on WebGPU. Select different topology when creating geometries.
 
 ## Upgrading from deck.gl v8.7 to v8.8
 

diff --git a/examples/layer-browser/package.json b/examples/layer-browser/package.json
@@ -9,8 +9,8 @@
   "dependencies": {
     "@loaders.gl/ply": "^3.2.10",
     "@loaders.gl/gltf": "^3.2.10",
-    "@luma.gl/experimental": "9.0.0-alpha.9",
-    "@luma.gl/debug": "9.0.0-alpha.9",
+    "@luma.gl/experimental": "9.0.0-alpha.11",
+    "@luma.gl/debug": "9.0.0-alpha.11",
     "colorbrewer": "^1.0.0",
     "d3-request": "^1.0.6",
     "d3-scale": "^3.1.0",

diff --git a/examples/playground/package.json b/examples/playground/package.json
@@ -14,7 +14,7 @@
     "@loaders.gl/csv": "^3.2.10",
     "@loaders.gl/draco": "^3.2.10",
     "@loaders.gl/gltf": "^3.2.10",
-    "@luma.gl/constants": "9.0.0-alpha.9",
+    "@luma.gl/constants": "9.0.0-alpha.11",
     "brace": "^0.11.1",
     "deck.gl": "^8.8.0",
     "react": "~16.9.0",

diff --git a/modules/aggregation-layers/package.json b/modules/aggregation-layers/package.json
@@ -30,15 +30,15 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.0.0-alpha.9",
-    "@luma.gl/shadertools": "9.0.0-alpha.9",
+    "@luma.gl/constants": "9.0.0-alpha.11",
+    "@luma.gl/shadertools": "9.0.0-alpha.11",
     "@math.gl/web-mercator": "^3.6.2",
     "d3-hexbin": "^0.2.1"
   },
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0",
     "@deck.gl/layers": "^8.0.0",
-    "@luma.gl/core": "9.0.0-alpha.9"
+    "@luma.gl/core": "9.0.0-alpha.11"
   },
   "gitHead": "13ace64fc2cee08c133afc882fc307253489a4e4"
 }
diff --git a/modules/aggregation-layers/src/aggregation-layer.ts b/modules/aggregation-layers/src/aggregation-layer.ts
@@ -25,7 +25,6 @@ import {
   UpdateParameters,
   CompositeLayerProps
 } from '@deck.gl/core';
-import {cssToDeviceRatio} from '@luma.gl/core';
 import {filterProps} from './utils/prop-utils';
 
 export type AggregationLayerProps<DataT = any> = CompositeLayerProps<DataT>;
@@ -79,12 +78,12 @@ export default abstract class AggregationLayer<
     // For regular layer draw this happens during draw cycle (_drawLayersInViewport) not during update cycle
     // For aggregation layers this is called during updateState to update aggregation data
     // NOTE: it is similar to LayerPass._getModuleParameters() but doesn't inlcude `effects` it is not needed for aggregation
-    const {viewport, mousePosition, gl} = this.context;
+    const {viewport, mousePosition, device} = this.context;
     const moduleSettings = Object.assign(Object.create(this.props), {
       viewport,
       mousePosition,
       pickingActive: 0,
-      devicePixelRatio: cssToDeviceRatio(gl)
+      devicePixelRatio: device.canvasContext.cssToDeviceRatio()
     });
     return moduleSettings;
   }

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
@@ -179,9 +179,9 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
   }
 
   private _setupUniformBuffer(model: Model): void {
-    const gl = this.context.gl as WebGL2RenderingContext;
     const programHandle = model.program.handle;
 
+    const gl = this.context.gl as WebGL2RenderingContext;
     const colorIndex = gl.getUniformBlockIndex(programHandle, 'ColorData');
     const elevationIndex = gl.getUniformBlockIndex(programHandle, 'ElevationData');
     gl.uniformBlockBinding(programHandle, colorIndex, COLOR_DATA_UBO_INDEX);

diff --git a/...gation-layers/src/utils/cpu-aggregator.js → ...gation-layers/src/utils/cpu-aggregator.ts b/...gation-layers/src/utils/cpu-aggregator.js → ...gation-layers/src/utils/cpu-aggregator.ts
diff --git a/modules/aggregation-layers/src/utils/gpu-grid-aggregation/gpu-grid-aggregator.ts b/modules/aggregation-layers/src/utils/gpu-grid-aggregation/gpu-grid-aggregator.ts
@@ -27,7 +27,8 @@ import {
   hasFeatures,
   isWebGL2,
   readPixelsToBuffer,
-  withParameters
+  withParameters,
+  clear
 } from '@luma.gl/core';
 import {fp64arithmetic} from '@luma.gl/shadertools';
 import {log, project32, _mergeShaders as mergeShaders} from '@deck.gl/core';
@@ -394,18 +395,15 @@ export default class GPUGridAggregator {
     const {framebuffers} = this.state;
     const {allAggregationModel} = this;
 
-    // @ts-expect-error
-    const gl = this.device.gl as WebGLRenderingContext;
-
     withParameters(
-      gl,
+      this.device,
       {
         ...clearParams,
         framebuffer: minOrMaxFb,
         viewport: [0, 0, gridSize[0], gridSize[1]]
       },
       () => {
-        gl.clear(gl.COLOR_BUFFER_BIT);
+        clear(this.device, {color: true});
 
         allAggregationModel.draw({
           parameters,
@@ -423,22 +421,22 @@ export default class GPUGridAggregator {
   _renderToWeightsTexture(opts) {
     const {id, parameters, moduleSettings, uniforms, gridSize, weights} = opts;
     const {framebuffers, equations, weightAttributes} = this.state;
-    const {gl, gridAggregationModel} = this;
+    const {gridAggregationModel} = this;
     const {operation} = weights[id];
 
     const clearColor =
       operation === AGGREGATION_OPERATION.MIN
         ? [MAX_32_BIT_FLOAT, MAX_32_BIT_FLOAT, MAX_32_BIT_FLOAT, 0]
         : [0, 0, 0, 0];
     withParameters(
-      gl,
+      this.device,
       {
         framebuffer: framebuffers[id],
         viewport: [0, 0, gridSize[0], gridSize[1]],
         clearColor
       },
       () => {
-        gl.clear(gl.COLOR_BUFFER_BIT);
+        clear(this.device, {color: true});
 
         const attributes = {weights: weightAttributes[id]};
         gridAggregationModel.draw({

diff --git a/...ayers/src/utils/grid-aggregation-utils.js → ...ayers/src/utils/grid-aggregation-utils.ts b/...ayers/src/utils/grid-aggregation-utils.js → ...ayers/src/utils/grid-aggregation-utils.ts
diff --git a/...ggregation-layers/src/utils/prop-utils.js → ...ggregation-layers/src/utils/prop-utils.ts b/...ggregation-layers/src/utils/prop-utils.js → ...ggregation-layers/src/utils/prop-utils.ts
diff --git a/modules/carto/package.json b/modules/carto/package.json
@@ -36,7 +36,7 @@
     "@loaders.gl/loader-utils": "^3.2.10",
     "@loaders.gl/mvt": "^3.2.10",
     "@loaders.gl/tiles": "^3.2.10",
-    "@luma.gl/constants": "9.0.0-alpha.9",
+    "@luma.gl/constants": "9.0.0-alpha.11",
     "@math.gl/web-mercator": "^3.6.2",
     "cartocolor": "^4.0.2",
     "d3-array": "^3.2.0",

diff --git a/modules/core/package.json b/modules/core/package.json
@@ -37,12 +37,12 @@
   "dependencies": {
     "@loaders.gl/core": "^3.2.10",
     "@loaders.gl/images": "^3.2.10",
-    "@luma.gl/api": "9.0.0-alpha.8",
-    "@luma.gl/constants": "9.0.0-alpha.8",
-    "@luma.gl/core": "9.0.0-alpha.8",
-    "@luma.gl/gltools": "9.0.0-alpha.8",
-    "@luma.gl/shadertools": "9.0.0-alpha.8",
-    "@luma.gl/webgl": "9.0.0-alpha.8",
+    "@luma.gl/api": "9.0.0-alpha.11",
+    "@luma.gl/constants": "9.0.0-alpha.11",
+    "@luma.gl/core": "9.0.0-alpha.11",
+    "@luma.gl/gltools": "9.0.0-alpha.11",
+    "@luma.gl/shadertools": "9.0.0-alpha.11",
+    "@luma.gl/webgl": "9.0.0-alpha.11",
     "@math.gl/core": "^3.6.2",
     "@math.gl/sun": "^3.6.2",
     "@math.gl/web-mercator": "^3.6.2",

diff --git a/modules/core/src/lib/deck-picker.ts b/modules/core/src/lib/deck-picker.ts
@@ -23,9 +23,7 @@ import {
   Framebuffer,
   Texture2D,
   isWebGL2,
-  readPixelsToArray,
-  cssToDeviceRatio,
-  cssToDevicePixels
+  readPixelsToArray
 } from '@luma.gl/core';
 import GL from '@luma.gl/constants';
 import PickLayersPass, {PickingColorDecoder} from '../passes/pick-layers-pass';
@@ -152,25 +150,25 @@ export default class DeckPicker {
 
   /** Ensures that picking framebuffer exists and matches the canvas size */
   _resizeBuffer() {
-    // @ts-expect-error
-    const gl = this.device.gl as WebGLRenderingContext;
-
     // Create a frame buffer if not already available
     if (!this.pickingFBO) {
       this.pickingFBO = new Framebuffer(this.device);
 
-      if (Framebuffer.isSupported(gl, {colorBufferFloat: true})) {
+      if (Framebuffer.isSupported(this.device, {colorBufferFloat: true})) {
         const depthFBO = new Framebuffer(this.device);
         depthFBO.attach({
           [GL.COLOR_ATTACHMENT0]: new Texture2D(this.device, {
-            format: isWebGL2(gl) ? GL.RGBA32F : GL.RGBA,
+            format: this.device.info.type === 'webgl2' ? GL.RGBA32F : GL.RGBA,
             type: GL.FLOAT
           })
         });
         this.depthFBO = depthFBO;
       }
     }
+
     // Resize it to current canvas size (this is a noop if size hasn't changed)
+    // @ts-expect-error
+    const gl = this.device.gl as WebGLRenderingContext;
     this.pickingFBO?.resize({width: gl.canvas.width, height: gl.canvas.height});
     this.depthFBO?.resize({width: gl.canvas.width, height: gl.canvas.height});
   }
@@ -202,11 +200,9 @@ export default class DeckPicker {
     result: PickingInfo[];
     emptyInfo: PickingInfo;
   } {
-    // @ts-expect-error
-    const gl = this.device.gl as WebGLRenderingContext;
+    const pixelRatio = this.device.canvasContext.cssToDeviceRatio();
 
     const pickableLayers = this._getPickable(layers);
-    const pixelRatio = cssToDeviceRatio(gl);
 
     if (!pickableLayers) {
       return {
@@ -220,7 +216,7 @@ export default class DeckPicker {
     // Convert from canvas top-left to WebGL bottom-left coordinates
     // Top-left coordinates [x, y] to bottom-left coordinates [deviceX, deviceY]
     // And compensate for pixelRatio
-    const devicePixelRange = cssToDevicePixels(gl, [x, y], true);
+    const devicePixelRange = this.device.canvasContext.cssToDevicePixels([x, y], true);
     const devicePixel = [
       devicePixelRange.x + Math.floor(devicePixelRange.width / 2),
       devicePixelRange.y + Math.floor(devicePixelRange.height / 2)
@@ -356,27 +352,25 @@ export default class DeckPicker {
     onViewportActive,
     effects
   }: PickByRectOptions & PickOperationContext): PickingInfo[] {
-    // @ts-expect-error
-    const gl = this.device.gl as WebGLRenderingContext;
-
     const pickableLayers = this._getPickable(layers);
 
     if (!pickableLayers) {
       return [];
     }
 
     this._resizeBuffer();
+
     // Convert from canvas top-left to WebGL bottom-left coordinates
     // And compensate for pixelRatio
-    const pixelRatio = cssToDeviceRatio(gl);
-    const leftTop = cssToDevicePixels(gl, [x, y], true);
+    const pixelRatio = this.device.canvasContext.cssToDeviceRatio();
+    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 = cssToDevicePixels(gl, [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;
 

diff --git a/modules/core/src/lib/deck-renderer.ts b/modules/core/src/lib/deck-renderer.ts
@@ -52,9 +52,7 @@ export default class DeckRenderer {
 
     opts.layerFilter = opts.layerFilter || this.layerFilter;
     opts.effects = opts.effects || [];
-    // @ts-expect-error
-    const gl = this.device.gl as WebGLRenderingContext;
-    opts.target = opts.target || Framebuffer.getDefaultFramebuffer(gl);
+    opts.target = opts.target || Framebuffer.getDefaultFramebuffer(this.device);
 
     this._preRender(opts.effects, opts);