Merge branch 'master' into chr/widgets-in-json

docs/api-reference/core/deck.md

@@ -48,13 +48,19 @@ The following properties are used to initialize a `Deck` instance. Any custom va
 
 The canvas to render into. Can be either a HTMLCanvasElement or the element id. Will be auto-created if not supplied.
 
-#### `gl` (WebGLContext) {#gl}
+#### `device` ([Device](https://luma.gl/docs/api-reference/core/device))
+
+luma.gl Device used to manage the application's connection with the GPU. Will be auto-created if not supplied.
+
+#### `deviceProps` ([DeviceProps](https://luma.gl/docs/api-reference/core/device#deviceprops) | [WebGLDeviceProps](https://luma.gl/docs/api-reference/webgl/#webgldeviceprops)) {#deviceprops}
 
-WebGL context. Will be auto-created if not supplied.
+Options used for creating a new luma.gl GPU [Device](https://luma.gl/docs/api-reference/core/device). 
 
-#### `glOptions` (object) {#gloptions}
+Note that when using WebGL, `props.deviceProps.webgl` can be used to specify [WebGL context attributes](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#contextattributes).
+
+#### `gl` (WebGLContext) {#gl}
 
-Additional options used when creating the WebGLContext. See [WebGL context attributes](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext).
+WebGL context to use. This prop is deprecated and replaced by `device`.
 
 #### `id` (string) {#id}
 
@@ -434,7 +440,7 @@ Called once the [Device](https://luma.gl/docs/api-reference/core/device) context
 
 Receives arguments:
 
-* `device` (Device) - a `WEBGLDevice` or `WebGPUDevice`.
+* `device` (Device) - a `WebGLDevice` or `WebGPUDevice`.
 
 #### `onViewStateChange` (Function) {#onviewstatechange}
 

docs/api-reference/core/widget.md

@@ -33,10 +33,6 @@ class LoadingIndicator implements Widget {
     return el;
   }
 
-  onRemove() {
-    this.element = undefined;
-  }
-
   onRedraw({layers}) {
     const isVisible = layers.some(layer => !layer.isLoaded);
     this.element.style.display = isVisible ? 'block' : 'none';
@@ -96,7 +92,7 @@ Returns an optional UI element that should be appended to the Deck container.
 
 #### `onRemove` {#onremove}
 
-Required. Called when the widget is removed.
+Optional. Called when the widget is removed.
 
 #### `setProps` {#setprops}
 

docs/upgrade-guide.md

@@ -50,11 +50,13 @@ The biggest changes in deck.gl v9 are due to the upgrade to the luma.gl v9 API.
 
 Quick summary:
 
-- All references to `gl: WebGLRenderingContext` should be replaced with `device`: [Device](https://luma.gl/docs/api-reference/core/device).
-- Layer props `parameters` and `textureParameters` no longer use WebGL constants, but instead use (WebGPU style) [string constants](https://luma.gl/docs/api-reference/core/parameters/).
-- Deck class prop `onWebGLInitialized` is now `onDeviceInitialized`.
+- `DeckProps.gl (WebGLRenderingContext)` should be replaced with `device`: [Device](https://luma.gl/docs/api-reference/core/device).
+- `DeckProps.glOptions (WebGLContextAttributes)` should be replaced with `DeckProps.deviceProps.webgl`: `deviceProps: {type: 'webgl', webgl: ...glOptions}`: [WebGLDeviceProps](https://luma.gl/docs/api-reference/webgl/#webgldeviceprops)
+- `DeckProps.glOptions.preserveDrawingBuffers` is now set by default, and does not need to be overridden.
+- `DeckProps.onWebGLInitialized` callback is now `DeckProps.onDeviceInitialized`.
+- `LayerProps.parameters` and `LayerProps.textureParameters` no longer use WebGL constants, but instead use (WebGPU style) [string constants](https://luma.gl/docs/api-reference/core/parameters/).
 - When providing [binary data attributes](./api-reference/core/layer.md#data), `type` is now a WebGPU-style [string format](https://luma.gl/docs/api-guide/gpu/gpu-attributes#vertexformat) instead of a GL constant.
-- GPU resources should no longer be initiated from classes. For example, instead of `new Buffer()` use `device.createBuffer()`, instead of `new Texture()` use `device.createTexture()`. See [Device methods](https://luma.gl/docs/api-reference/core/device#methods).
+- GPU resources should no longer be created by directly instantiating classes. For example, instead of `new Buffer(gl)` use `device.createBuffer()`, instead of `new Texture()` use `device.createTexture()`. See [Device methods](https://luma.gl/docs/api-reference/core/device#methods).
 
 #### Custom Layers
 

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

@@ -31,7 +31,7 @@ const ContourLayerExample = {
     id: 'contourLayer',
     cellSize: 200,
     getPosition: d => d.COORDINATES,
-    gpuAggregation: false, // TODO(v9): Re-enable GPU aggregation.
+    gpuAggregation: true,
     contours: [
       {threshold: 1, color: [255, 0, 0], strokeWidth: 4},
       {threshold: 5, color: [0, 255, 0], strokeWidth: 2},
@@ -47,7 +47,7 @@ const ContourLayerBandsExample = {
     id: 'contourLayer',
     cellSize: 200,
     getPosition: d => d.COORDINATES,
-    gpuAggregation: false, // TODO(v9): Re-enable GPU aggregation.
+    gpuAggregation: true,
     contours: [
       {threshold: [1, 5], color: [255, 0, 0]},
       {threshold: [5, 15], color: [0, 255, 0]},

examples/website/3d-heatmap/app.tsx

@@ -89,7 +89,7 @@ export default function App({
   const layers = [
     new HexagonLayer<DataPoint>({
       id: 'heatmap',
-      // gpuAggregation: true,
+      gpuAggregation: true,
       colorRange,
       coverage,
       data,

examples/website/globe/animated-arc-layer.ts

@@ -5,6 +5,27 @@
 import {ArcLayer, ArcLayerProps} from '@deck.gl/layers';
 import {Accessor, DefaultProps} from '@deck.gl/core';
 
+import type {ShaderModule} from '@luma.gl/shadertools';
+
+const uniformBlock = `\
+uniform tripsUniforms {
+  vec2 timeRange;
+} trips;
+`;
+
+export type TripsProps = {
+  timeRange: [number, number];
+};
+
+export const tripsUniforms = {
+  name: 'trips',
+  vs: uniformBlock,
+  fs: uniformBlock,
+  uniformTypes: {
+    timeRange: 'vec2<f32>'
+  }
+} as const satisfies ShaderModule<TripsProps>;
+
 export type AnimatedArcLayerProps<DataT = any> = _AnimatedArcLayerProps<DataT> &
   ArcLayerProps<DataT>;
 
@@ -31,7 +52,6 @@ export default class AnimatedArcLayer<DataT = any, ExtraProps = {}> extends ArcL
     const shaders = super.getShaders();
     shaders.inject = {
       'vs:#decl': `\
-uniform vec2 timeRange;
 in float instanceSourceTimestamp;
 in float instanceTargetTimestamp;
 out float vTimestamp;
@@ -40,18 +60,18 @@ out float vTimestamp;
 vTimestamp = mix(instanceSourceTimestamp, instanceTargetTimestamp, segmentRatio);
 `,
       'fs:#decl': `\
-uniform vec2 timeRange;
 in float vTimestamp;
 `,
       'fs:#main-start': `\
-if (vTimestamp < timeRange.x || vTimestamp > timeRange.y) {
+if (vTimestamp < trips.timeRange.x || vTimestamp > trips.timeRange.y) {
   discard;
 }
 `,
       'fs:DECKGL_FILTER_COLOR': `\
-color.a *= (vTimestamp - timeRange.x) / (timeRange.y - timeRange.x);
+color.a *= (vTimestamp - trips.timeRange.x) / (trips.timeRange.y - trips.timeRange.x);
 `
     };
+    shaders.modules = [...shaders.modules, tripsUniforms];
     return shaders;
   }
 
@@ -70,10 +90,10 @@ color.a *= (vTimestamp - timeRange.x) / (timeRange.y - timeRange.x);
   }
 
   draw(params) {
-    params.uniforms = {
-      ...params.uniforms,
-      timeRange: this.props.timeRange
-    };
+    const {timeRange} = this.props;
+    const tripsProps: TripsProps = {timeRange};
+    const model = this.state.model!;
+    model.shaderInputs.setProps({trips: tripsProps});
     super.draw(params);
   }
 }

examples/website/plot/plot-layer/axes-layer-uniforms.ts

@@ -0,0 +1,44 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {Texture} from '@luma.gl/core';
+import type {ShaderModule} from '@luma.gl/shadertools';
+
+const uniformBlock = `\
+uniform axesUniforms {
+  float fontSize;
+  vec3 gridCenter;
+  vec3 gridDims;
+  float gridOffset;
+  float labelHeight;
+  vec3 labelWidths;
+  vec4 strokeColor;
+} axes;
+`;
+
+export type AxesProps = {
+  fontSize: number;
+  gridCenter: [number, number, number];
+  gridDims: [number, number, number];
+  gridOffset: number;
+  labelHeight: number;
+  labelWidths: [number, number, number];
+  strokeColor: [number, number, number, number];
+  labelTexture: Texture;
+};
+
+export const axesUniforms = {
+  name: 'axes',
+  vs: uniformBlock,
+  fs: uniformBlock,
+  uniformTypes: {
+    fontSize: 'f32',
+    gridCenter: 'vec3<f32>',
+    gridDims: 'vec3<f32>',
+    gridOffset: 'f32',
+    labelHeight: 'f32',
+    labelWidths: 'vec3<f32>',
+    strokeColor: 'vec4<f32>'
+  }
+} as const satisfies ShaderModule<AxesProps>;

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

@@ -2,7 +2,15 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Color, DefaultProps, Layer, UpdateParameters, Attribute, LayerProps} from '@deck.gl/core';
+import {
+  Color,
+  DefaultProps,
+  Layer,
+  UpdateParameters,
+  Attribute,
+  LayerProps,
+  project32
+} from '@deck.gl/core';
 import {Model, Geometry} from '@luma.gl/engine';
 import {Texture} from '@luma.gl/core';
 
@@ -13,6 +21,7 @@ import gridVertex from './grid-vertex.glsl';
 import labelVertex from './label-vertex.glsl';
 import labelFragment from './label-fragment.glsl';
 import {Axis, TickFormat, Vec3} from './types';
+import {AxesProps, axesUniforms} from './axes-layer-uniforms';
 
 type Tick = {
   axis: 'x' | 'y' | 'z';
@@ -23,7 +32,7 @@ type Tick = {
 
 interface LabelTexture {
   labelHeight: number;
-  labelWidths: number[];
+  labelWidths: [number, number, number];
   labelTexture: Texture;
 }
 
@@ -56,7 +65,6 @@ export default class AxesLayer extends Layer<Required<_AxesLayerProps>> {
 
   state!: {
     models: [Model, Model];
-    modelsByName: {grids: Model; labels: Model};
     ticks: Tick[];
     gridDims: Vec3;
     gridCenter: Vec3;
@@ -112,34 +120,34 @@ export default class AxesLayer extends Layer<Required<_AxesLayerProps>> {
     }
   }
 
-  draw({uniforms}) {
-    const {gridDims, gridCenter, modelsByName, ticks} = this.state;
-    const {labelTexture, ...labelTextureUniforms} = this.state.labelTexture!;
-    const {fontSize, color, padding} = this.props;
+  getShaders() {
+    return super.getShaders({
+      modules: [project32, axesUniforms]
+    });
+  }
 
-    if (labelTexture) {
-      const baseUniforms = {
-        fontSize,
-        gridDims,
-        gridCenter,
-        gridOffset: padding,
-        strokeColor: color
-      };
+  draw(params) {
+    if (!this.state.labelTexture) {
+      return;
+    }
 
-      modelsByName.grids.setInstanceCount(ticks.length);
-      modelsByName.labels.setInstanceCount(ticks.length);
+    const {gridDims, gridCenter, models, ticks} = this.state;
+    const {fontSize, color, padding} = this.props;
 
-      modelsByName.grids.setUniforms({...uniforms, ...baseUniforms});
-      modelsByName.labels.setBindings({labelTexture});
-      modelsByName.labels.setUniforms({
-        ...uniforms,
-        ...baseUniforms,
-        ...labelTextureUniforms
-      });
+    const axesProps: AxesProps = {
+      ...this.state.labelTexture,
+      fontSize,
+      gridDims,
+      gridCenter,
+      gridOffset: padding,
+      strokeColor: color as [number, number, number, number]
+    };
 
-      modelsByName.grids.draw(this.context.renderPass);
-      modelsByName.labels.draw(this.context.renderPass);
-    }
+    models.forEach(model => {
+      model.setInstanceCount(ticks.length);
+      model.shaderInputs.setProps({axes: axesProps});
+    });
+    super.draw(params);
   }
 
   _getModels() {
@@ -187,6 +195,7 @@ export default class AxesLayer extends Layer<Required<_AxesLayerProps>> {
     const {device} = this.context;
 
     const grids = new Model(device, {
+      ...this.getShaders(),
       id: `${this.props.id}-grids`,
       vs: gridVertex,
       fs: gridFragment,
@@ -237,6 +246,7 @@ export default class AxesLayer extends Layer<Required<_AxesLayerProps>> {
     }
 
     const labels = new Model(device, {
+      ...this.getShaders(),
       id: `${this.props.id}-labels`,
       vs: labelVertex,
       fs: labelFragment,
@@ -254,8 +264,7 @@ export default class AxesLayer extends Layer<Required<_AxesLayerProps>> {
     });
 
     return {
-      models: [grids, labels].filter(Boolean),
-      modelsByName: {grids, labels}
+      models: [grids, labels].filter(Boolean)
     };
   }
 

examples/website/plot/plot-layer/grid-vertex.glsl.ts

@@ -12,11 +12,6 @@ in vec2 instancePositions;
 in vec3 instanceNormals;
 in float instanceIsTitle;
 
-uniform vec3 gridDims;
-uniform vec3 gridCenter;
-uniform float gridOffset;
-uniform vec4 strokeColor;
-
 out vec4 vColor;
 out float shouldDiscard;
 
@@ -51,14 +46,14 @@ void main(void) {
   shouldDiscard = frontFacing(gridLineNormal) + instanceIsTitle;
 
   vec3 position_modelspace = vec3(instancePositions.x) *
-    instanceNormals + gridVertexOffset * gridDims / 2.0 + gridCenter * abs(gridVertexOffset);
+    instanceNormals + gridVertexOffset * axes.gridDims / 2.0 + axes.gridCenter * abs(gridVertexOffset);
 
   // apply offsets
-  position_modelspace += gridOffset * gridLineNormal;
+  position_modelspace += axes.gridOffset * gridLineNormal;
 
   vec3 position_commonspace = project_position(position_modelspace);
   gl_Position = project_common_position_to_clipspace(vec4(position_commonspace, 1.0));
 
-  vColor = strokeColor / 255.0;
+  vColor = axes.strokeColor / 255.0;
 }
 `;