feat(layers): ScatterplotLayer uniform buffer

.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/api-reference/core/deck.md

@@ -141,7 +141,7 @@ Note:
 
 ##### `parameters` (Object) {#parameters}
 
-Expects an object with WebGL settings. Before each frame is rendered, this object will be passed to luma.gl's `setParameters` function to reset the WebGL context parameters, e.g. to disable depth testing, change blending modes etc. The default parameters set by `Deck` on initialization are the following:
+Expects an object with WebGL settings. Before each frame is rendered, this object will be passed to luma.gl's `setGLParameters` function to reset the WebGL context parameters, e.g. to disable depth testing, change blending modes etc. The default parameters set by `Deck` on initialization are the following:
 
 ```js
 {
@@ -153,7 +153,7 @@ Expects an object with WebGL settings. Before each frame is rendered, this objec
 }
 ```
 
-Refer to the luma.gl [setParameters](https://github.com/visgl/luma.gl/blob/8.5-release/modules/gltools/docs/api-reference/parameter-setting.md) API for documentation on supported parameters and values.
+Refer to the luma.gl [setGLParameters](https://github.com/visgl/luma.gl/blob/8.5-release/modules/gltools/docs/api-reference/parameter-setting.md) API for documentation on supported parameters and values.
 
 ```js
 import GL from '@luma.gl/constants';
@@ -169,7 +169,7 @@ new Deck({
 Notes:
 
 - Any WebGL `parameters` prop supplied to individual layers will still override the global `parameters` when that layer is rendered.
-- An alternative way to set `parameters`  is to instead define the `onWebGLInitialized` callback (it receives the `gl` context as parameter) and call the luma.gl `setParameters` method inside it.
+- An alternative way to set `parameters`  is to instead define the `onWebGLInitialized` callback (it receives the `gl` context as parameter) and call the luma.gl `setGLParameters` method inside it.
 
 ##### `layers` (Array) {#layers}
 

docs/api-reference/core/layer.md

@@ -472,7 +472,7 @@ The function receives two arguments:
 
 The `parameters` allows applications to specify values for WebGL parameters such as blending mode, depth testing etc. Any `parameters` will be applied temporarily while rendering this layer only.
 
-To get access to static parameter values, applications can `import GL from '@luma.gl/constants'`. Please refer to the luma.gl [setParameters](https://github.com/visgl/luma.gl/blob/8.5-release/modules/gltools/docs/api-reference/parameter-setting.md) API for documentation on supported parameters and values.
+To get access to static parameter values, applications can `import GL from '@luma.gl/constants'`. Please refer to the luma.gl [setGLParameters](https://github.com/visgl/luma.gl/blob/8.5-release/modules/gltools/docs/api-reference/parameter-setting.md) API for documentation on supported parameters and values.
 
 
 ##### `getPolygonOffset` (Function, optional) {#getpolygonoffset}

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

docs/developer-guide/tips-and-tricks.md

@@ -7,7 +7,7 @@
 
 The base `Layer` class (which is inherited by all layers) supports a `parameters` property that allows applications to specify the state of WebGL parameters such as blending mode, depth testing etc. This can provide signigicant extra control over rendering.
 
-The new `parameters` prop leverages the luma.gl v4 [setParameters](https://github.com/visgl/luma.gl/blob/8.5-release/modules/gltools/docs/api-reference/parameter-setting.md) API, which allows all WebGL parameters to be specified as keys in a single parameter object.
+The new `parameters` prop leverages the luma.gl v4 [setGLParameters](https://github.com/visgl/luma.gl/blob/8.5-release/modules/gltools/docs/api-reference/parameter-setting.md) API, which allows all WebGL parameters to be specified as keys in a single parameter object.
 
 
 ### z-fighting and Depth Testing

docs/whats-new.md

@@ -1639,7 +1639,7 @@ For developers that write their own custom layers, the `shadertools` shader asse
 
 ### Per-Layer Control of WebGL Parameters
 
-The base `Layer` class (which is inherited by all layers) supports a new property `parameters` that allows applications to specify the state of WebGL parameters such as blending mode, depth testing etc. This provides applications with significant control over the detailed rendering of layers. Note that the new `parameters` prop directly leverages the luma.gl v4 [setParameters](https://luma.gl/docs/api-reference-legacy/context/parameter-setting#setparameters) API, which allows all WebGL parameters to be specified as keys in a single parameter object.
+The base `Layer` class (which is inherited by all layers) supports a new property `parameters` that allows applications to specify the state of WebGL parameters such as blending mode, depth testing etc. This provides applications with significant control over the detailed rendering of layers. Note that the new `parameters` prop directly leverages the luma.gl v4 [setGLParameters](https://luma.gl/docs/api-reference-legacy/context/parameter-setting#setparameters) API, which allows all WebGL parameters to be specified as keys in a single parameter object.
 
 
 ### Layer Attribute Control

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/experimental/tfjs/src/tf-utils/tf-context.ts

@@ -1,4 +1,4 @@
-import {pushContextState, popContextState, getParameters, setParameters} from '@luma.gl/gltools';
+import {pushContextState, popContextState, getGLParameters, setGLParameters} from '@luma.gl/gltools';
 import * as tf from '@tensorflow/tfjs';
 import * as tfgl from '@tensorflow/tfjs-backend-webgl';
 import GL from '@luma.gl/constants';
@@ -41,7 +41,7 @@ export class CustomTFContext {
     pushContextState(gl);
 
     if (this.lastContextState) {
-      setParameters(gl, this.lastContextState);
+      setGLParameters(gl, this.lastContextState);
       (gl as WebGL2RenderingContext).bindVertexArray(
         this.lastContextState[GL.VERTEX_ARRAY_BINDING]
       );
@@ -56,7 +56,7 @@ export class CustomTFContext {
     });
 
     this.lastContextState = {
-      ...getParameters(gl),
+      ...getGLParameters(gl),
       // gl states not tracked by luma but expected by TF
       [GL.ELEMENT_ARRAY_BUFFER_BINDING]: gl.getParameter(GL.ELEMENT_ARRAY_BUFFER_BINDING),
       [GL.VERTEX_ARRAY_BINDING]: gl.getParameter(GL.VERTEX_ARRAY_BINDING)

examples/layer-browser/package.json

@@ -9,7 +9,6 @@
   "dependencies": {
     "@loaders.gl/ply": "^3.4.2",
     "@loaders.gl/gltf": "^3.4.2",
-    "@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;
 

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.36",
+    "@luma.gl/core": "9.0.0-alpha.36",
+    "@luma.gl/shadertools": "9.0.0-alpha.36",
     "@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.36",
+    "@luma.gl/engine": "9.0.0-alpha.36"
   },
   "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}
           })
         }