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

package/package.json

@@ -3,7 +3,7 @@
   "description": "deck.gl core library",
   "license": "MIT",
   "type": "module",
-  "version": "9.3.0-alpha.3",
+  "version": "9.3.0-alpha.6",
   "publishConfig": {
     "access": "public"
   },
@@ -40,13 +40,12 @@
     "prepublishOnly": "npm run build-debugger && npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "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",
+    "@loaders.gl/core": "^4.4.1",
+    "@loaders.gl/images": "^4.4.1",
+    "@luma.gl/core": "^9.3.2",
+    "@luma.gl/engine": "^9.3.2",
+    "@luma.gl/shadertools": "^9.3.2",
+    "@luma.gl/webgl": "^9.3.2",
     "@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": "25b39cfc26abd50aa900796fae75c2b5fedada69"
+  "gitHead": "6aff0d4eccd01a06a388ab1c07042a94daa3eb31"
 }

package/src/controllers/terrain-controller.ts

@@ -16,6 +16,10 @@ export default class TerrainController extends MapController {
   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 &
@@ -26,20 +30,50 @@ export default class TerrainController extends MapController {
   ) {
     super.setProps({rotationPivot: '3d', ...props});
 
-    // Drive smoothing animation when terrain altitude hasn't converged yet.
-    if (
-      this._terrainAltitude !== undefined &&
-      this._terrainAltitudeTarget !== undefined &&
-      Math.abs(this._terrainAltitudeTarget - this._terrainAltitude) > 0.01
-    ) {
-      this.updateViewport(
-        new this.ControllerState({
-          makeViewport: this.makeViewport,
-          ...this.props,
-          ...this.state
-        } as any)
-      );
+    // 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(
@@ -47,24 +81,16 @@ export default class TerrainController extends MapController {
     extraProps: Record<string, any> | null = null,
     interactionState: InteractionState = {}
   ): void {
-    const SMOOTHING = 0.05;
-
-    // No interactions yet, do not update
-    if (this._terrainAltitudeTarget === undefined) return;
-
+    // Not initialized yet — pass through to MapController
     if (this._terrainAltitude === undefined) {
-      // First interaction, rebase to avoid jump
-      this._terrainAltitude = this._terrainAltitudeTarget;
-      extraProps = this._rebaseViewport(
-        this._terrainAltitudeTarget,
-        newControllerState,
-        extraProps
-      );
-    } else {
-      // Standard interaction, smoothly blend target into actual altitude
-      this._terrainAltitude += (this._terrainAltitudeTarget - this._terrainAltitude) * SMOOTHING;
+      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 = {
@@ -75,23 +101,7 @@ export default class TerrainController extends MapController {
     super.updateViewport(newControllerState, extraProps, interactionState);
   }
 
-  protected _onPanStart(event: MjolnirGestureEvent): boolean {
-    this._pickTerrainCenterAltitude();
-    return super._onPanStart(event);
-  }
-
-  protected _onWheel(event: MjolnirWheelEvent): boolean {
-    this._pickTerrainCenterAltitude();
-    return super._onWheel(event);
-  }
-
-  protected _onDoubleClick(event: MjolnirGestureEvent): boolean {
-    this._pickTerrainCenterAltitude();
-    return super._onDoubleClick(event);
-  }
-
   private _pickTerrainCenterAltitude(): void {
-    // TODO use async picking?
     if (!this.pickPosition) {
       return;
     }
@@ -103,13 +113,12 @@ export default class TerrainController extends MapController {
   }
 
   /**
-   * Utility function to return viewport that looks the same, but with
-   * a position shifted to [0, 0, altitude]
+   * Compute viewport adjustments to keep the view visually the same
+   * when shifting position to [0, 0, altitude].
    */
   private _rebaseViewport(
     altitude: number,
-    newControllerState: MapState,
-    extraProps: Record<string, any> | null
+    newControllerState: MapState
   ): Record<string, any> | null {
     const viewportProps = newControllerState.getViewportProps();
     const oldViewport = this.makeViewport({...viewportProps, position: [0, 0, 0]});
@@ -119,7 +128,7 @@ export default class TerrainController extends MapController {
     const cameraHeightAboveOldCenter = oldCameraPos[2];
     const newCameraHeightAboveCenter = cameraHeightAboveOldCenter - centerZOffset;
     if (newCameraHeightAboveCenter <= 0) {
-      return extraProps;
+      return null;
     }
 
     const zoomDelta = Math.log2(cameraHeightAboveOldCenter / newCameraHeightAboveCenter);
@@ -139,8 +148,8 @@ export default class TerrainController extends MapController {
       typeof newViewport.panByPosition3D === 'function'
     ) {
       const adjusted = newViewport.panByPosition3D(worldPoint, screenCenter);
-      return {...extraProps, position: [0, 0, altitude], zoom: newZoom, ...adjusted};
+      return {position: [0, 0, altitude], zoom: newZoom, ...adjusted};
     }
-    return extraProps;
+    return null;
   }
 }

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