feat: Remove webgl-legacy (#8043)

Co-authored-by: Xiaoji Chen <cxiaoji@gmail.com>

.ocularrc.js

@@ -5,13 +5,10 @@ const nodeModules = join(packageRoot, 'node_modules');
 const lumaModules = join(packageRoot, '../luma.gl/modules');
 
 const LUMA_ALIASES_LOCAL = {
-  'luma.gl': `${lumaModules}/main/src`,
   '@luma.gl/constants': `${lumaModules}/constants/src`,
   '@luma.gl/core': `${lumaModules}/core/src`,
-  '@luma.gl/debug': `${lumaModules}/debug/src`,
   '@luma.gl/engine': `${lumaModules}/engine/src`,
   '@luma.gl/webgl': `${lumaModules}/webgl/src`,
-  '@luma.gl/gltools': `${lumaModules}/gltools/src`,
   '@luma.gl/shadertools': `${lumaModules}/shadertools/src`,
   '@luma.gl/test-utils': `${lumaModules}/test-utils/src`,
   '@luma.gl/experimental': `${lumaModules}/experimental/src`

CHANGELOG.md

@@ -3016,13 +3016,13 @@ For Earlier Beta Releases see below
 
 ### deck.gl v4.2 Beta Releases
 
-#### [4.2.0-alpha.31] - Dec 14
+#### [4.2.0-alpha.32] - Dec 14
 - API Audit: remove initWebGLParameters and move pure-js example  (#1235)
 - Fix for invalid triggerName in attribute-manager.invalidate(triggerName) function (#1238)
 - Add polygonLayer geojsonLayer elevationScale prop to whats-new.md (#1237)
 - OrbitController pure-js support (#1234)
 
-#### [4.2.0-alpha.30] - Dec 12
+#### [4.2.0-alpha.32] - Dec 12
 - DOCS: updates to clarify what is experimental in 4.2, in "What's New" and "API Reference".
 - DOCS: New Roadmap doc, linking to RFCs.
 - DOCS: List experimental 4.2 features in Roadmap doc.

docs/developer-guide/custom-layers/primitive-layers.md

@@ -69,7 +69,7 @@ export default class MyLayer extends Layer {
       id: this.props.id,
       geometry: new Geometry({
         id: this.props.id,
-        drawMode: gl.LINES
+        topology: 'line-list',
       }),
       vertexCount: 0,
       isIndexed: true

examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer.js

@@ -112,7 +112,7 @@ export default class BezierCurveLayer extends Layer {
       Object.assign({}, this.getShaders(), {
         id: this.props.id,
         geometry: new Geometry({
-          drawMode: GL.TRIANGLE_STRIP,
+          topology: 'triangle-strip',
           attributes: {
             positions: new Float32Array(positions)
           }

examples/layer-browser/package.json

@@ -9,7 +9,6 @@
   "dependencies": {
     "@loaders.gl/ply": "^3.4.13",
     "@loaders.gl/gltf": "^3.4.13",
-    "@luma.gl/experimental": "^8.5.2",
     "@luma.gl/debug": "^8.5.2",
     "colorbrewer": "^1.0.0",
     "d3-request": "^1.0.6",

examples/layer-browser/src/app.jsx

@@ -165,14 +165,14 @@ export default class App extends PureComponent {
     let index = 1;
     const layers = [
       // the ground - for shadows to drop on
-      new SolidPolygonLayer({
-        id: 'ground',
-        data: LAND_COVER,
-        getPolygon: f => f,
-        extruded: false,
-        filled: true,
-        getFillColor: [0, 0, 0, 0]
-      })
+      // new SolidPolygonLayer({
+      //   id: 'ground',
+      //   data: LAND_COVER,
+      //   getPolygon: f => f,
+      //   extruded: false,
+      //   filled: true,
+      //   getFillColor: [0, 0, 0, 0]
+      // })
     ];
     const {activeExamples} = this.state;
 
@@ -185,7 +185,7 @@ export default class App extends PureComponent {
           const layer = this._renderExampleLayer(example, settings, index++);
 
           if (typeof settings !== 'object') {
-            activeExamples[exampleName] = LayerControls.getSettings(layer.props);
+            activeExamples[exampleName] = LayerControls.getSettings(layer.props, example.props);
           }
 
           layers.push(layer);

examples/layer-browser/src/components/layer-controls.jsx

@@ -36,7 +36,7 @@ function isAccessor(settingName) {
 }
 
 export default class LayerControls extends PureComponent {
-  static getSettings(props) {
+  static getSettings(props, defaults) {
     const keys = [];
     for (const key in props) {
       if (!PROP_BLACK_LIST.has(key)) {
@@ -47,7 +47,7 @@ export default class LayerControls extends PureComponent {
 
     const settings = {};
     for (const key of keys) {
-      settings[key] = props[key];
+      settings[key] = key in defaults ? defaults[key] : props[key];
     }
     return settings;
   }

examples/layer-browser/src/examples/index.js

@@ -1,15 +1,15 @@
 import coreLayerExamples from './core-layers';
-import meshLayerExamples from './mesh-layers';
+// import meshLayerExamples from './mesh-layers';
 import aggregationLayerExamples from './aggregation-layers';
 import additionalLayerExamples from './additional-layers';
-import infovisLayerExamples from './infovis-layers';
+// import infovisLayerExamples from './infovis-layers';
 import perfLayerExamples from './perf-layers';
 
 export default {
   ...coreLayerExamples,
-  ...meshLayerExamples,
+  // ...meshLayerExamples,
   ...aggregationLayerExamples,
   ...additionalLayerExamples,
-  ...infovisLayerExamples,
+  // ...infovisLayerExamples,
   ...perfLayerExamples
 };

examples/layer-browser/src/examples/mesh-layers.js

@@ -2,7 +2,7 @@ import {SimpleMeshLayer, ScenegraphLayer} from '@deck.gl/mesh-layers';
 import {registerLoaders} from '@loaders.gl/core';
 import {GLTFLoader} from '@loaders.gl/gltf';
 import {GLTFEnvironment} from '@luma.gl/experimental';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 
 import * as dataSamples from '../data-samples';
 

examples/playground/json-examples/index.js

@@ -14,6 +14,7 @@ import usMap from './us-map.json';
 import dotText from './dot-text.json';
 
 export default {
+  'website/Scatterplot (ScatterplotLayer)': scatterplot,
   // WEBSITE EXAMPLES AS JSON PAYLOADS
   'website/3D Heatmap (HexagonLayer)': heatmap,
   'website/3D Heatmap (wth Minimap)': heatmapMinimap,

examples/playground/src/configuration.js

@@ -14,7 +14,7 @@ import {
 } from '@deck.gl/carto';
 
 import {COORDINATE_SYSTEM} from '@deck.gl/core';
-import GLConstants from '@luma.gl/constants';
+import {GL as GLConstants} from '@luma.gl/constants';
 
 import {registerLoaders} from '@loaders.gl/core';
 import {CSVLoader} from '@loaders.gl/csv';

examples/website/plot/plot-layer/axes-layer.js

@@ -227,7 +227,7 @@ export default class AxesLayer extends Layer {
       vs: gridVertex,
       fs: fragmentShader,
       geometry: new Geometry({
-        drawMode: GL.LINES,
+        topology: 'line-list',,
         attributes: {
           positions: new Float32Array(gridPositions),
           normals: new Float32Array(gridNormals)
@@ -276,7 +276,7 @@ export default class AxesLayer extends Layer {
       vs: labelVertex,
       fs: labelFragment,
       geometry: new Geometry({
-        drawMode: GL.TRIANGLES,
+        topology: 'triangle-list',
         attributes: {
           indices: new Uint16Array(labelIndices),
           positions: new Float32Array(labelPositions),

examples/website/plot/plot-layer/surface-layer.js

@@ -82,7 +82,7 @@ export default class SurfaceLayer extends Layer {
       vs: surfaceVertex,
       fs: fragmentShader,
       modules: [picking],
-      drawMode: GL.TRIANGLES,
+      topology: 'triangle-list',
       vertexCount: 0,
       isIndexed: true
     });

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "2.0.0",
-  "version": "8.10.0-alpha.2",
+  "version": "9.0.0-alpha.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": [

modules/aggregation-layers/package.json

@@ -31,17 +31,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/shadertools": "9.0.0-alpha.21",
-    "@luma.gl/webgl-legacy": "9.0.0-alpha.21",
+    "@luma.gl/constants": "9.0.0-alpha.35",
+    "@luma.gl/core": "9.0.0-alpha.35",
+    "@luma.gl/shadertools": "9.0.0-alpha.35",
     "@math.gl/web-mercator": "4.0.0-alpha.4",
     "d3-hexbin": "^0.2.1"
   },
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0",
     "@deck.gl/layers": "^8.0.0",
-    "@luma.gl/api": "9.0.0-alpha.21",
-    "@luma.gl/engine": "9.0.0-alpha.21",
-    "@luma.gl/webgl-legacy": "9.0.0-alpha.21"
+    "@luma.gl/core": "9.0.0-alpha.35",
+    "@luma.gl/engine": "9.0.0-alpha.35"
   },
   "gitHead": "13ace64fc2cee08c133afc882fc307253489a4e4"
 }

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

@@ -75,7 +75,7 @@ export default abstract class AggregationLayer<
   }
 
   getAttributes() {
-    return this.getAttributeManager()!.getShaderAttributes();
+    return this.getAttributeManager()!.getAttributes();
   }
 
   getModuleSettings() {

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

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {GL} from '@luma.gl/webgl-legacy';
+import {GL} from '@luma.gl/constants';
 import {LineLayer, SolidPolygonLayer} from '@deck.gl/layers';
 import {generateContours} from './contour-utils';
 import {

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

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {GL} from '@luma.gl/webgl-legacy';
+import {GL} from '@luma.gl/constants';
 import {GridCellLayer} from '@deck.gl/layers';
 import {Accessor, AccessorFunction, Color, Position, Material, DefaultProps} from '@deck.gl/core';
 

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

@@ -29,7 +29,9 @@ import {
 } from '@deck.gl/core';
 import {CubeGeometry} from '@luma.gl/engine';
 import {fp64arithmetic} from '@luma.gl/shadertools';
-import {GL, Model, Buffer} from '@luma.gl/webgl-legacy';
+import {Model} from '@luma.gl/engine';
+import {Buffer} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
 import {defaultColorRange, colorRangeToFlatArray} from '../utils/color-utils';
 import type {_GPUGridLayerProps} from './gpu-grid-layer';
 import vs from './gpu-grid-cell-layer-vertex.glsl';
@@ -128,24 +130,23 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
     const domainUniforms = this.getDomainUniforms();
     const colorRange = colorRangeToFlatArray(this.props.colorRange);
     this.bindUniformBuffers(colorMaxMinBuffer, elevationMaxMinBuffer);
-    this.state.model
-      .setUniforms(uniforms)
-      .setUniforms(domainUniforms)
-      .setUniforms({
-        cellSize,
-        offset,
-        extruded,
-        elevationScale,
-        coverage,
-        gridSize,
-        gridOrigin,
-        gridOriginLow,
-        gridOffset,
-        gridOffsetLow,
-        colorRange,
-        elevationRange
-      })
-      .draw();
+    this.state.model.setUniforms(uniforms);
+    this.state.model.setUniforms(domainUniforms);
+    this.state.model.setUniforms({
+      cellSize,
+      offset,
+      extruded,
+      elevationScale,
+      coverage,
+      gridSize,
+      gridOrigin,
+      gridOriginLow,
+      gridOffset,
+      gridOffsetLow,
+      colorRange,
+      elevationRange
+    });
+    this.state.model.draw(this.context.renderPass);
     this.unbindUniformBuffers(colorMaxMinBuffer, elevationMaxMinBuffer);
   }
 
@@ -178,7 +179,8 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
   }
 
   private _setupUniformBuffer(model: Model): void {
-    const programHandle = model.program.handle;
+    // @ts-expect-error TODO v9 This code is not portable to WebGPU
+    const programHandle = model.pipeline.handle;
 
     const gl = this.context.gl as WebGL2RenderingContext;
     const colorIndex = gl.getUniformBlockIndex(programHandle, 'ColorData');

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

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {GL, Buffer} from '@luma.gl/webgl-legacy';
+import {GL} from '@luma.gl/constants';
 import {
   Accessor,
   AccessorFunction,
@@ -192,17 +192,19 @@ export default class GPUGridLayer<
           needMin: true,
           needMax: true,
           combineMaxMin: true,
-          maxMinBuffer: new Buffer(device, {
+          maxMinBuffer: device.createBuffer({
             byteLength: 4 * 4,
+            // @ts-expect-error webgl-legacy
             accessor: {size: 4, type: GL.FLOAT, divisor: 1}
           })
         },
         elevation: {
           needMin: true,
           needMax: true,
           combineMaxMin: true,
-          maxMinBuffer: new Buffer(device, {
+          maxMinBuffer: device.createBuffer({
             byteLength: 4 * 4,
+            // @ts-expect-error
             accessor: {size: 4, type: GL.FLOAT, divisor: 1}
           })
         }

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

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {GL, Buffer} from '@luma.gl/webgl-legacy';
+import {GL} from '@luma.gl/constants';
 import {LayerContext, log, UpdateParameters} from '@deck.gl/core';
 import AggregationLayer, {AggregationLayerProps} from './aggregation-layer';
 import GPUGridAggregator from './utils/gpu-grid-aggregation/gpu-grid-aggregator';
@@ -114,8 +114,9 @@ export default abstract class GridAggregationLayer<
         if (weight.aggregationBuffer) {
           weight.aggregationBuffer.delete();
         }
-        weight.aggregationBuffer = new Buffer(this.context.device, {
+        weight.aggregationBuffer = this.context.device.createBuffer({
           byteLength: dataBytes,
+          // @ts-expect-error legacy
           accessor: {
             size: 4,
             type: GL.FLOAT,

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

@@ -1,5 +1,5 @@
-import {Device} from '@luma.gl/api';
-import {GL} from '@luma.gl/webgl-legacy';
+import {Device} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
 
 export function getBounds(points: number[][]): number[] {
   // Now build bounding box in world space (aligned to world coordiante system)