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

package/dist/index.cjs

@@ -82,9 +82,9 @@ __export(dist_exports, {
   createIterable: () => createIterable,
   fp64LowPart: () => fp64LowPart,
   getShaderAssembler: () => getShaderAssembler,
-  gouraudMaterial: () => import_shadertools4.gouraudMaterial,
+  gouraudMaterial: () => import_shadertools3.gouraudMaterial,
   log: () => log_default,
-  phongMaterial: () => import_shadertools4.phongMaterial,
+  phongMaterial: () => import_shadertools3.phongMaterial,
   picking: () => picking_default,
   project: () => project_default,
   project32: () => project32_default,
@@ -230,7 +230,7 @@ var json_loader_default = {
 
 // dist/lib/init.js
 function checkVersion() {
-  const version = true ? "9.3.0-alpha.3" : globalThis.DECK_VERSION || "untranspiled source";
+  const version = true ? "9.3.0-alpha.6" : globalThis.DECK_VERSION || "untranspiled source";
   const existingVersion = globalThis.deck && globalThis.deck.VERSION;
   if (existingVersion && existingVersion !== version) {
     throw new Error(`deck.gl - multiple versions detected: ${existingVersion} vs ${version}`);
@@ -257,15 +257,25 @@ var VERSION = checkVersion();
 
 // dist/shaderlib/index.js
 var import_shadertools3 = require("@luma.gl/shadertools");
-var import_shadertools4 = require("@luma.gl/shadertools");
 
 // dist/shaderlib/misc/layer-uniforms.js
-var uniformBlock = `uniform layerUniforms {
+var uniformBlockWGSL = (
+  /* wgsl */
+  `struct LayerUniforms {
+  opacity: f32,
+};
+
+@group(0) @binding(auto)
+var<uniform> layer: LayerUniforms;
+`
+);
+var uniformBlock = `layout(std140) uniform layerUniforms {
   uniform float opacity;
 } layer;
 `;
 var layerUniforms = {
   name: "layer",
+  source: uniformBlockWGSL,
   vs: uniformBlock,
   fs: uniformBlock,
   getUniforms: (props) => {
@@ -285,15 +295,6 @@ var colorWGSL = (
   /* WGSL */
   `
 
-struct ColorUniforms {
-  opacity: f32,
-};
-
-var<private> color: ColorUniforms = ColorUniforms(1.0);
-// TODO (kaapp) avoiding binding index collisions to handle layer opacity 
-// requires some thought.
-// @group(0) @binding(0) var<uniform> color: ColorUniforms;
-
 @must_use
 fn deckgl_premultiplied_alpha(fragColor: vec4<f32>) -> vec4<f32> {
     return vec4(fragColor.rgb * fragColor.a, fragColor.a); 
@@ -306,9 +307,6 @@ var color_default = {
   source: colorWGSL,
   getUniforms: (_props) => {
     return {};
-  },
-  uniformTypes: {
-    opacity: "f32"
   }
   // @ts-ignore TODO v9.1
 };
@@ -716,14 +714,13 @@ struct ProjectUniforms {
   pseudoMeters: i32,
 };
 
-@group(0) @binding(0)
+@group(0) @binding(auto)
 var<uniform> project: ProjectUniforms;
 
 // -----------------------------------------------------------------------------
-// Geometry data
-// (In your GLSL code, "geometry" was assumed to be available globally. In WGSL,
-// you might supply this via vertex attributes or a uniform. Here we define a
-// uniform struct for demonstration.)
+// Geometry data shared across the project helpers.
+// The active layer shader is responsible for populating this private module
+// state before calling the project functions below.
 // -----------------------------------------------------------------------------
 
 // Structure to carry additional geometry data used by deck.gl filters.
@@ -736,7 +733,6 @@ struct Geometry {
   pickingColor: vec3<f32>,
 };
 
-// @group(0) @binding(1)
 var<private> geometry: Geometry;
 `
 );
@@ -981,7 +977,7 @@ var projectGLSL = (
   `${COORDINATE_SYSTEM_GLSL_CONSTANTS}
 ${PROJECTION_MODE_GLSL_CONSTANTS}
 ${UNIT_GLSL_CONSTANTS}
-uniform projectUniforms {
+layout(std140) uniform projectUniforms {
 bool wrapLongitude;
 int coordinateSystem;
 vec3 commonUnitsPerMeter;
@@ -1296,7 +1292,7 @@ var import_web_mercator = require("@math.gl/web-mercator");
 var uniformBlock2 = (
   /* glsl */
   `
-uniform shadowUniforms {
+layout(std140) uniform shadowUniforms {
   bool drawShadowMap;
   bool useShadowMap;
   vec4 color;
@@ -1524,8 +1520,39 @@ var shadow_default = {
 
 // dist/shaderlib/picking/picking.js
 var import_shadertools2 = require("@luma.gl/shadertools");
+var sourceWGSL = (
+  /* wgsl */
+  `struct pickingUniforms {
+  isActive: f32,
+  isAttribute: f32,
+  isHighlightActive: f32,
+  useFloatColors: f32,
+  highlightedObjectColor: vec3<f32>,
+  highlightColor: vec4<f32>,
+};
+
+@group(0) @binding(auto) var<uniform> picking: pickingUniforms;
+
+fn picking_normalizeColor(color: vec3<f32>) -> vec3<f32> {
+  return select(color / 255.0, color, picking.useFloatColors > 0.5);
+}
+
+fn picking_normalizeColor4(color: vec4<f32>) -> vec4<f32> {
+  return select(color / 255.0, color, picking.useFloatColors > 0.5);
+}
+
+fn picking_isColorZero(color: vec3<f32>) -> bool {
+  return dot(color, vec3<f32>(1.0)) < 0.00001;
+}
+
+fn picking_isColorValid(color: vec3<f32>) -> bool {
+  return dot(color, vec3<f32>(1.0)) > 0.00001;
+}
+`
+);
 var picking_default = {
   ...import_shadertools2.picking,
+  source: sourceWGSL,
   defaultUniforms: { ...import_shadertools2.picking.defaultUniforms, useFloatColors: false },
   inject: {
     "vs:DECKGL_FILTER_GL_POSITION": `
@@ -1636,6 +1663,16 @@ var Pass = class {
 };
 
 // dist/passes/layers-pass.js
+var WEBGPU_DEFAULT_DRAW_PARAMETERS = {
+  depthWriteEnabled: true,
+  depthCompare: "less-equal",
+  blendColorOperation: "add",
+  blendColorSrcFactor: "src-alpha",
+  blendColorDstFactor: "one",
+  blendAlphaOperation: "add",
+  blendAlphaSrcFactor: "one-minus-dst-alpha",
+  blendAlphaDstFactor: "one"
+};
 var LayersPass = class extends Pass {
   constructor() {
     super(...arguments);
@@ -1724,7 +1761,9 @@ var LayersPass = class extends Pass {
         layerParam.shouldDrawLayer = true;
         layerParam.layerRenderIndex = indexResolver(layer, shouldDrawLayer);
         layerParam.shaderModuleProps = this._getShaderModuleProps(layer, effects, pass, shaderModuleProps);
+        const defaultParams = layer.context.device.type === "webgpu" ? WEBGPU_DEFAULT_DRAW_PARAMETERS : null;
         layerParam.layerParameters = {
+          ...defaultParams,
           ...(_a = layer.context.deck) == null ? void 0 : _a.props.parameters,
           ...this.getLayerParameters(layer, layerIndex, viewport)
         };
@@ -2943,13 +2982,13 @@ var SunLight = class extends DirectionalLight {
 };
 
 // dist/effects/post-process-effect.js
-var import_shadertools5 = require("@luma.gl/shadertools");
+var import_shadertools4 = require("@luma.gl/shadertools");
 
 // dist/passes/screen-pass.js
 var import_engine = require("@luma.gl/engine");
 
 // dist/passes/screen-pass-uniforms.js
-var uniformBlock3 = `uniform screenUniforms {
+var uniformBlock3 = `layout(std140) uniform screenUniforms {
   vec2 texSize;
 } screen;
 `;
@@ -3022,7 +3061,7 @@ var PostProcessEffect = class {
   constructor(module2, props) {
     this.id = `${module2.name}-pass`;
     this.props = props;
-    (0, import_shadertools5.initializeShaderModule)(module2);
+    (0, import_shadertools4.initializeShaderModule)(module2);
     this.module = module2;
   }
   setup({ device }) {
@@ -3176,7 +3215,11 @@ var PickLayersPass = class extends LayersPass {
     } else if (pickable && operation.includes("draw")) {
       Object.assign(pickParameters, PICKING_BLENDING);
       pickParameters.blend = true;
-      pickParameters.blendColor = encodeColor(this._colorEncoderState, layer, viewport);
+      if (this.device.type === "webgpu") {
+        pickParameters.blendConstant = encodeColor(this._colorEncoderState, layer, viewport);
+      } else {
+        pickParameters.blendColor = encodeColor(this._colorEncoderState, layer, viewport);
+      }
       if (operation.includes("terrain") && ((_a = layer.state) == null ? void 0 : _a._hasPickingCover)) {
         pickParameters.blendAlphaSrcFactor = "one";
       }
@@ -6147,6 +6190,9 @@ var DeckRenderer = class {
   }
 };
 
+// dist/lib/deck-picker.js
+var import_core16 = require("@luma.gl/core");
+
 // dist/lib/picking/query-object.js
 var NO_PICKED_OBJECT = {
   pickedColor: null,
@@ -6355,7 +6401,7 @@ var DeckPicker = class {
   /**
    * Pick the closest info at given coordinate
    * @returns picking info
-   * @deprecated WebGL only - use pickObjectAsync instead
+   * @note WebGL only - use pickObjectAsync instead
    */
   pickObject(opts) {
     return this._pickClosestObject(opts);
@@ -6363,7 +6409,7 @@ var DeckPicker = class {
   /**
    * 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) {
     return this._pickVisibleObjects(opts);
@@ -6389,13 +6435,25 @@ var DeckPicker = class {
   _resizeBuffer() {
     var _a, _b;
     if (!this.pickingFBO) {
+      const pickingColorTexture = this.device.createTexture({
+        format: "rgba8unorm",
+        width: 1,
+        height: 1,
+        usage: import_core16.Texture.RENDER_ATTACHMENT | import_core16.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: import_core16.Texture.RENDER_ATTACHMENT | import_core16.Texture.COPY_SRC
+        });
         const depthFBO = this.device.createFramebuffer({
-          colorAttachments: ["rgba32float"],
+          colorAttachments: [depthColorTexture],
           depthStencilAttachment: "depth16unorm"
         });
         this.depthFBO = depthFBO;
@@ -6453,7 +6511,7 @@ var DeckPicker = class {
     for (let i = 0; i < depth; i++) {
       let pickInfo;
       if (deviceRect) {
-        const pickedResult = this._drawAndSample({
+        const pickedResult = await this._drawAndSampleAsync({
           layers: pickableLayers,
           views,
           viewports,
@@ -6479,7 +6537,7 @@ var DeckPicker = class {
       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,
           viewports,
@@ -6666,7 +6724,7 @@ var DeckPicker = class {
       width: deviceRight - deviceLeft,
       height: deviceTop - deviceBottom
     };
-    const pickedResult = this._drawAndSample({
+    const pickedResult = await this._drawAndSampleAsync({
       layers: pickableLayers,
       views,
       viewports,
@@ -6777,6 +6835,7 @@ var DeckPicker = class {
   }
   // Note: Implementation of the overloaded signatures above, TSDoc is on the signatures
   async _drawAndSampleAsync({ layers, views, viewports, onViewportActive, deviceRect, cullRect, effects, pass }, pickZ = false) {
+    var _a;
     const pickingFBO = pickZ ? this.depthFBO : this.pickingFBO;
     const opts = {
       layers,
@@ -6801,16 +6860,58 @@ var DeckPicker = class {
     const { decodePickingColor, stats } = this.pickLayersPass.render(opts);
     this._updateStats(stats);
     const { x, y, width, height } = deviceRect;
-    const pickedColors = new (pickZ ? Float32Array : Uint8Array)(width * height * 4);
-    this.device.readPixelsToArrayWebGL(pickingFBO, {
-      sourceX: x,
-      sourceY: y,
-      sourceWidth: width,
-      sourceHeight: height,
-      target: pickedColors
-    });
+    const texture = (_a = pickingFBO.colorAttachments[0]) == null ? void 0 : _a.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_default.warn("Async pick readback returned only zero alpha values", {
+          deviceRect,
+          bytes: Array.from(pickedColors.subarray(0, Math.min(pickedColors.length, 16)))
+        })();
+      }
+    }
     return { pickedColors, decodePickingColor };
   }
+  async _readTextureDataAsync(texture, options, ArrayType) {
+    const { width, height } = options;
+    const layout = texture.computeMemoryLayout(options);
+    const readBuffer = this.device.createBuffer({
+      byteLength: layout.byteLength,
+      usage: import_core16.Buffer.COPY_DST | import_core16.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 source3 = new ArrayType(readData.buffer, readData.byteOffset, layout.byteLength / bytesPerElement);
+      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(source3.subarray(sourceStart, sourceStart + packedRowLength), row * packedRowLength);
+      }
+      return packed;
+    } finally {
+      readBuffer.destroy();
+    }
+  }
   // Note: Implementation of the overloaded signatures above, TSDoc is on the signatures
   _drawAndSample({ layers, views, viewports, onViewportActive, deviceRect, cullRect, effects, pass }, pickZ = false) {
     const pickingFBO = pickZ ? this.depthFBO : this.pickingFBO;
@@ -7311,11 +7412,11 @@ TooltipWidget.defaultProps = {
 };
 
 // dist/lib/deck.js
-var import_core16 = require("@luma.gl/core");
+var import_core17 = require("@luma.gl/core");
 var import_webgl = require("@luma.gl/webgl");
+var import_constants11 = require("@luma.gl/webgl/constants");
 var import_engine3 = require("@luma.gl/engine");
 var import_engine4 = require("@luma.gl/engine");
-var import_constants11 = require("@luma.gl/constants");
 var import_stats2 = require("@probe.gl/stats");
 var import_mjolnir2 = require("mjolnir.js");
 function noop2() {
@@ -7329,6 +7430,7 @@ var defaultProps = {
   viewState: null,
   initialViewState: null,
   pickingRadius: 0,
+  pickAsync: "auto",
   layerFilter: null,
   parameters: {},
   parent: null,
@@ -7414,6 +7516,8 @@ var Deck = class {
       gpuMemory: 0
     };
     this._metricsCounter = 0;
+    this._hoverPickSequence = 0;
+    this._pointerDownPickSequence = 0;
     this._needsRedraw = "Initial render";
     this._pickRequest = {
       mode: "hover",
@@ -7424,6 +7528,7 @@ var Deck = class {
       unproject3D: false
     };
     this._lastPointerDownInfo = null;
+    this._lastPointerDownInfoPromise = null;
     this._onPointerMove = (event) => {
       const { _pickRequest } = this;
       if (event.type === "pointerleave") {
@@ -7452,49 +7557,63 @@ var Deck = class {
       if (!eventHandlerProp || !pos || !this.layerManager) {
         return;
       }
-      let info;
       const layers = this.layerManager.getLayers();
-      const has3DPickableLayers = layers.some((layer2) => layer2.props.pickable === "3d");
-      if (event.type === "click" && has3DPickableLayers) {
-        const pickResult = this._pick("pickObject", "pickObject Time", {
-          x: pos.x,
-          y: pos.y,
-          radius: this.props.pickingRadius,
-          unproject3D: true
-        });
-        info = pickResult.result[0] || pickResult.emptyInfo;
-      } else {
-        info = this.deckPicker.getLastPickedObject({
-          x: pos.x,
-          y: pos.y,
-          layers,
-          viewports: this.getViewports(pos)
-        }, this._lastPointerDownInfo);
-      }
-      const { layer } = info;
-      const layerHandler = layer && (layer[eventHandlerProp] || layer.props[eventHandlerProp]);
-      const rootHandler = this.props[eventHandlerProp];
-      let handled = false;
-      if (layerHandler) {
-        handled = layerHandler.call(layer, info, event);
+      const internalPickingMode = this._getInternalPickingMode();
+      if (!internalPickingMode) {
+        return;
       }
-      if (!handled) {
-        rootHandler == null ? void 0 : rootHandler(info, event);
-        this.widgetManager.onEvent(info, event);
+      if (internalPickingMode === "sync") {
+        const info = event.type === "click" && this._shouldUnproject3D(layers) ? this._getFirstPickedInfo(this._pickPointSync(this._getPointPickOptions(pos.x, pos.y, { unproject3D: true }, layers))) : this._getLastPointerDownPickingInfo(pos.x, pos.y, layers);
+        this._dispatchPickingEvent(info, event);
+        return;
       }
+      const pointerDownInfoPromise = this._lastPointerDownInfoPromise || Promise.resolve(this._getLastPointerDownPickingInfo(pos.x, pos.y, layers));
+      pointerDownInfoPromise.then((info) => {
+        this._dispatchPickingEvent(info, event);
+      }).catch((error) => {
+        var _a2, _b;
+        return (_b = (_a2 = this.props).onError) == null ? void 0 : _b.call(_a2, error);
+      });
     };
     this._onPointerDown = (event) => {
       var _a2;
-      if (((_a2 = this.device) == null ? void 0 : _a2.type) === "webgpu") {
+      const pos = event.offsetCenter;
+      if (!pos) {
         return;
       }
-      const pos = event.offsetCenter;
-      const pickedInfo = this._pick("pickObject", "pickObject Time", {
-        x: pos.x,
-        y: pos.y,
-        radius: this.props.pickingRadius
+      const internalPickingMode = this._getInternalPickingMode();
+      if (!internalPickingMode) {
+        return;
+      }
+      const layers = ((_a2 = this.layerManager) == null ? void 0 : _a2.getLayers()) || [];
+      const pointerDownPickSequence = ++this._pointerDownPickSequence;
+      if (internalPickingMode === "sync") {
+        const pickedInfo = this._pickPointSync({
+          x: pos.x,
+          y: pos.y,
+          radius: this.props.pickingRadius
+        });
+        const info = this._getFirstPickedInfo(pickedInfo);
+        this._lastPointerDownInfo = info;
+        this._lastPointerDownInfoPromise = Promise.resolve(info);
+        return;
+      }
+      const pickPromise = this._pickPointAsync(this._getPointPickOptions(pos.x, pos.y, {}, layers)).then((pickResult) => this._getFirstPickedInfo(pickResult)).then((info) => {
+        if (pointerDownPickSequence === this._pointerDownPickSequence) {
+          this._lastPointerDownInfo = info;
+        }
+        return info;
+      }).catch((error) => {
+        var _a3, _b;
+        (_b = (_a3 = this.props).onError) == null ? void 0 : _b.call(_a3, error);
+        const fallbackInfo = this.deckPicker && this.viewManager ? this._getLastPointerDownPickingInfo(pos.x, pos.y, layers) : {};
+        if (pointerDownPickSequence === this._pointerDownPickSequence) {
+          this._lastPointerDownInfo = fallbackInfo;
+        }
+        return fallbackInfo;
       });
-      this._lastPointerDownInfo = pickedInfo.result[0] || pickedInfo.emptyInfo;
+      this._lastPointerDownInfo = null;
+      this._lastPointerDownInfoPromise = pickPromise;
     };
     this.props = { ...defaultProps, ...props };
     props = this.props;
@@ -7541,7 +7660,10 @@ var Deck = class {
     (_a = this.animationLoop) == null ? void 0 : _a.stop();
     (_b = this.animationLoop) == null ? void 0 : _b.destroy();
     this.animationLoop = null;
+    this._hoverPickSequence++;
+    this._pointerDownPickSequence++;
     this._lastPointerDownInfo = null;
+    this._lastPointerDownInfoPromise = null;
     (_c = this.layerManager) == null ? void 0 : _c.finalize();
     this.layerManager = null;
     (_d = this.viewManager) == null ? void 0 : _d.finalize();
@@ -7576,6 +7698,7 @@ var Deck = class {
       this.viewState = props.initialViewState;
     }
     Object.assign(this.props, props);
+    this._validateInternalPickingMode();
     this._setCanvasSize(this.props);
     const resolvedProps = Object.create(this.props);
     Object.assign(resolvedProps, {
@@ -7680,16 +7803,37 @@ var Deck = class {
     return this.canvas;
   }
   /** Query the object rendered on top at a given point */
+  async pickObjectAsync(opts) {
+    const infos = (await this._pickAsync("pickObjectAsync", "pickObject Time", opts)).result;
+    return infos.length ? infos[0] : null;
+  }
+  /**
+   * Query all objects rendered on top within a bounding box
+   * @note Caveat: this method performs multiple async GPU queries, so state could potentially change between calls.
+   */
+  async pickObjectsAsync(opts) {
+    return await this._pickAsync("pickObjectsAsync", "pickObjects Time", opts);
+  }
+  /**
+   * Query the object rendered on top at a given point
+   * @deprecated WebGL only. Use `pickObjectsAsync` instead
+   */
   pickObject(opts) {
     const infos = this._pick("pickObject", "pickObject Time", opts).result;
     return infos.length ? infos[0] : null;
   }
-  /* Query all rendered objects at a given point */
+  /**
+   * Query all rendered objects at a given point
+   * @deprecated WebGL only. Use `pickObjectsAsync` instead
+   */
   pickMultipleObjects(opts) {
     opts.depth = opts.depth || 10;
     return this._pick("pickObject", "pickMultipleObjects Time", opts).result;
   }
-  /* Query all objects rendered on top within a bounding box */
+  /**
+   * Query all objects rendered on top within a bounding box
+   * @deprecated WebGL only. Use `pickObjectsAsync` instead
+   */
   pickObjects(opts) {
     return this._pick("pickObjects", "pickObjects Time", opts);
   }
@@ -7698,8 +7842,11 @@ var Deck = class {
    * @private
    */
   _pickPositionForController(x, y) {
-    const pickResult = this.pickObject({ x, y, radius: 0, unproject3D: true });
-    return pickResult;
+    const internalPickingMode = this._getInternalPickingMode();
+    if (internalPickingMode !== "sync") {
+      return null;
+    }
+    return this.pickObject({ x, y, radius: 0, unproject3D: true });
   }
   /** Experimental
    * Add a global resource for sharing among layers
@@ -7730,6 +7877,114 @@ var Deck = class {
     var _a;
     (_a = this.layerManager) == null ? void 0 : _a.removeDefaultShaderModule(module2);
   }
+  // Private Methods
+  _resolveInternalPickingMode() {
+    var _a, _b;
+    const { pickAsync } = this.props;
+    const deviceType = ((_a = this.device) == null ? void 0 : _a.type) || ((_b = this.props.deviceProps) == null ? void 0 : _b.type);
+    if (pickAsync === "auto") {
+      return deviceType === "webgpu" ? "async" : "sync";
+    }
+    if (pickAsync === "sync" && deviceType === "webgpu") {
+      throw new Error('`pickAsync: "sync"` is not supported when Deck is using a WebGPU device.');
+    }
+    return pickAsync;
+  }
+  _getInternalPickingMode() {
+    var _a, _b;
+    try {
+      return this._resolveInternalPickingMode();
+    } catch (error) {
+      (_b = (_a = this.props).onError) == null ? void 0 : _b.call(_a, error);
+      return null;
+    }
+  }
+  _validateInternalPickingMode() {
+    this._getInternalPickingMode();
+  }
+  _getFirstPickedInfo({ result, emptyInfo }) {
+    return result[0] || emptyInfo;
+  }
+  _shouldUnproject3D(layers = ((_a) => (_a = this.layerManager) == null ? void 0 : _a.getLayers())() || []) {
+    return layers.some((layer) => layer.props.pickable === "3d");
+  }
+  _getPointPickOptions(x, y, opts = {}, layers = ((_b) => (_b = this.layerManager) == null ? void 0 : _b.getLayers())() || []) {
+    return {
+      x,
+      y,
+      radius: this.props.pickingRadius,
+      unproject3D: this._shouldUnproject3D(layers),
+      ...opts
+    };
+  }
+  _pickPointSync(opts) {
+    return this._pick("pickObject", "pickObject Time", opts);
+  }
+  _pickPointAsync(opts) {
+    return this._pickAsync("pickObjectAsync", "pickObject Time", opts);
+  }
+  _getLastPointerDownPickingInfo(x, y, layers = ((_c) => (_c = this.layerManager) == null ? void 0 : _c.getLayers())() || []) {
+    return this.deckPicker.getLastPickedObject({
+      x,
+      y,
+      layers,
+      viewports: this.getViewports({ x, y })
+    }, this._lastPointerDownInfo);
+  }
+  _applyHoverCallbacks({ result, emptyInfo }, event) {
+    var _a, _b, _c;
+    if (!this.widgetManager) {
+      return;
+    }
+    this.cursorState.isHovering = result.length > 0;
+    let pickedInfo = emptyInfo;
+    let handled = false;
+    for (const info of result) {
+      pickedInfo = info;
+      handled = ((_a = info.layer) == null ? void 0 : _a.onHover(info, event)) || handled;
+    }
+    if (!handled) {
+      (_c = (_b = this.props).onHover) == null ? void 0 : _c.call(_b, pickedInfo, event);
+      this.widgetManager.onHover(pickedInfo, event);
+    }
+  }
+  _dispatchPickingEvent(info, event) {
+    if (!this.layerManager || !this.widgetManager) {
+      return;
+    }
+    const eventHandlerProp = EVENT_HANDLERS[event.type];
+    if (!eventHandlerProp) {
+      return;
+    }
+    const { layer } = info;
+    const layerHandler = layer && (layer[eventHandlerProp] || layer.props[eventHandlerProp]);
+    const rootHandler = this.props[eventHandlerProp];
+    let handled = false;
+    if (layerHandler) {
+      handled = layerHandler.call(layer, info, event);
+    }
+    if (!handled) {
+      rootHandler == null ? void 0 : rootHandler(info, event);
+      this.widgetManager.onEvent(info, event);
+    }
+  }
+  _pickAsync(method, statKey, opts) {
+    assert(this.deckPicker);
+    const { stats } = this;
+    stats.get("Pick Count").incrementCount();
+    stats.get(statKey).timeStart();
+    const infos = this.deckPicker[method]({
+      // layerManager, viewManager and effectManager are always defined if deckPicker is
+      layers: this.layerManager.getLayers(opts),
+      views: this.viewManager.getViews(),
+      viewports: this.getViewports(opts),
+      onViewportActive: this.layerManager.activateViewport,
+      effects: this.effectManager.getEffects(),
+      ...opts
+    });
+    stats.get(statKey).timeEnd();
+    return infos;
+  }
   _pick(method, statKey, opts) {
     assert(this.deckPicker);
     const { stats } = this;
@@ -7847,7 +8102,7 @@ var Deck = class {
       alphaMode: ((_b = this.props.deviceProps) == null ? void 0 : _b.type) === "webgpu" ? "premultiplied" : void 0
     };
     const userOnResize = (_c = this.props.deviceProps) == null ? void 0 : _c.onResize;
-    return import_core16.luma.createDevice({
+    return import_core17.luma.createDevice({
       // luma by default throws if a device is already attached
       // asynchronous device creation could happen after finalize() is called
       // TODO - createDevice should support AbortController?
@@ -7894,28 +8149,33 @@ var Deck = class {
   }
   /** Actually run picking */
   _pickAndCallback() {
-    var _a, _b, _c, _d, _e;
-    if (((_a = this.device) == null ? void 0 : _a.type) === "webgpu") {
-      return;
-    }
+    var _a;
     const { _pickRequest } = this;
     if (_pickRequest.event) {
-      const layers = ((_b = this.layerManager) == null ? void 0 : _b.getLayers()) || [];
-      const has3DPickableLayers = layers.some((layer) => layer.props.pickable === "3d");
-      _pickRequest.unproject3D = has3DPickableLayers;
-      const { result, emptyInfo } = this._pick("pickObject", "pickObject Time", _pickRequest);
-      this.cursorState.isHovering = result.length > 0;
-      let pickedInfo = emptyInfo;
-      let handled = false;
-      for (const info of result) {
-        pickedInfo = info;
-        handled = ((_c = info.layer) == null ? void 0 : _c.onHover(info, _pickRequest.event)) || handled;
-      }
-      if (!handled) {
-        (_e = (_d = this.props).onHover) == null ? void 0 : _e.call(_d, pickedInfo, _pickRequest.event);
-        this.widgetManager.onHover(pickedInfo, _pickRequest.event);
-      }
+      const event = _pickRequest.event;
+      const layers = ((_a = this.layerManager) == null ? void 0 : _a.getLayers()) || [];
+      const pickOptions = this._getPointPickOptions(_pickRequest.x, _pickRequest.y, {
+        radius: _pickRequest.radius,
+        mode: _pickRequest.mode
+      }, layers);
+      const internalPickingMode = this._getInternalPickingMode();
+      const hoverPickSequence = ++this._hoverPickSequence;
       _pickRequest.event = null;
+      if (!internalPickingMode) {
+        return;
+      }
+      if (internalPickingMode === "sync") {
+        this._applyHoverCallbacks(this._pickPointSync(pickOptions), event);
+        return;
+      }
+      this._pickPointAsync(pickOptions).then(({ result, emptyInfo }) => {
+        if (hoverPickSequence === this._hoverPickSequence) {
+          this._applyHoverCallbacks({ result, emptyInfo }, event);
+        }
+      }).catch((error) => {
+        var _a2, _b;
+        return (_b = (_a2 = this.props).onError) == null ? void 0 : _b.call(_a2, error);
+      });
     }
   }
   _updateCursor() {
@@ -7927,6 +8187,7 @@ var Deck = class {
   _setDevice(device) {
     var _a, _b, _c, _d;
     this.device = device;
+    this._validateInternalPickingMode();
     if (!this.animationLoop) {
       return;
     }
@@ -8035,7 +8296,6 @@ var Deck = class {
   }
   // Callbacks
   _onRenderFrame() {
-    var _a;
     this._getFrameStats();
     if (this._metricsCounter++ % 60 === 0) {
       this._getMetrics();
@@ -8048,9 +8308,7 @@ var Deck = class {
     this._updateCanvasSize();
     this._updateCursor();
     this.layerManager.updateLayers();
-    if (((_a = this.device) == null ? void 0 : _a.type) !== "webgpu") {
-      this._pickAndCallback();
-    }
+    this._pickAndCallback();
     this.redraw();
     if (this.viewManager) {
       this.viewManager.updateViewStates();
@@ -8098,7 +8356,7 @@ var Deck = class {
     metrics.cpuTime = stats.get("CPU Time").time;
     metrics.gpuTimePerFrame = stats.get("GPU Time").getAverageTime();
     metrics.cpuTimePerFrame = stats.get("CPU Time").getAverageTime();
-    const memoryStats = import_core16.luma.stats.get("GPU Time and Memory");
+    const memoryStats = import_core17.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;
@@ -8110,10 +8368,10 @@ Deck.VERSION = VERSION;
 var deck_default = Deck;
 
 // dist/lib/attribute/data-column.js
-var import_core18 = require("@luma.gl/core");
+var import_core19 = require("@luma.gl/core");
 
 // dist/lib/attribute/gl-utils.js
-var import_core17 = require("@luma.gl/core");
+var import_core18 = require("@luma.gl/core");
 function typedArrayFromDataType(type) {
   switch (type) {
     case "float64":
@@ -8122,10 +8380,10 @@ function typedArrayFromDataType(type) {
     case "unorm8":
       return Uint8ClampedArray;
     default:
-      return (0, import_core17.getTypedArrayConstructor)(type);
+      return (0, import_core18.getTypedArrayConstructor)(type);
   }
 }
-var dataTypeFromTypedArray = import_core17.getDataType;
+var dataTypeFromTypedArray = import_core18.dataTypeDecoder.getDataType.bind(import_core18.dataTypeDecoder);
 function getBufferAttributeLayout(name, accessor, deviceType) {
   if (accessor.size > 4) {
     return null;
@@ -8343,7 +8601,7 @@ var DataColumn = class {
     let opts;
     if (ArrayBuffer.isView(data)) {
       opts = { value: data };
-    } else if (data instanceof import_core18.Buffer) {
+    } else if (data instanceof import_core19.Buffer) {
       opts = { buffer: data };
     } else {
       opts = data;
@@ -8528,7 +8786,7 @@ var DataColumn = class {
       ...(_a = this._buffer) == null ? void 0 : _a.props,
       id: this.id,
       // TODO(ibgreen) - WebGPU requires COPY_DST and COPY_SRC to allow write / read
-      usage: (isIndexed ? import_core18.Buffer.INDEX : import_core18.Buffer.VERTEX) | import_core18.Buffer.COPY_DST,
+      usage: (isIndexed ? import_core19.Buffer.INDEX : import_core19.Buffer.VERTEX) | import_core19.Buffer.COPY_DST,
       indexType: isIndexed ? type : void 0,
       byteLength
     });
@@ -8991,8 +9249,8 @@ var Attribute = class extends DataColumn {
 
 // dist/transitions/gpu-interpolation-transition.js
 var import_engine5 = require("@luma.gl/engine");
-var import_shadertools6 = require("@luma.gl/shadertools");
-var import_constants14 = require("@luma.gl/constants");
+var import_shadertools5 = require("@luma.gl/shadertools");
+var import_constants14 = require("@luma.gl/webgl/constants");
 
 // dist/utils/array-utils.js
 function padArrayChunk(options) {
@@ -9059,7 +9317,7 @@ function padArray({ source: source3, target, size, getData, sourceStartIndices,
 }
 
 // dist/transitions/gpu-transition-utils.js
-var import_constants13 = require("@luma.gl/constants");
+var import_constants13 = require("@luma.gl/webgl/constants");
 function cloneAttribute(attribute) {
   const { device, settings, value } = attribute;
   const newAttribute = new Attribute(device, settings);
@@ -9278,7 +9536,7 @@ var GPUInterpolationTransition = class extends GPUTransitionBase {
     this.transform.destroy();
   }
 };
-var uniformBlock4 = `uniform interpolationUniforms {
+var uniformBlock4 = `layout(std140) uniform interpolationUniforms {
   float time;
 } interpolation;
 `;
@@ -9355,7 +9613,7 @@ function getTransform(device, attribute) {
         }
       ],
       // @ts-expect-error fp64 module only sets ONE uniform via defaultUniforms
-      modules: [import_shadertools6.fp64arithmetic, interpolationUniforms],
+      modules: [import_shadertools5.fp64arithmetic, interpolationUniforms],
       defines: {
         // @ts-expect-error TODO fix luma type
         ATTRIBUTE_TYPE: attributeType,
@@ -9459,7 +9717,7 @@ var GPUSpringTransition = class extends GPUTransitionBase {
     this.framebuffer.destroy();
   }
 };
-var uniformBlock5 = `uniform springUniforms {
+var uniformBlock5 = `layout(std140) uniform springUniforms {
   float damping;
   float stiffness;
 } spring;
@@ -9897,11 +10155,11 @@ var AttributeManager = class {
 };
 
 // dist/lib/layer.js
-var import_core21 = require("@luma.gl/core");
+var import_core22 = require("@luma.gl/core");
 var import_webgl2 = require("@luma.gl/webgl");
 
 // dist/transitions/cpu-interpolation-transition.js
-var import_core19 = require("@math.gl/core");
+var import_core20 = require("@math.gl/core");
 var CPUInterpolationTransition = class extends Transition {
   get value() {
     return this._value;
@@ -9909,7 +10167,7 @@ var CPUInterpolationTransition = class extends Transition {
   _onUpdate() {
     const { time, settings: { fromValue, toValue, duration, easing } } = this;
     const t = easing(time / duration);
-    this._value = (0, import_core19.lerp)(fromValue, toValue, t);
+    this._value = (0, import_core20.lerp)(fromValue, toValue, t);
   }
 };
 
@@ -10263,7 +10521,7 @@ function mergeShaders(target, source3) {
 }
 
 // dist/utils/texture.js
-var import_core20 = require("@luma.gl/core");
+var import_core21 = require("@luma.gl/core");
 var DEFAULT_TEXTURE_PARAMETERS = {
   minFilter: "linear",
   mipmapFilter: "linear",
@@ -10273,7 +10531,7 @@ var DEFAULT_TEXTURE_PARAMETERS = {
 };
 var internalTextures = {};
 function createTexture(owner, device, image, sampler) {
-  if (image instanceof import_core20.Texture) {
+  if (image instanceof import_core21.Texture) {
     return image;
   } else if (image.constructor && image.constructor.name !== "Object") {
     image = { data: image };
@@ -10297,12 +10555,14 @@ function createTexture(owner, device, image, sampler) {
   });
   if (device.type === "webgl") {
     texture.generateMipmapsWebGL();
+  } else if (device.type === "webgpu") {
+    device.generateMipmapsWebGPU(texture);
   }
   internalTextures[texture.id] = owner;
   return texture;
 }
 function destroyTexture(owner, texture) {
-  if (!texture || !(texture instanceof import_core20.Texture)) {
+  if (!texture || !(texture instanceof import_core21.Texture)) {
     return;
   }
   if (internalTextures[texture.id] === owner) {
@@ -10908,7 +11168,7 @@ var LayerState = class extends ComponentState {
 
 // dist/lib/layer.js
 var import_web_mercator8 = require("@math.gl/web-mercator");
-var import_core22 = require("@loaders.gl/core");
+var import_core23 = require("@loaders.gl/core");
 var TRACE_CHANGE_FLAG = "layer.changeFlag";
 var TRACE_INITIALIZE = "layer.initialize";
 var TRACE_UPDATE = "layer.update";
@@ -10954,7 +11214,7 @@ var defaultProps2 = {
       }
       let inResourceManager = resourceManager.contains(url);
       if (!inResourceManager && !loadOptions) {
-        resourceManager.add({ resourceId: url, data: (0, import_core22.load)(url, loaders), persistent: false });
+        resourceManager.add({ resourceId: url, data: (0, import_core23.load)(url, loaders), persistent: false });
         inResourceManager = true;
       }
       if (inResourceManager) {
@@ -10968,7 +11228,7 @@ var defaultProps2 = {
           requestId: propName
         });
       }
-      return (0, import_core22.load)(url, loaders, loadOptions);
+      return (0, import_core23.load)(url, loaders, loadOptions);
     }
   },
   updateTriggers: {},
@@ -11439,7 +11699,7 @@ var Layer = class extends component_default {
       const values = changedAttributes[name].getValue();
       for (const attributeName in values) {
         const value = values[attributeName];
-        if (value instanceof import_core21.Buffer) {
+        if (value instanceof import_core22.Buffer) {
           if (changedAttributes[name].settings.isIndexed) {
             model.setIndexBuffer(value);
           } else {
@@ -11628,13 +11888,8 @@ var Layer = class extends component_default {
       if (context.device instanceof import_webgl2.WebGLDevice) {
         context.device.setParametersWebGL({ polygonOffset: offsets });
       }
-      for (const model of this.getModels()) {
-        if (model.device.type === "webgpu") {
-          model.setParameters({ ...model.parameters, ...parameters });
-        } else {
-          model.setParameters(parameters);
-        }
-      }
+      const webGPUDrawParameters = context.device instanceof import_webgl2.WebGLDevice ? null : splitWebGPUDrawParameters(parameters);
+      applyModelParameters(this.getModels(), renderPass, parameters, webGPUDrawParameters);
       if (context.device instanceof import_webgl2.WebGLDevice) {
         context.device.withParametersWebGL(parameters, () => {
           const opts = { renderPass, shaderModuleProps, uniforms, parameters, context };
@@ -11644,6 +11899,9 @@ var Layer = class extends component_default {
           this.draw(opts);
         });
       } else {
+        if (webGPUDrawParameters == null ? void 0 : webGPUDrawParameters.renderPassParameters) {
+          renderPass.setParameters(webGPUDrawParameters.renderPassParameters);
+        }
         const opts = { renderPass, shaderModuleProps, uniforms, parameters, context };
         for (const extension of this.props.extensions) {
           extension.draw.call(this, opts, extension);
@@ -11819,6 +12077,58 @@ var Layer = class extends component_default {
 Layer.defaultProps = defaultProps2;
 Layer.layerName = "Layer";
 var layer_default = Layer;
+function splitWebGPUDrawParameters(parameters) {
+  const { blendConstant, ...pipelineParameters } = parameters;
+  return blendConstant ? {
+    pipelineParameters,
+    renderPassParameters: { blendConstant }
+  } : { pipelineParameters };
+}
+function applyModelParameters(models, renderPass, parameters, webGPUDrawParameters) {
+  for (const model of models) {
+    if (model.device.type === "webgpu") {
+      syncModelAttachmentFormats(model, renderPass);
+      model.setParameters({
+        ...model.parameters,
+        ...webGPUDrawParameters == null ? void 0 : webGPUDrawParameters.pipelineParameters
+      });
+    } else {
+      model.setParameters(parameters);
+    }
+  }
+}
+function syncModelAttachmentFormats(model, renderPass) {
+  var _a, _b;
+  const framebuffer = renderPass.props.framebuffer || (renderPass.framebuffer ?? null);
+  if (!framebuffer) {
+    return;
+  }
+  const colorAttachmentFormats = framebuffer.colorAttachments.map((attachment) => {
+    var _a2;
+    return ((_a2 = attachment == null ? void 0 : attachment.texture) == null ? void 0 : _a2.format) ?? null;
+  });
+  const depthStencilAttachmentFormat = (_b = (_a = framebuffer.depthStencilAttachment) == null ? void 0 : _a.texture) == null ? void 0 : _b.format;
+  const modelWithProps = model;
+  if (!equalAttachmentFormats(modelWithProps.props.colorAttachmentFormats, colorAttachmentFormats) || modelWithProps.props.depthStencilAttachmentFormat !== depthStencilAttachmentFormat) {
+    modelWithProps.props.colorAttachmentFormats = colorAttachmentFormats;
+    modelWithProps.props.depthStencilAttachmentFormat = depthStencilAttachmentFormat;
+    modelWithProps._setPipelineNeedsUpdate("attachment formats");
+  }
+}
+function equalAttachmentFormats(left, right) {
+  if (left === right) {
+    return true;
+  }
+  if (!left || !right || left.length !== right.length) {
+    return false;
+  }
+  for (let i = 0; i < left.length; i++) {
+    if (left[i] !== right[i]) {
+      return false;
+    }
+  }
+  return true;
+}
 
 // dist/lib/composite-layer.js
 var TRACE_RENDER_LAYERS2 = "compositeLayer.renderLayers";
@@ -11997,13 +12307,13 @@ CompositeLayer.layerName = "CompositeLayer";
 var composite_layer_default = CompositeLayer;
 
 // dist/viewports/orbit-viewport.js
-var import_core23 = require("@math.gl/core");
+var import_core24 = require("@math.gl/core");
 var import_web_mercator9 = require("@math.gl/web-mercator");
 var DEGREES_TO_RADIANS3 = Math.PI / 180;
 function getViewMatrix2({ height, focalDistance, orbitAxis, rotationX, rotationOrbit, zoom }) {
   const up = orbitAxis === "Z" ? [0, 0, 1] : [0, 1, 0];
   const eye = orbitAxis === "Z" ? [0, -focalDistance, 0] : [0, 0, focalDistance];
-  const viewMatrix2 = new import_core23.Matrix4().lookAt({ eye, up });
+  const viewMatrix2 = new import_core24.Matrix4().lookAt({ eye, up });
   viewMatrix2.rotateX(rotationX * DEGREES_TO_RADIANS3);
   if (orbitAxis === "Z") {
     viewMatrix2.rotateZ(rotationOrbit * DEGREES_TO_RADIANS3);
@@ -12083,9 +12393,9 @@ OrbitViewport.displayName = "OrbitViewport";
 var orbit_viewport_default = OrbitViewport;
 
 // dist/viewports/orthographic-viewport.js
-var import_core24 = require("@math.gl/core");
+var import_core25 = require("@math.gl/core");
 var import_web_mercator10 = require("@math.gl/web-mercator");
-var viewMatrix = new import_core24.Matrix4().lookAt({ eye: [0, 0, 1] });
+var viewMatrix = new import_core25.Matrix4().lookAt({ eye: [0, 0, 1] });
 function getProjectionMatrix({ width, height, near, far, padding }) {
   let left = -width / 2;
   let right = width / 2;
@@ -12093,14 +12403,14 @@ function getProjectionMatrix({ width, height, near, far, padding }) {
   let top = height / 2;
   if (padding) {
     const { left: l = 0, right: r = 0, top: t = 0, bottom: b = 0 } = padding;
-    const offsetX = (0, import_core24.clamp)((l + width - r) / 2, 0, width) - width / 2;
-    const offsetY = (0, import_core24.clamp)((t + height - b) / 2, 0, height) - height / 2;
+    const offsetX = (0, import_core25.clamp)((l + width - r) / 2, 0, width) - width / 2;
+    const offsetY = (0, import_core25.clamp)((t + height - b) / 2, 0, height) - height / 2;
     left -= offsetX;
     right -= offsetX;
     bottom += offsetY;
     top += offsetY;
   }
-  return new import_core24.Matrix4().ortho({
+  return new import_core25.Matrix4().ortho({
     left,
     right,
     bottom,
@@ -12159,8 +12469,8 @@ var OrthographicViewport = class extends viewport_default {
   panByPosition(coords, pixel, startPixel) {
     const fromLocation = (0, import_web_mercator10.pixelsToWorld)(pixel, this.pixelUnprojectionMatrix);
     const toLocation = this.projectFlat(coords);
-    const translate = import_core24.vec2.add([], toLocation, import_core24.vec2.negate([], fromLocation));
-    const newCenter = import_core24.vec2.add([], this.center, translate);
+    const translate = import_core25.vec2.add([], toLocation, import_core25.vec2.negate([], fromLocation));
+    const newCenter = import_core25.vec2.add([], this.center, translate);
     return { target: this.unprojectFlat(newCenter) };
   }
 };
@@ -12169,20 +12479,20 @@ var orthographic_viewport_default = OrthographicViewport;
 
 // dist/viewports/first-person-viewport.js
 var import_web_mercator11 = require("@math.gl/web-mercator");
-var import_core25 = require("@math.gl/core");
+var import_core26 = require("@math.gl/core");
 var FirstPersonViewport = class extends viewport_default {
   constructor(props) {
     const { longitude, latitude, modelMatrix, bearing = 0, pitch = 0, up = [0, 0, 1] } = props;
-    const spherical = new import_core25._SphericalCoordinates({
+    const spherical = new import_core26._SphericalCoordinates({
       bearing,
       // Avoid "pixel project matrix not invertible" error
       pitch: pitch === -90 ? 1e-4 : 90 + pitch
     });
     const dir = spherical.toVector3().normalize();
-    const center = modelMatrix ? new import_core25.Matrix4(modelMatrix).transformAsVector(dir) : dir;
+    const center = modelMatrix ? new import_core26.Matrix4(modelMatrix).transformAsVector(dir) : dir;
     const zoom = Number.isFinite(latitude) ? (0, import_web_mercator11.getMeterZoom)({ latitude }) : 0;
     const scale = Math.pow(2, zoom);
-    const viewMatrix2 = new import_core25.Matrix4().lookAt({ eye: [0, 0, 0], center, up }).scale(scale);
+    const viewMatrix2 = new import_core26.Matrix4().lookAt({ eye: [0, 0, 0], center, up }).scale(scale);
     super({
       ...props,
       zoom,
@@ -12199,7 +12509,7 @@ FirstPersonViewport.displayName = "FirstPersonViewport";
 var first_person_viewport_default = FirstPersonViewport;
 
 // dist/controllers/first-person-controller.js
-var import_core26 = require("@math.gl/core");
+var import_core27 = require("@math.gl/core");
 var MOVEMENT_SPEED = 20;
 var PAN_SPEED = 500;
 var FirstPersonState = class extends ViewState {
@@ -12275,12 +12585,12 @@ var FirstPersonState = class extends ViewState {
     const { width, height, bearing, pitch } = this.getViewportProps();
     const deltaScaleX = PAN_SPEED * (pos[0] - startPanPos[0]) / width;
     const deltaScaleY = PAN_SPEED * (pos[1] - startPanPos[1]) / height;
-    const up = new import_core26._SphericalCoordinates({ bearing, pitch });
-    const forward = new import_core26._SphericalCoordinates({ bearing, pitch: -90 });
+    const up = new import_core27._SphericalCoordinates({ bearing, pitch });
+    const forward = new import_core27._SphericalCoordinates({ bearing, pitch: -90 });
     const yDirection = up.toVector3().normalize();
     const xDirection = forward.toVector3().cross(yDirection).normalize();
     return this._getUpdatedState({
-      position: new import_core26.Vector3(startPanPosition).add(xDirection.scale(deltaScaleX)).add(yDirection.scale(deltaScaleY))
+      position: new import_core27.Vector3(startPanPosition).add(xDirection.scale(deltaScaleX)).add(yDirection.scale(deltaScaleY))
     });
   }
   /**
@@ -12416,10 +12726,10 @@ var FirstPersonState = class extends ViewState {
     });
   }
   zoomIn(speed = MOVEMENT_SPEED) {
-    return this._move(new import_core26.Vector3(0, 0, 1), speed);
+    return this._move(new import_core27.Vector3(0, 0, 1), speed);
   }
   zoomOut(speed = MOVEMENT_SPEED) {
-    return this._move(new import_core26.Vector3(0, 0, -1), speed);
+    return this._move(new import_core27.Vector3(0, 0, -1), speed);
   }
   // shortest path between two view states
   shortestPathFrom(viewState) {
@@ -12438,11 +12748,11 @@ var FirstPersonState = class extends ViewState {
   _move(direction, speed, fromPosition = this.getViewportProps().position) {
     const delta = direction.scale(speed);
     return this._getUpdatedState({
-      position: new import_core26.Vector3(fromPosition).add(delta)
+      position: new import_core27.Vector3(fromPosition).add(delta)
     });
   }
   getDirection(use2D = false) {
-    const spherical = new import_core26._SphericalCoordinates({
+    const spherical = new import_core27._SphericalCoordinates({
       bearing: this.getViewportProps().bearing,
       pitch: use2D ? 90 : 90 + this.getViewportProps().pitch
     });
@@ -12460,7 +12770,7 @@ var FirstPersonState = class extends ViewState {
   // Apply any constraints (mathematical or defined by _viewportProps) to map state
   applyConstraints(props) {
     const { pitch, maxPitch, minPitch, longitude, position, bearing, maxBounds } = props;
-    props.pitch = (0, import_core26.clamp)(pitch, minPitch, maxPitch);
+    props.pitch = (0, import_core27.clamp)(pitch, minPitch, maxPitch);
     if (longitude !== null && (longitude < -180 || longitude > 180)) {
       props.longitude = mod(longitude + 180, 360) - 180;
     }
@@ -12468,9 +12778,9 @@ var FirstPersonState = class extends ViewState {
       props.bearing = mod(bearing + 180, 360) - 180;
     }
     if (maxBounds) {
-      const x = (0, import_core26.clamp)(position[0], maxBounds[0][0], maxBounds[1][0]);
-      const y = (0, import_core26.clamp)(position[1], maxBounds[0][1], maxBounds[1][1]);
-      const z = (0, import_core26.clamp)(position[2] ?? 0, maxBounds[0][2] ?? 0, maxBounds[1][2] ?? 0);
+      const x = (0, import_core27.clamp)(position[0], maxBounds[0][0], maxBounds[1][0]);
+      const y = (0, import_core27.clamp)(position[1], maxBounds[0][1], maxBounds[1][1]);
+      const z = (0, import_core27.clamp)(position[2] ?? 0, maxBounds[0][2] ?? 0, maxBounds[1][2] ?? 0);
       if (x !== position[0] || y !== position[1] || z !== position[2]) {
         props.position = [x, y, z];
       }
@@ -12505,7 +12815,7 @@ FirstPersonView.displayName = "FirstPersonView";
 var first_person_view_default = FirstPersonView;
 
 // dist/controllers/orbit-controller.js
-var import_core27 = require("@math.gl/core");
+var import_core28 = require("@math.gl/core");
 var OrbitState = class extends ViewState {
   constructor(options) {
     const {
@@ -12777,7 +13087,7 @@ var OrbitState = class extends ViewState {
   applyConstraints(props) {
     const { maxRotationX, minRotationX, rotationOrbit } = props;
     props.zoom = this._constrainZoom(props.zoom, props);
-    props.rotationX = (0, import_core27.clamp)(props.rotationX, minRotationX, maxRotationX);
+    props.rotationX = (0, import_core28.clamp)(props.rotationX, minRotationX, maxRotationX);
     if (rotationOrbit < -180 || rotationOrbit > 180) {
       props.rotationOrbit = mod(rotationOrbit + 180, 360) - 180;
     }
@@ -12799,7 +13109,7 @@ var OrbitState = class extends ViewState {
           minZoom = maxZoom;
       }
     }
-    return (0, import_core27.clamp)(zoom, minZoom, maxZoom);
+    return (0, import_core28.clamp)(zoom, minZoom, maxZoom);
   }
   _constrainTarget(props) {
     var _a;
@@ -12820,9 +13130,9 @@ var OrbitState = class extends ViewState {
       const minDot = nx * (nx >= 0 ? minX : maxX) + ny * (ny >= 0 ? minY : maxY) + nz * (nz >= 0 ? minZ : maxZ);
       const maxDot = nx * (nx >= 0 ? maxX : minX) + ny * (ny >= 0 ? maxY : minY) + nz * (nz >= 0 ? maxZ : minZ);
       if ((nx || ny || nz) && c >= minDot && c <= maxDot) {
-        const clampX = (value) => (0, import_core27.clamp)(value, minX, maxX);
-        const clampY = (value) => (0, import_core27.clamp)(value, minY, maxY);
-        const clampZ = (value) => (0, import_core27.clamp)(value, minZ, maxZ);
+        const clampX = (value) => (0, import_core28.clamp)(value, minX, maxX);
+        const clampY = (value) => (0, import_core28.clamp)(value, minY, maxY);
+        const clampZ = (value) => (0, import_core28.clamp)(value, minZ, maxZ);
         const f = (lambda2) => nx * clampX(target[0] - lambda2 * nx) + ny * clampY(target[1] - lambda2 * ny) + nz * clampZ(target[2] - lambda2 * nz) - c;
         let lo = -1;
         let hi = 1;
@@ -12858,9 +13168,9 @@ var OrbitState = class extends ViewState {
       }
     }
     return [
-      (0, import_core27.clamp)(target[0], minX, maxX),
-      (0, import_core27.clamp)(target[1], minY, maxY),
-      (0, import_core27.clamp)(target[2], minZ, maxZ)
+      (0, import_core28.clamp)(target[0], minX, maxX),
+      (0, import_core28.clamp)(target[1], minY, maxY),
+      (0, import_core28.clamp)(target[2], minZ, maxZ)
     ];
   }
 };
@@ -12911,7 +13221,7 @@ OrbitView.displayName = "OrbitView";
 var orbit_view_default = OrbitView;
 
 // dist/controllers/orthographic-controller.js
-var import_core28 = require("@math.gl/core");
+var import_core29 = require("@math.gl/core");
 function normalizeZoom({ zoom = 0, zoomX, zoomY }) {
   zoomX = zoomX ?? (Array.isArray(zoom) ? zoom[0] : zoom);
   zoomY = zoomY ?? (Array.isArray(zoom) ? zoom[1] : zoom);
@@ -13157,8 +13467,8 @@ var OrthographicState = class extends ViewState {
       const maxX = maxBounds[1][0] - halfWidth;
       const minY = maxBounds[0][1] + halfHeight;
       const maxY = maxBounds[1][1] - halfHeight;
-      const x = (0, import_core28.clamp)(target[0], minX, maxX);
-      const y = (0, import_core28.clamp)(target[1], minY, maxY);
+      const x = (0, import_core29.clamp)(target[0], minX, maxX);
+      const y = (0, import_core29.clamp)(target[1], minY, maxY);
       if (x !== target[0] || y !== target[1]) {
         props.target = target.slice();
         props.target[0] = x;
@@ -13190,10 +13500,10 @@ var OrthographicState = class extends ViewState {
     }
     switch (zoomAxis) {
       case "X":
-        zoomX = (0, import_core28.clamp)(zoomX, minZoomX, maxZoomX);
+        zoomX = (0, import_core29.clamp)(zoomX, minZoomX, maxZoomX);
         break;
       case "Y":
-        zoomY = (0, import_core28.clamp)(zoomY, minZoomY, maxZoomY);
+        zoomY = (0, import_core29.clamp)(zoomY, minZoomY, maxZoomY);
         break;
       default:
         let delta = Math.min(maxZoomX - zoomX, maxZoomY - zoomY, 0);
@@ -13243,7 +13553,7 @@ OrthographicView.displayName = "OrthographicView";
 var orthographic_view_default = OrthographicView;
 
 // dist/controllers/globe-controller.js
-var import_core29 = require("@math.gl/core");
+var import_core30 = require("@math.gl/core");
 var import_web_mercator12 = require("@math.gl/web-mercator");
 var DEGREES_TO_RADIANS4 = Math.PI / 180;
 var RADIANS_TO_DEGREES2 = 180 / Math.PI;
@@ -13304,10 +13614,10 @@ var GlobeState = class extends MapState {
     if (longitude < -180 || longitude > 180) {
       props.longitude = mod(longitude + 180, 360) - 180;
     }
-    props.latitude = (0, import_core29.clamp)(latitude, -import_web_mercator12.MAX_LATITUDE, import_web_mercator12.MAX_LATITUDE);
+    props.latitude = (0, import_core30.clamp)(latitude, -import_web_mercator12.MAX_LATITUDE, import_web_mercator12.MAX_LATITUDE);
     if (maxBounds) {
-      props.longitude = (0, import_core29.clamp)(props.longitude, maxBounds[0][0], maxBounds[1][0]);
-      props.latitude = (0, import_core29.clamp)(props.latitude, maxBounds[0][1], maxBounds[1][1]);
+      props.longitude = (0, import_core30.clamp)(props.longitude, maxBounds[0][0], maxBounds[1][0]);
+      props.latitude = (0, import_core30.clamp)(props.latitude, maxBounds[0][1], maxBounds[1][1]);
     }
     if (maxBounds) {
       const effectiveZoom = props.zoom - zoomAdjust(latitude);
@@ -13315,11 +13625,11 @@ var GlobeState = class extends MapState {
       const latSpan = maxBounds[1][1] - maxBounds[0][1];
       if (latSpan > 0 && latSpan < import_web_mercator12.MAX_LATITUDE * 2) {
         const halfHeightDegrees = Math.min(pixelsToDegrees(props.height, effectiveZoom), latSpan) / 2;
-        props.latitude = (0, import_core29.clamp)(props.latitude, maxBounds[0][1] + halfHeightDegrees, maxBounds[1][1] - halfHeightDegrees);
+        props.latitude = (0, import_core30.clamp)(props.latitude, maxBounds[0][1] + halfHeightDegrees, maxBounds[1][1] - halfHeightDegrees);
       }
       if (lngSpan > 0 && lngSpan < 360) {
         const halfWidthDegrees = Math.min(pixelsToDegrees(props.width / Math.cos(props.latitude * DEGREES_TO_RADIANS4), effectiveZoom), lngSpan) / 2;
-        props.longitude = (0, import_core29.clamp)(props.longitude, maxBounds[0][0] + halfWidthDegrees, maxBounds[1][0] - halfWidthDegrees);
+        props.longitude = (0, import_core30.clamp)(props.longitude, maxBounds[0][0] + halfWidthDegrees, maxBounds[1][0] - halfWidthDegrees);
       }
     }
     if (props.latitude !== latitude) {
@@ -13349,7 +13659,7 @@ var GlobeState = class extends MapState {
       if (minZoom > maxZoom)
         minZoom = maxZoom;
     }
-    return (0, import_core29.clamp)(zoom, minZoom + zoomAdjustment, maxZoom + zoomAdjustment);
+    return (0, import_core30.clamp)(zoom, minZoom + zoomAdjustment, maxZoom + zoomAdjustment);
   }
 };
 var GlobeController = class extends Controller {
@@ -13390,27 +13700,55 @@ var TerrainController = class extends MapController {
     super(...arguments);
     this._terrainAltitude = void 0;
     this._terrainAltitudeTarget = void 0;
+    this._pickFrameId = null;
+    this._lastPickTime = 0;
   }
   setProps(props) {
     super.setProps({ rotationPivot: "3d", ...props });
-    if (this._terrainAltitude !== void 0 && this._terrainAltitudeTarget !== void 0 && Math.abs(this._terrainAltitudeTarget - this._terrainAltitude) > 0.01) {
-      this.updateViewport(new this.ControllerState({
-        makeViewport: this.makeViewport,
-        ...this.props,
-        ...this.state
-      }));
+    if (this._pickFrameId === null) {
+      const loop = () => {
+        const now = Date.now();
+        if (now - this._lastPickTime > 500 && !this.isDragging()) {
+          this._lastPickTime = now;
+          this._pickTerrainCenterAltitude();
+          if (this._terrainAltitude === void 0 && this._terrainAltitudeTarget !== void 0) {
+            this._terrainAltitude = this._terrainAltitudeTarget;
+            const controllerState = new this.ControllerState({
+              makeViewport: this.makeViewport,
+              ...this.props,
+              ...this.state
+            });
+            const rebaseProps = this._rebaseViewport(this._terrainAltitudeTarget, controllerState);
+            if (rebaseProps) {
+              const rebasedState = new this.ControllerState({
+                makeViewport: this.makeViewport,
+                ...this.props,
+                ...this.state,
+                ...rebaseProps
+              });
+              super.updateViewport(rebasedState);
+            }
+          }
+        }
+        this._pickFrameId = requestAnimationFrame(loop);
+      };
+      this._pickFrameId = requestAnimationFrame(loop);
+    }
+  }
+  finalize() {
+    if (this._pickFrameId !== null) {
+      cancelAnimationFrame(this._pickFrameId);
+      this._pickFrameId = null;
     }
+    super.finalize();
   }
   updateViewport(newControllerState, extraProps = null, interactionState = {}) {
-    const SMOOTHING = 0.05;
-    if (this._terrainAltitudeTarget === void 0)
-      return;
     if (this._terrainAltitude === void 0) {
-      this._terrainAltitude = this._terrainAltitudeTarget;
-      extraProps = this._rebaseViewport(this._terrainAltitudeTarget, newControllerState, extraProps);
-    } else {
-      this._terrainAltitude += (this._terrainAltitudeTarget - this._terrainAltitude) * SMOOTHING;
+      super.updateViewport(newControllerState, extraProps, interactionState);
+      return;
     }
+    const SMOOTHING = 0.05;
+    this._terrainAltitude += (this._terrainAltitudeTarget - this._terrainAltitude) * SMOOTHING;
     const viewportProps = newControllerState.getViewportProps();
     const pos = viewportProps.position || [0, 0, 0];
     extraProps = {
@@ -13419,18 +13757,6 @@ var TerrainController = class extends MapController {
     };
     super.updateViewport(newControllerState, extraProps, interactionState);
   }
-  _onPanStart(event) {
-    this._pickTerrainCenterAltitude();
-    return super._onPanStart(event);
-  }
-  _onWheel(event) {
-    this._pickTerrainCenterAltitude();
-    return super._onWheel(event);
-  }
-  _onDoubleClick(event) {
-    this._pickTerrainCenterAltitude();
-    return super._onDoubleClick(event);
-  }
   _pickTerrainCenterAltitude() {
     if (!this.pickPosition) {
       return;
@@ -13442,10 +13768,10 @@ var TerrainController = class 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].
    */
-  _rebaseViewport(altitude, newControllerState, extraProps) {
+  _rebaseViewport(altitude, newControllerState) {
     const viewportProps = newControllerState.getViewportProps();
     const oldViewport = this.makeViewport({ ...viewportProps, position: [0, 0, 0] });
     const oldCameraPos = oldViewport.cameraPosition;
@@ -13453,7 +13779,7 @@ var TerrainController = class extends MapController {
     const cameraHeightAboveOldCenter = oldCameraPos[2];
     const newCameraHeightAboveCenter = cameraHeightAboveOldCenter - centerZOffset;
     if (newCameraHeightAboveCenter <= 0) {
-      return extraProps;
+      return null;
     }
     const zoomDelta = Math.log2(cameraHeightAboveOldCenter / newCameraHeightAboveCenter);
     const newZoom = viewportProps.zoom + zoomDelta;
@@ -13467,9 +13793,9 @@ var TerrainController = class extends MapController {
     const worldPoint = oldViewport.unproject(screenCenter, { targetZ: altitude });
     if (worldPoint && "panByPosition3D" in newViewport && 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;
   }
 };
 
@@ -13535,7 +13861,7 @@ LayerExtension.extensionName = "LayerExtension";
 var layer_extension_default = LayerExtension;
 
 // dist/transitions/fly-to-interpolator.js
-var import_core30 = require("@math.gl/core");
+var import_core31 = require("@math.gl/core");
 var import_web_mercator13 = require("@math.gl/web-mercator");
 var LINEARLY_INTERPOLATED_PROPS = {
   bearing: 0,
@@ -13558,7 +13884,7 @@ var FlyToInterpolator = class extends TransitionInterpolator {
   interpolateProps(startProps, endProps, t) {
     const viewport = (0, import_web_mercator13.flyToViewport)(startProps, endProps, t, this.opts);
     for (const key in LINEARLY_INTERPOLATED_PROPS) {
-      viewport[key] = (0, import_core30.lerp)(startProps[key] || LINEARLY_INTERPOLATED_PROPS[key], endProps[key] || LINEARLY_INTERPOLATED_PROPS[key], t);
+      viewport[key] = (0, import_core31.lerp)(startProps[key] || LINEARLY_INTERPOLATED_PROPS[key], endProps[key] || LINEARLY_INTERPOLATED_PROPS[key], t);
     }
     return viewport;
   }
@@ -13573,7 +13899,7 @@ var FlyToInterpolator = class extends TransitionInterpolator {
 };
 
 // dist/utils/tesselator.js
-var import_core31 = require("@luma.gl/core");
+var import_core32 = require("@luma.gl/core");
 var Tesselator = class {
   constructor(opts) {
     this.indexStarts = [0];
@@ -13680,7 +14006,7 @@ var Tesselator = class {
       instanceCount = vertexStarts[data.length] || 0;
       if (ArrayBuffer.isView(geometryBuffer)) {
         instanceCount = instanceCount || geometryBuffer.length / this.positionSize;
-      } else if (geometryBuffer instanceof import_core31.Buffer) {
+      } else if (geometryBuffer instanceof import_core32.Buffer) {
         const byteStride = this.positionSize * 4;
         instanceCount = instanceCount || geometryBuffer.byteLength / byteStride;
       } else if (geometryBuffer.buffer) {