@deck.gl/core 9.3.0-alpha.2 → 9.3.0-alpha.5

package/package.json

@@ -3,7 +3,7 @@
   "description": "deck.gl core library",
   "license": "MIT",
   "type": "module",
-  "version": "9.3.0-alpha.2",
+  "version": "9.3.0-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -42,11 +42,10 @@
   "dependencies": {
     "@loaders.gl/core": "^4.4.0-alpha.18",
     "@loaders.gl/images": "^4.4.0-alpha.18",
-    "@luma.gl/constants": "^9.3.0-alpha.6",
-    "@luma.gl/core": "^9.3.0-alpha.6",
-    "@luma.gl/engine": "^9.3.0-alpha.6",
-    "@luma.gl/shadertools": "^9.3.0-alpha.6",
-    "@luma.gl/webgl": "^9.3.0-alpha.6",
+    "@luma.gl/core": "^9.3.0-alpha.10",
+    "@luma.gl/engine": "^9.3.0-alpha.10",
+    "@luma.gl/shadertools": "^9.3.0-alpha.10",
+    "@luma.gl/webgl": "^9.3.0-alpha.10",
     "@math.gl/core": "^4.1.0",
     "@math.gl/sun": "^4.1.0",
     "@math.gl/types": "^4.1.0",
@@ -58,5 +57,5 @@
     "gl-matrix": "^3.0.0",
     "mjolnir.js": "^3.0.0"
   },
-  "gitHead": "135d329f4a4b596ae2c16e4eb801eda30252f3bc"
+  "gitHead": "c3ad1cee357af674cc31df37979d61325baf9d7a"
 }

package/src/controllers/terrain-controller.ts

@@ -0,0 +1,155 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import MapController from './map-controller';
+import {MapState, MapStateProps} from './map-controller';
+import type {ControllerProps, InteractionState} from './controller';
+import type {MjolnirGestureEvent, MjolnirWheelEvent} from 'mjolnir.js';
+
+/**
+ * Controller that extends MapController with terrain-aware behavior.
+ * The camera smoothly follows terrain elevation during pan/zoom.
+ */
+export default class TerrainController extends MapController {
+  /** Cached terrain altitude from depth picking at viewport center (smoothed) */
+  private _terrainAltitude?: number = undefined;
+  /** Raw (unsmoothed) terrain altitude from latest pick */
+  private _terrainAltitudeTarget?: number = undefined;
+  /** rAF handle for periodic terrain altitude picking */
+  private _pickFrameId: number | null = null;
+  /** Timestamp of last pick */
+  private _lastPickTime: number = 0;
+
+  setProps(
+    props: ControllerProps &
+      MapStateProps & {
+        rotationPivot?: 'center' | '2d' | '3d';
+        getAltitude?: (pos: [number, number]) => number | undefined;
+      }
+  ) {
+    super.setProps({rotationPivot: '3d', ...props});
+
+    // Periodically pick terrain altitude at the viewport center using rAF.
+    // Keeps the altitude cache warm so interactions don't need expensive
+    // synchronous GPU readbacks. rAF naturally pauses when tab is backgrounded.
+    if (this._pickFrameId === null) {
+      const loop = () => {
+        const now = Date.now();
+        if (now - this._lastPickTime > 500 && !this.isDragging()) {
+          this._lastPickTime = now;
+          this._pickTerrainCenterAltitude();
+          // On first successful pick, rebase viewport to terrain altitude.
+          // Runs from rAF (outside React render) so onViewStateChange won't loop.
+          if (this._terrainAltitude === undefined && this._terrainAltitudeTarget !== undefined) {
+            this._terrainAltitude = this._terrainAltitudeTarget;
+            const controllerState = new this.ControllerState({
+              makeViewport: this.makeViewport,
+              ...this.props,
+              ...this.state
+            } as any);
+            const rebaseProps = this._rebaseViewport(this._terrainAltitudeTarget, controllerState);
+            if (rebaseProps) {
+              // Build a controllerState that includes the rebase adjustments so
+              // internal state matches the rebased viewState after React round-trip.
+              const rebasedState = new this.ControllerState({
+                makeViewport: this.makeViewport,
+                ...this.props,
+                ...this.state,
+                ...rebaseProps
+              } as any);
+              super.updateViewport(rebasedState);
+            }
+          }
+        }
+        this._pickFrameId = requestAnimationFrame(loop);
+      };
+      this._pickFrameId = requestAnimationFrame(loop);
+    }
+  }
+
+  finalize() {
+    if (this._pickFrameId !== null) {
+      cancelAnimationFrame(this._pickFrameId);
+      this._pickFrameId = null;
+    }
+    super.finalize();
+  }
+
+  protected updateViewport(
+    newControllerState: MapState,
+    extraProps: Record<string, any> | null = null,
+    interactionState: InteractionState = {}
+  ): void {
+    // Not initialized yet — pass through to MapController
+    if (this._terrainAltitude === undefined) {
+      super.updateViewport(newControllerState, extraProps, interactionState);
+      return;
+    }
+
+    // Smoothly blend toward target altitude
+    const SMOOTHING = 0.05;
+    this._terrainAltitude += (this._terrainAltitudeTarget! - this._terrainAltitude) * SMOOTHING;
+
+    const viewportProps = newControllerState.getViewportProps();
+    const pos = viewportProps.position || [0, 0, 0];
+    extraProps = {
+      ...extraProps,
+      position: [pos[0], pos[1], this._terrainAltitude]
+    };
+
+    super.updateViewport(newControllerState, extraProps, interactionState);
+  }
+
+  private _pickTerrainCenterAltitude(): void {
+    if (!this.pickPosition) {
+      return;
+    }
+    const {x, y, width, height} = this.props;
+    const pickResult = this.pickPosition(x + width / 2, y + height / 2);
+    if (pickResult?.coordinate && pickResult.coordinate.length >= 3) {
+      this._terrainAltitudeTarget = pickResult.coordinate[2];
+    }
+  }
+
+  /**
+   * Compute viewport adjustments to keep the view visually the same
+   * when shifting position to [0, 0, altitude].
+   */
+  private _rebaseViewport(
+    altitude: number,
+    newControllerState: MapState
+  ): Record<string, any> | null {
+    const viewportProps = newControllerState.getViewportProps();
+    const oldViewport = this.makeViewport({...viewportProps, position: [0, 0, 0]});
+    const oldCameraPos = oldViewport.cameraPosition;
+
+    const centerZOffset = altitude * oldViewport.distanceScales.unitsPerMeter[2];
+    const cameraHeightAboveOldCenter = oldCameraPos[2];
+    const newCameraHeightAboveCenter = cameraHeightAboveOldCenter - centerZOffset;
+    if (newCameraHeightAboveCenter <= 0) {
+      return null;
+    }
+
+    const zoomDelta = Math.log2(cameraHeightAboveOldCenter / newCameraHeightAboveCenter);
+    const newZoom = viewportProps.zoom + zoomDelta;
+
+    const newViewport = this.makeViewport({
+      ...viewportProps,
+      zoom: newZoom,
+      position: [0, 0, altitude]
+    });
+    const {width, height} = viewportProps;
+    const screenCenter: [number, number] = [width / 2, height / 2];
+    const worldPoint = oldViewport.unproject(screenCenter, {targetZ: altitude});
+    if (
+      worldPoint &&
+      'panByPosition3D' in newViewport &&
+      typeof newViewport.panByPosition3D === 'function'
+    ) {
+      const adjusted = newViewport.panByPosition3D(worldPoint, screenCenter);
+      return {position: [0, 0, altitude], zoom: newZoom, ...adjusted};
+    }
+    return null;
+  }
+}

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/gl-utils.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {getTypedArrayConstructor, getDataType} from '@luma.gl/core';
+import {dataTypeDecoder, getTypedArrayConstructor} from '@luma.gl/core';
 import type {BufferAttributeLayout, VertexFormat} from '@luma.gl/core';
 import type {TypedArrayConstructor} from '../../types/types';
 import type {BufferAccessor, DataColumnSettings, LogicalDataType} from './data-column';
@@ -20,7 +20,7 @@ export function typedArrayFromDataType(type: LogicalDataType): TypedArrayConstru
   }
 }
 
-export const dataTypeFromTypedArray = getDataType;
+export const dataTypeFromTypedArray = dataTypeDecoder.getDataType.bind(dataTypeDecoder);
 
 export function getBufferAttributeLayout(
   name: string,

package/src/lib/deck-picker.ts

@@ -2,8 +2,10 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import {Buffer, Texture} from '@luma.gl/core';
 import type {Device} from '@luma.gl/core';
 import PickLayersPass, {PickingColorDecoder} from '../passes/pick-layers-pass';
+import log from '../utils/log';
 import {getClosestObject, getUniqueObjects, PickedPixel} from './picking/query-object';
 import {
   processPickInfo,
@@ -116,7 +118,7 @@ export default class DeckPicker {
   /**
    * Pick the closest info at given coordinate
    * @returns picking info
-   * @deprecated WebGL only - use pickObjectAsync instead
+   * @note WebGL only - use pickObjectAsync instead
    */
   pickObject(opts: PickByPointOptions & PickOperationContext) {
     return this._pickClosestObject(opts);
@@ -125,7 +127,7 @@ export default class DeckPicker {
   /**
    * Get all unique infos within a bounding box
    * @returns all unique infos within a bounding box
-   * @deprecated WebGL only - use pickObjectAsync instead
+   * @note WebGL only - use pickObjectAsync instead
    */
   pickObjects(opts: PickByRectOptions & PickOperationContext) {
     return this._pickVisibleObjects(opts);
@@ -158,14 +160,26 @@ export default class DeckPicker {
   _resizeBuffer() {
     // Create a frame buffer if not already available
     if (!this.pickingFBO) {
+      const pickingColorTexture = this.device.createTexture({
+        format: 'rgba8unorm',
+        width: 1,
+        height: 1,
+        usage: Texture.RENDER_ATTACHMENT | Texture.COPY_SRC
+      });
       this.pickingFBO = this.device.createFramebuffer({
-        colorAttachments: ['rgba8unorm'],
+        colorAttachments: [pickingColorTexture],
         depthStencilAttachment: 'depth16unorm'
       });
 
       if (this.device.isTextureFormatRenderable('rgba32float')) {
+        const depthColorTexture = this.device.createTexture({
+          format: 'rgba32float',
+          width: 1,
+          height: 1,
+          usage: Texture.RENDER_ATTACHMENT | Texture.COPY_SRC
+        });
         const depthFBO = this.device.createFramebuffer({
-          colorAttachments: ['rgba32float'],
+          colorAttachments: [depthColorTexture],
           depthStencilAttachment: 'depth16unorm'
         });
         this.depthFBO = depthFBO;
@@ -258,7 +272,7 @@ export default class DeckPicker {
       let pickInfo: PickedPixel;
 
       if (deviceRect) {
-        const pickedResult = this._drawAndSample({
+        const pickedResult = await this._drawAndSampleAsync({
           layers: pickableLayers,
           views,
           viewports,
@@ -286,7 +300,7 @@ export default class DeckPicker {
       let z;
       const depthLayers = this._getDepthLayers(pickInfo, pickableLayers, unproject3D);
       if (depthLayers.length > 0) {
-        const {pickedColors: pickedColors2} = this._drawAndSample(
+        const {pickedColors: pickedColors2} = await this._drawAndSampleAsync(
           {
             layers: depthLayers,
             views,
@@ -566,7 +580,7 @@ export default class DeckPicker {
       height: deviceTop - deviceBottom
     };
 
-    const pickedResult = this._drawAndSample({
+    const pickedResult = await this._drawAndSampleAsync({
       layers: pickableLayers,
       views,
       viewports,
@@ -814,21 +828,88 @@ export default class DeckPicker {
     const {decodePickingColor, stats} = this.pickLayersPass.render(opts);
     this._updateStats(stats);
 
-    // Read from an already rendered picking buffer
-    // Returns an Uint8ClampedArray of picked pixels
     const {x, y, width, height} = deviceRect;
-    const pickedColors = new (pickZ ? Float32Array : Uint8Array)(width * height * 4);
-    this.device.readPixelsToArrayWebGL(pickingFBO as Framebuffer, {
-      sourceX: x,
-      sourceY: y,
-      sourceWidth: width,
-      sourceHeight: height,
-      target: pickedColors
-    });
+    const texture = (pickingFBO as Framebuffer).colorAttachments[0]?.texture;
+    if (!texture) {
+      throw new Error('Picking framebuffer color attachment is missing');
+    }
+
+    const pickedColors = await this._readTextureDataAsync(
+      texture,
+      {x, y, width, height},
+      pickZ ? Float32Array : Uint8Array
+    );
+
+    if (!pickZ) {
+      let hasNonZeroAlpha = false;
+      for (let i = 3; i < pickedColors.length; i += 4) {
+        if (pickedColors[i] !== 0) {
+          hasNonZeroAlpha = true;
+          break;
+        }
+      }
+      if (!hasNonZeroAlpha && pickedColors.length > 0) {
+        log.warn('Async pick readback returned only zero alpha values', {
+          deviceRect,
+          bytes: Array.from(pickedColors.subarray(0, Math.min(pickedColors.length, 16)))
+        })();
+      }
+    }
 
     return {pickedColors, decodePickingColor};
   }
 
+  private async _readTextureDataAsync<T extends Uint8Array | Float32Array>(
+    texture: Texture,
+    options: {x: number; y: number; width: number; height: number},
+    ArrayType: Uint8ArrayConstructor | Float32ArrayConstructor
+  ): Promise<T> {
+    const {width, height} = options;
+    const layout = texture.computeMemoryLayout(options);
+    const readBuffer = this.device.createBuffer({
+      byteLength: layout.byteLength,
+      usage: Buffer.COPY_DST | Buffer.MAP_READ
+    });
+
+    try {
+      texture.readBuffer(options, readBuffer);
+      const readData = await readBuffer.readAsync(0, layout.byteLength);
+      const bytesPerElement = ArrayType.BYTES_PER_ELEMENT;
+      if (layout.bytesPerRow % bytesPerElement !== 0) {
+        throw new Error(
+          `Texture readback row stride ${layout.bytesPerRow} is not aligned to ${bytesPerElement}-byte elements.`
+        );
+      }
+      const source = new ArrayType(
+        readData.buffer,
+        readData.byteOffset,
+        layout.byteLength / bytesPerElement
+      );
+      // Picking textures are RGBA. WebGPU rows may be padded to satisfy GPU alignment
+      // requirements, so repack each row into a tightly packed CPU array before decode.
+      const packedRowLength = width * 4;
+      const sourceRowLength = layout.bytesPerRow / bytesPerElement;
+      if (sourceRowLength < packedRowLength) {
+        throw new Error(
+          `Texture readback row stride ${sourceRowLength} is smaller than packed row length ${packedRowLength}.`
+        );
+      }
+      const packed = new ArrayType(width * height * 4);
+
+      for (let row = 0; row < height; row++) {
+        const sourceStart = row * sourceRowLength;
+        packed.set(
+          source.subarray(sourceStart, sourceStart + packedRowLength),
+          row * packedRowLength
+        );
+      }
+
+      return packed as T;
+    } finally {
+      readBuffer.destroy();
+    }
+  }
+
   /**
    * Renders layers into the picking buffer with picking colors and read the pixels.
    * @deprecated WebGL only, use _drawAndSampleAsync instead