@deck.gl/core 9.3.0-alpha.1 → 9.3.0-alpha.3

package/src/effects/lighting/lighting-effect.ts

@@ -11,7 +11,7 @@ import {Matrix4, Vector3} from '@math.gl/core';
 import ShadowPass from '../../passes/shadow-pass';
 import shadow from '../../shaderlib/shadow/shadow';
 
-import type {LightingProps} from '@luma.gl/shadertools';
+import type {Light, LightingProps} from '@luma.gl/shadertools';
 import type {ShadowModuleProps} from '../../shaderlib/shadow/shadow';
 import type Layer from '../../lib/layer';
 import type {Effect, EffectContext, PreRenderOptions} from '../../lib/effect';
@@ -140,15 +140,9 @@ export default class LightingEffect implements Effect {
         } satisfies ShadowModuleProps)
       : {};
 
-    // when not rendering to screen, turn off lighting by adding empty light source object
-    // lights shader module relies on the `lightSources` to turn on/off lighting
     const lightingProps: LightingProps = {
       enabled: true,
-      ambientLight: this.ambientLight,
-      directionalLights: this.directionalLights.map(directionalLight =>
-        directionalLight.getProjectedLight({layer})
-      ),
-      pointLights: this.pointLights.map(pointLight => pointLight.getProjectedLight({layer}))
+      lights: this._getLights(layer)
     };
     // @ts-expect-error material is not a Layer prop
     const materialProps = layer.props.material;
@@ -203,4 +197,22 @@ export default class LightingEffect implements Effect {
       );
     }
   }
+
+  private _getLights(layer: Layer): Light[] {
+    const lights: Light[] = [];
+
+    if (this.ambientLight) {
+      lights.push(this.ambientLight);
+    }
+
+    for (const pointLight of this.pointLights) {
+      lights.push(pointLight.getProjectedLight({layer}));
+    }
+
+    for (const directionalLight of this.directionalLights) {
+      lights.push(directionalLight.getProjectedLight({layer}));
+    }
+
+    return lights;
+  }
 }

package/src/index.ts

@@ -65,6 +65,7 @@ export {default as _GlobeView} from './views/globe-view';
 // Controllers
 export {default as Controller} from './controllers/controller';
 export {default as MapController} from './controllers/map-controller';
+export {default as TerrainController} from './controllers/terrain-controller';
 export {default as _GlobeController} from './controllers/globe-controller';
 export {default as FirstPersonController} from './controllers/first-person-controller';
 export {default as OrbitController} from './controllers/orbit-controller';

package/src/lib/attribute/attribute-manager.ts

@@ -235,6 +235,7 @@ export default class AttributeManager {
 
     if (this.stats) {
       this.stats.get('Update Attributes').timeEnd();
+      if (updated) this.stats.get('Attributes updated').incrementCount();
     }
 
     this.attributeTransitionManager.update({

package/src/lib/deck-picker.ts

@@ -11,7 +11,8 @@ import {
   getEmptyPickingInfo,
   PickingInfo
 } from './picking/pick-info';
-
+import type {RenderStats} from '../passes/layers-pass';
+import type {Stats} from '@probe.gl/stats';
 import type {Framebuffer} from '@luma.gl/core';
 import type {FilterContext, Rect} from '../passes/layers-pass';
 import type Layer from './layer';
@@ -52,6 +53,7 @@ export default class DeckPicker {
   depthFBO?: Framebuffer;
   pickLayersPass: PickLayersPass;
   layerFilter?: (context: FilterContext) => boolean;
+  stats?: Stats;
 
   /** Identifiers of the previously picked object, for callback tracking and auto highlight */
   lastPickedInfo: {
@@ -62,8 +64,9 @@ export default class DeckPicker {
 
   _pickable: boolean = true;
 
-  constructor(device: Device) {
+  constructor(device: Device, opts: {stats?: Stats} = {}) {
     this.device = device;
+    this.stats = opts.stats;
     this.pickLayersPass = new PickLayersPass(device);
     this.lastPickedInfo = {
       index: -1,
@@ -808,7 +811,8 @@ export default class DeckPicker {
       }
     }
 
-    const {decodePickingColor} = this.pickLayersPass.render(opts);
+    const {decodePickingColor, stats} = this.pickLayersPass.render(opts);
+    this._updateStats(stats);
 
     // Read from an already rendered picking buffer
     // Returns an Uint8ClampedArray of picked pixels
@@ -913,7 +917,8 @@ export default class DeckPicker {
       }
     }
 
-    const {decodePickingColor} = this.pickLayersPass.render(opts);
+    const {decodePickingColor, stats} = this.pickLayersPass.render(opts);
+    this._updateStats(stats);
 
     // Read from an already rendered picking buffer
     // Returns an Uint8ClampedArray of picked pixels
@@ -930,6 +935,15 @@ export default class DeckPicker {
     return {pickedColors, decodePickingColor};
   }
 
+  private _updateStats(source: RenderStats[]) {
+    if (!this.stats) return;
+    let layersCount = 0;
+    for (const {visibleCount} of source) {
+      layersCount += visibleCount;
+    }
+    this.stats.get('Layers picked').addCount(layersCount);
+  }
+
   /**
    * Determine which layers to use for the depth (pickZ) pass.
    * - If a non-draped layer was picked, use just that layer.

package/src/lib/deck-renderer.ts

@@ -7,7 +7,8 @@ import {Framebuffer} from '@luma.gl/core';
 import debug from '../debug/index';
 import DrawLayersPass from '../passes/draw-layers-pass';
 import PickLayersPass from '../passes/pick-layers-pass';
-
+import type {RenderStats} from '../passes/layers-pass';
+import type {Stats} from '@probe.gl/stats';
 import type Layer from './layer';
 import type Viewport from '../viewports/viewport';
 import type View from '../views/view';
@@ -24,14 +25,16 @@ export default class DeckRenderer {
   drawPickingColors: boolean;
   drawLayersPass: DrawLayersPass;
   pickLayersPass: PickLayersPass;
+  stats?: Stats;
 
   private renderCount: number;
   private _needsRedraw: string | false;
   private renderBuffers: Framebuffer[];
   private lastPostProcessEffect: string | null;
 
-  constructor(device: Device) {
+  constructor(device: Device, opts: {stats?: Stats} = {}) {
     this.device = device;
+    this.stats = opts.stats;
     this.layerFilter = null;
     this.drawPickingColors = false;
     this.drawLayersPass = new DrawLayersPass(device);
@@ -88,7 +91,8 @@ export default class DeckRenderer {
       renderOpts.clearColor = [0, 0, 0, 0];
       renderOpts.clearCanvas = true;
     }
-    const renderStats = layerPass.render({...renderOpts, target: outputBuffer});
+    const renderResult = layerPass.render({...renderOpts, target: outputBuffer});
+    const renderStats = 'stats' in renderResult ? renderResult.stats : renderResult;
 
     if (renderOpts.effects) {
       if (this.lastPostProcessEffect) {
@@ -102,6 +106,7 @@ export default class DeckRenderer {
     this.renderCount++;
 
     debug(TRACE_RENDER_LAYERS, this, renderStats, opts);
+    this._updateStats(renderStats);
   }
 
   needsRedraw(opts: {clearRedrawFlags: boolean} = {clearRedrawFlags: false}): string | false {
@@ -120,6 +125,15 @@ export default class DeckRenderer {
     renderBuffers.length = 0;
   }
 
+  private _updateStats(source: RenderStats[]) {
+    if (!this.stats) return;
+    let layersCount = 0;
+    for (const {visibleCount} of source) {
+      layersCount += visibleCount;
+    }
+    this.stats.get('Layers rendered').addCount(layersCount);
+  }
+
   private _preRender(effects: Effect[], opts: LayersPassRenderOptions) {
     this.lastPostProcessEffect = null;
     opts.preRenderStats = opts.preRenderStats || {};

package/src/lib/deck.ts

@@ -55,10 +55,15 @@ const getCursor = ({isDragging}) => (isDragging ? 'grabbing' : 'grab');
 export type DeckMetrics = {
   fps: number;
   setPropsTime: number;
+  layersCount: number;
+  drawLayersCount: number;
+  updateLayersCount: number;
   updateAttributesTime: number;
+  updateAttributesCount: number;
   framesRedrawn: number;
   pickTime: number;
   pickCount: number;
+  pickLayersCount: number;
   gpuTime: number;
   gpuTimePerFrame: number;
   cpuTime: number;
@@ -309,10 +314,15 @@ export default class Deck<ViewsT extends ViewOrViews = null> {
   protected metrics: DeckMetrics = {
     fps: 0,
     setPropsTime: 0,
+    layersCount: 0,
+    drawLayersCount: 0,
+    updateLayersCount: 0,
+    updateAttributesCount: 0,
     updateAttributesTime: 0,
     framesRedrawn: 0,
     pickTime: 0,
     pickCount: 0,
+    pickLayersCount: 0,
     gpuTime: 0,
     gpuTimePerFrame: 0,
     cpuTime: 0,
@@ -1132,9 +1142,9 @@ export default class Deck<ViewsT extends ViewOrViews = null> {
       device: this.device
     });
 
-    this.deckRenderer = new DeckRenderer(this.device);
+    this.deckRenderer = new DeckRenderer(this.device, {stats: this.stats});
 
-    this.deckPicker = new DeckPicker(this.device);
+    this.deckPicker = new DeckPicker(this.device, {stats: this.stats});
 
     const widgetParent =
       this.props.parent?.querySelector<HTMLDivElement>('.deck-widgets-root') ||
@@ -1349,13 +1359,19 @@ export default class Deck<ViewsT extends ViewOrViews = null> {
       stats.get('pickObjects Time').time;
     metrics.pickCount = stats.get('Pick Count').count;
 
+    metrics.layersCount = this.layerManager?.layers.length ?? 0;
+    metrics.drawLayersCount = stats.get('Layers rendered').lastSampleCount;
+    metrics.pickLayersCount = stats.get('Layers picked').lastSampleCount;
+    metrics.updateAttributesCount = stats.get('Layers updated').count;
+    metrics.updateAttributesCount = stats.get('Attributes updated').count;
+
     // Luma stats
     metrics.gpuTime = stats.get('GPU Time').time;
     metrics.cpuTime = stats.get('CPU Time').time;
     metrics.gpuTimePerFrame = stats.get('GPU Time').getAverageTime();
     metrics.cpuTimePerFrame = stats.get('CPU Time').getAverageTime();
 
-    const memoryStats = luma.stats.get('Memory Usage');
+    const memoryStats = luma.stats.get('GPU Time and Memory');
     metrics.bufferMemory = memoryStats.get('Buffer Memory').count;
     metrics.textureMemory = memoryStats.get('Texture Memory').count;
     metrics.renderbufferMemory = memoryStats.get('Renderbuffer Memory').count;

package/src/lib/layer.ts

@@ -969,6 +969,7 @@ export default abstract class Layer<PropsT extends {} = {}> extends Component<
     if (!stateNeedsUpdate) {
       return;
     }
+    this.context.stats.get('Layer updates').incrementCount();
 
     const currentProps = this.props;
     const context = this.context;

package/src/passes/draw-layers-pass.ts

@@ -3,10 +3,15 @@
 // Copyright (c) vis.gl contributors
 
 import LayersPass from './layers-pass';
+import type {LayersPassRenderOptions, RenderStats} from './layers-pass';
 
 export default class DrawLayersPass extends LayersPass {
   shouldDrawLayer(layer) {
     const {operation} = layer.props;
     return operation.includes('draw') || operation.includes('terrain');
   }
+
+  render(options: LayersPassRenderOptions): RenderStats[] {
+    return this._render(options);
+  }
 }

package/src/passes/layers-pass.ts

@@ -65,7 +65,11 @@ export type RenderStats = {
 export default class LayersPass extends Pass {
   _lastRenderIndex: number = -1;
 
-  render(options: LayersPassRenderOptions): any {
+  render(options: LayersPassRenderOptions): void {
+    this._render(options);
+  }
+
+  protected _render(options: LayersPassRenderOptions): RenderStats[] {
     const canvasContext = this.device.canvasContext!;
     const framebuffer = options.target ?? canvasContext.getCurrentFramebuffer();
     const [width, height] = canvasContext.getDrawingBufferSize();

package/src/passes/pick-layers-pass.ts

@@ -46,13 +46,17 @@ export default class PickLayersPass extends LayersPass {
     byAlpha: EncodedPickingColors[];
   } | null = null;
 
-  render(props: LayersPassRenderOptions | PickLayersPassRenderOptions) {
+  render(props: LayersPassRenderOptions | PickLayersPassRenderOptions): {
+    decodePickingColor: PickingColorDecoder | null;
+    stats: RenderStats[];
+  } {
     if ('pickingFBO' in props) {
       // When drawing into an off-screen buffer, use the alpha channel to encode layer index
       return this._drawPickingBuffer(props);
     }
     // When drawing to screen (debug mode), do not use the alpha channel so that result is always visible
-    return super.render(props);
+    const stats = super._render(props);
+    return {decodePickingColor: null, stats};
   }
 
   // Private
@@ -74,7 +78,7 @@ export default class PickLayersPass extends LayersPass {
     clearColor
   }: PickLayersPassRenderOptions): {
     decodePickingColor: PickingColorDecoder | null;
-    stats: RenderStats;
+    stats: RenderStats[];
   } {
     this.pickZ = pickZ;
     const colorEncoderState = this._resetColorEncoder(pickZ);
@@ -85,7 +89,7 @@ export default class PickLayersPass extends LayersPass {
     // Note that the callback here is called synchronously.
     // Set blend mode for picking
     // always overwrite existing pixel with [r,g,b,layerIndex]
-    const renderStatus = super.render({
+    const renderStatus = super._render({
       target: pickingFBO,
       layers,
       layerFilter,

package/src/shaderlib/project/project.glsl.ts

@@ -265,6 +265,9 @@ vec2 project_pixel_size_to_clipspace(vec2 pixels) {
 float project_size_to_pixel(float meters) {
   return project_size(meters) * project.scale;
 }
+vec2 project_size_to_pixel(vec2 meters) {
+  return project_size(meters) * project.scale;
+}
 float project_size_to_pixel(float size, int unit) {
   if (unit == UNIT_METERS) return project_size_to_pixel(size);
   if (unit == UNIT_COMMON) return size * project.scale;

package/src/utils/deep-merge.ts

@@ -0,0 +1,33 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+/** Merge two viewstates, except `id`
+ * For position arrays such as `target`, only override the components that are defined.
+ */
+export function deepMergeViewState<ViewStateT extends Record<string, any>>(
+  a: ViewStateT,
+  b: ViewStateT
+): ViewStateT {
+  const result = {...a};
+  for (const key in b) {
+    if (key === 'id') continue;
+    if (Array.isArray(result[key]) && Array.isArray(b[key])) {
+      result[key] = mergeNumericArray(result[key], b[key]) as any;
+    } else {
+      result[key] = b[key];
+    }
+  }
+  return result;
+}
+
+function mergeNumericArray(target: number[], source: number[]): number[] {
+  target = target.slice();
+  for (let i = 0; i < source.length; i++) {
+    const v = source[i];
+    if (Number.isFinite(v)) {
+      target[i] = v;
+    }
+  }
+  return target;
+}

package/src/utils/math-utils.ts

@@ -26,6 +26,18 @@ export function getCameraPosition(
   return [viewMatrixInverse[12], viewMatrixInverse[13], viewMatrixInverse[14]];
 }
 
+export function getProjectionParameters(projectionMatrix: Matrix4 | NumericArray): {
+  near: number;
+  far: number;
+} {
+  const m22 = projectionMatrix[10];
+  const m23 = projectionMatrix[14];
+  return {
+    near: m23 / (m22 - 1),
+    far: m23 / (m22 + 1)
+  };
+}
+
 export type FrustumPlane = {
   distance: number;
   normal: Vector3;

package/src/viewports/globe-viewport.ts

@@ -13,7 +13,7 @@ import {vec3, vec4} from '@math.gl/core';
 const DEGREES_TO_RADIANS = Math.PI / 180;
 const RADIANS_TO_DEGREES = 180 / Math.PI;
 const EARTH_RADIUS = 6370972;
-const GLOBE_RADIUS = 256;
+export const GLOBE_RADIUS = 256;
 
 function getDistanceScales() {
   const unitsPerMeter = GLOBE_RADIUS / EARTH_RADIUS;

package/src/viewports/orbit-viewport.ts

@@ -6,6 +6,7 @@ import Viewport from '../viewports/viewport';
 
 import {Matrix4} from '@math.gl/core';
 import {pixelsToWorld, fovyToAltitude} from '@math.gl/web-mercator';
+import {getProjectionParameters} from '../utils/math-utils';
 
 const DEGREES_TO_RADIANS = Math.PI / 180;
 
@@ -150,9 +151,14 @@ export default class OrbitViewport extends Viewport {
 
   panByPosition(coords: number[], pixel: number[], startPixel?: number[]): OrbitViewportOptions {
     const p0 = this.project(coords);
+    const {near, far} = getProjectionParameters(this.projectionMatrix);
+    const pz = (near * far) / (far - p0[2] * (far - near));
+    const centerZ = (near * far) / (far - this.projectedCenter[2] * (far - near));
+    const shiftScale = pz / centerZ;
+
     const nextCenter = [
-      this.width / 2 + p0[0] - pixel[0],
-      this.height / 2 + p0[1] - pixel[1],
+      this.width / 2 + (p0[0] - pixel[0]) * shiftScale,
+      this.height / 2 + (p0[1] - pixel[1]) * shiftScale,
       this.projectedCenter[2]
     ];
     return {

package/src/viewports/orthographic-viewport.ts

@@ -48,6 +48,10 @@ function getProjectionMatrix({
   });
 }
 
+/** independent zoom levels for X and Y axes
+ * @deprecated use `zoomX` and `zoomY` instead */
+type Deprecated2DZoom = [number, number];
+
 export type OrthographicViewportOptions = {
   /** Name of the viewport */
   id?: string;
@@ -62,8 +66,10 @@ export type OrthographicViewportOptions = {
   /** The world position at the center of the viewport. Default `[0, 0, 0]`. */
   target?: [number, number, number] | [number, number];
   /**  The zoom level of the viewport. `zoom: 0` maps one unit distance to one pixel on screen, and increasing `zoom` by `1` scales the same object to twice as large.
-   *   To apply independent zoom levels to the X and Y axes, supply an array `[zoomX, zoomY]`. Default `0`. */
-  zoom?: number | [number, number];
+   *   To apply independent zoom levels to the X and Y axes, use `zoomX` and `zoomY`.
+   * @default 0
+   */
+  zoom?: number | Deprecated2DZoom;
   /** Independent zoom along the X axis. Overrides `zoom`. */
   zoomX?: number;
   /** Independent zoom along the Y axis. Overrides `zoom`. */

package/src/views/orthographic-view.ts

@@ -6,16 +6,50 @@ import View, {CommonViewState, CommonViewProps} from './view';
 import OrthographicViewport from '../viewports/orthographic-viewport';
 import OrthographicController from '../controllers/orthographic-controller';
 
+/** independent zoom levels for X and Y axes
+ * @deprecated use `zoomX` and `zoomY` instead */
+type Deprecated2DZoom = [number, number];
+
 export type OrthographicViewState = {
   /** The world position at the center of the viewport. Default `[0, 0, 0]`. */
   target?: [number, number, number] | [number, number];
   /**  The zoom level of the viewport. `zoom: 0` maps one unit distance to one pixel on screen, and increasing `zoom` by `1` scales the same object to twice as large.
-   *   To apply independent zoom levels to the X and Y axes, supply an array `[zoomX, zoomY]`. Default `0`. */
-  zoom?: number | [number, number];
-  /** The min zoom level of the viewport. Default `-Infinity`. */
+   *   To apply independent zoom levels to the X and Y axes, use `zoomX` and `zoomY`.
+   * @default 0
+   */
+  zoom?: number | Deprecated2DZoom;
+  /** Which axes to apply zoom to. One of 'X', 'Y' or 'all'
+   * @default 'all'
+   */
+  zoomAxis?: 'X' | 'Y' | 'all';
+  /** The zoom level along X axis. Overrides `zoom` if supplied. */
+  zoomX?: number;
+  /** The zoom level along Y axis. Overrides `zoom` if supplied. */
+  zoomY?: number;
+  /** The min zoom level of the viewport.
+   * @default -Infinity
+   */
   minZoom?: number;
-  /** The max zoom level of the viewport. Default `Infinity`. */
+  /** The max zoom level of the viewport.
+   * @default Infinity
+   */
   maxZoom?: number;
+  /** The min zoom level along X axis.
+   * @default `minZoom`
+   */
+  maxZoomX?: number;
+  /** The max zoom level along X axis.
+   * @default `maxZoom`
+   */
+  minZoomX?: number;
+  /** The min zoom level along Y axis.
+   * @default `minZoom`
+   */
+  maxZoomY?: number;
+  /** The max zoom level along Y axis.
+   * @default `maxZoom`
+   */
+  minZoomY?: number;
 } & CommonViewState;
 
 export type OrthographicViewProps = {

package/src/views/view.ts

@@ -5,6 +5,7 @@
 import Viewport from '../viewports/viewport';
 import {parsePosition, getPosition, LayoutExpression} from '../utils/positions';
 import {deepEqual} from '../utils/deep-equal';
+import {deepMergeViewState} from '../utils/deep-merge';
 import type Controller from '../controllers/controller';
 import type {ControllerOptions} from '../controllers/controller';
 import type {TransitionProps} from '../controllers/transition-manager';
@@ -148,14 +149,7 @@ export default abstract class View<
         return this.props.viewState as ViewState;
       }
 
-      // Merge in all props from View's viewState, except id
-      const newViewState = {...viewState};
-      for (const key in this.props.viewState) {
-        if (key !== 'id') {
-          newViewState[key] = this.props.viewState[key];
-        }
-      }
-      return newViewState;
+      return deepMergeViewState<ViewState>(viewState, this.props.viewState as ViewState);
     }
 
     return viewState;