@tangram.gl/tangram-layers 0.0.0-stage → 0.0.1

package/dist/experimental/webxr.js

@@ -0,0 +1,1423 @@
+// src/experimental/webxr/interaction.ts
+import { getWebXRInputRay } from "@luma.gl/experimental";
+var WebXRInputAdapter = class {
+  options;
+  previousSelect = /* @__PURE__ */ new Map();
+  previousSqueeze = /* @__PURE__ */ new Map();
+  previousPointers = /* @__PURE__ */ new Map();
+  constructor(options = {}) {
+    this.options = {
+      moveDeadzone: options.moveDeadzone ?? 0.15,
+      turnDeadzone: options.turnDeadzone ?? 0.55,
+      moveSpeed: options.moveSpeed ?? 1,
+      turnSpeed: options.turnSpeed ?? 30
+    };
+  }
+  /** Translate one XR input frame into time-scaled navigation, pointing, and signal intents. */
+  update(inputStates, elapsedSeconds = 1 / 60) {
+    const intents = [];
+    const activeKeys = /* @__PURE__ */ new Set();
+    for (const inputState of inputStates) {
+      const key = `${inputState.handedness || "none"}:${inputState.index}`;
+      activeKeys.add(key);
+      const ray = getWebXRInputRay(
+        inputState
+      );
+      if (ray && ray.origin.every(Number.isFinite) && ray.direction.every(Number.isFinite) && Math.hypot(...ray.direction) > 0) {
+        const pointer = {
+          origin: [ray.origin[0], ray.origin[1], ray.origin[2]],
+          direction: [ray.direction[0], ray.direction[1], ray.direction[2]],
+          handedness: inputState.handedness
+        };
+        this.previousPointers.set(key, pointer);
+        intents.push({ type: "point", pointer, action: "hover", inputId: key });
+        appendActivationIntent({
+          intents,
+          active: Boolean(inputState.selectActive),
+          previous: this.previousSelect.get(key) || false,
+          pointer,
+          pressedAction: "select",
+          releasedAction: "release",
+          inputId: key,
+          button: "select"
+        });
+        appendActivationIntent({
+          intents,
+          active: Boolean(inputState.squeezeActive),
+          previous: this.previousSqueeze.get(key) || false,
+          pointer,
+          pressedAction: "grab",
+          releasedAction: "release",
+          inputId: key,
+          button: "squeeze"
+        });
+      } else {
+        const pointer = this.previousPointers.get(key);
+        if (pointer && (this.previousSelect.get(key) || this.previousSqueeze.get(key))) {
+          intents.push({ type: "point", pointer, action: "cancel", inputId: key });
+        }
+        this.previousPointers.delete(key);
+      }
+      this.previousSelect.set(key, Boolean(inputState.selectActive));
+      this.previousSqueeze.set(key, Boolean(inputState.squeezeActive));
+      this.appendGamepadIntents(intents, inputState, Math.max(0, elapsedSeconds));
+    }
+    for (const key of this.previousSelect.keys()) {
+      if (!activeKeys.has(key)) {
+        const pointer = this.previousPointers.get(key);
+        if (pointer && (this.previousSelect.get(key) || this.previousSqueeze.get(key))) {
+          intents.push({ type: "point", pointer, action: "cancel", inputId: key });
+        }
+        this.previousSelect.delete(key);
+        this.previousSqueeze.delete(key);
+        this.previousPointers.delete(key);
+      }
+    }
+    return intents;
+  }
+  /** Forget action transitions, for example when an XR session ends. */
+  reset() {
+    this.previousSelect.clear();
+    this.previousSqueeze.clear();
+    this.previousPointers.clear();
+  }
+  appendGamepadIntents(intents, inputState, elapsedSeconds) {
+    const axes = inputState.gamepad?.axes;
+    if (!axes || axes.length < 2) {
+      return;
+    }
+    const horizontal = applyDeadzone(axes[axes.length - 2] || 0, this.options.moveDeadzone);
+    const vertical = applyDeadzone(axes[axes.length - 1] || 0, this.options.moveDeadzone);
+    if (inputState.handedness === "right") {
+      if (Math.abs(horizontal) >= this.options.turnDeadzone) {
+        intents.push({
+          type: "navigate",
+          action: "turn",
+          delta: [Math.sign(horizontal) * this.options.turnSpeed * elapsedSeconds],
+          handedness: inputState.handedness
+        });
+      }
+      return;
+    }
+    if (horizontal || vertical) {
+      intents.push({
+        type: "navigate",
+        action: "move",
+        delta: [
+          horizontal * this.options.moveSpeed * elapsedSeconds,
+          -vertical * this.options.moveSpeed * elapsedSeconds
+        ],
+        handedness: inputState.handedness
+      });
+    }
+  }
+};
+async function setWebXRSessionWithFallback(manager, session, referenceSpaceTypes = ["local-floor", "local"]) {
+  let lastError;
+  for (const referenceSpaceType of referenceSpaceTypes) {
+    try {
+      await manager.setSession(session, { referenceSpaceType });
+      return referenceSpaceType;
+    } catch (error) {
+      lastError = error;
+      if (!(error instanceof DOMException) || error.name !== "NotSupportedError") {
+        throw error;
+      }
+    }
+  }
+  throw lastError || new Error("No requested WebXR reference space is available");
+}
+function appendActivationIntent({
+  intents,
+  active,
+  previous,
+  pointer,
+  pressedAction,
+  releasedAction,
+  inputId,
+  button
+}) {
+  if (active && !previous) {
+    intents.push({ type: "point", pointer, action: pressedAction, inputId, button });
+  } else if (!active && previous) {
+    intents.push({ type: "point", pointer, action: releasedAction, inputId, button });
+  }
+}
+function applyDeadzone(value, deadzone) {
+  return Math.abs(value) < deadzone ? 0 : value;
+}
+
+// src/experimental/webxr/presentation.ts
+import { Matrix4 as Matrix42 } from "@math.gl/core";
+import { DoubleClickDrag, EventManager, Pan, Pinch, Tap } from "mjolnir.js";
+
+// src/experimental/webxr/projection.ts
+import { Matrix4 } from "@math.gl/core";
+import { PlaneShape, SphereShape } from "@math.gl/culling";
+import { PROJECTION_CONSTANTS, unprojectGlobePosition } from "@tangram.gl/tangram-renderer/core";
+var TANGRAM_HALF_WORLD_METERS = 20037508342789244e-9;
+var GLOBE_RADIUS = PROJECTION_CONSTANTS.globeRadius;
+var MAP_SURFACE = new PlaneShape();
+var GLOBE_SURFACE = new SphereShape({ radius: GLOBE_RADIUS });
+var MAX_MERCATOR_LATITUDE = 85.05112878;
+var DEGREES_TO_RADIANS = Math.PI / 180;
+var RADIANS_TO_DEGREES = 180 / Math.PI;
+function longitudeLatitudeToMeters(longitude, latitude) {
+  const clampedLatitude = Math.max(
+    -MAX_MERCATOR_LATITUDE,
+    Math.min(MAX_MERCATOR_LATITUDE, latitude)
+  );
+  return [
+    longitude / 180 * TANGRAM_HALF_WORLD_METERS,
+    Math.log(Math.tan((90 + clampedLatitude) * Math.PI / 360)) / Math.PI * TANGRAM_HALF_WORLD_METERS
+  ];
+}
+function metersToLongitudeLatitude(x, y, altitude = 0) {
+  return [
+    x / TANGRAM_HALF_WORLD_METERS * 180,
+    Math.atan(Math.exp(y / TANGRAM_HALF_WORLD_METERS * Math.PI)) * 360 / Math.PI - 90,
+    altitude
+  ];
+}
+function createXRPoseMatrix(pose = {}) {
+  const position = pose.position || [0, 0, 0];
+  const orientation = pose.orientation || [0, 0, 0, 1];
+  return new Matrix4().translate(position).multiplyRight(new Matrix4().fromQuaternion(orientation));
+}
+function createXRPlacementMatrix(placement, viewState = {}) {
+  if (placement.type === "globe") {
+    const longitude2 = finiteNumber(viewState.longitude, placement.anchor[0]);
+    const latitude2 = finiteNumber(viewState.latitude, placement.anchor[1]);
+    const rotation = placement.rotation || 0;
+    const scale = placement.radius / GLOBE_RADIUS;
+    return createXRPoseMatrix(placement.pose).rotateX(latitude2 * DEGREES_TO_RADIANS - Math.PI / 2).rotateZ(-(longitude2 + rotation) * DEGREES_TO_RADIANS).scale([scale, scale, scale]);
+  }
+  const fallbackAnchor = placement.type === "map" ? placement.anchor : placement.origin;
+  const longitude = finiteNumber(viewState.longitude, fallbackAnchor[0]);
+  const latitude = finiteNumber(viewState.latitude, fallbackAnchor[1]);
+  const [centerX, centerY] = longitudeLatitudeToMeters(longitude, latitude);
+  const metersPerMercatorMeter = Math.cos(
+    Math.max(-MAX_MERCATOR_LATITUDE, Math.min(MAX_MERCATOR_LATITUDE, latitude)) * DEGREES_TO_RADIANS
+  );
+  if (placement.type === "map") {
+    const scale = 1 / placement.metersPerXRUnit;
+    return createXRPoseMatrix(placement.pose).rotateX(-Math.PI / 2).scale([scale * metersPerMercatorMeter, scale * metersPerMercatorMeter, scale]).translate([-centerX, -centerY, -(placement.anchor[2] || 0)]);
+  }
+  const offset = placement.position || [0, 0, 0];
+  const bearing = finiteNumber(viewState.bearing, placement.bearing || 0);
+  return createXRPoseMatrix(placement.pose).rotateY(-bearing * DEGREES_TO_RADIANS).rotateX(-Math.PI / 2).translate([-offset[0], -offset[1], -offset[2]]).scale([metersPerMercatorMeter, metersPerMercatorMeter, 1]).translate([-centerX, -centerY, 0]);
+}
+function transformXRRayToContent(ray, placementMatrix) {
+  const inverse = new Matrix4().copy(placementMatrix).invert();
+  const origin = transformPoint(inverse, ray.origin);
+  const farPoint = transformPoint(inverse, [
+    ray.origin[0] + ray.direction[0],
+    ray.origin[1] + ray.direction[1],
+    ray.origin[2] + ray.direction[2]
+  ]);
+  return {
+    origin,
+    direction: normalizeVector([
+      farPoint[0] - origin[0],
+      farPoint[1] - origin[1],
+      farPoint[2] - origin[2]
+    ])
+  };
+}
+function intersectXRMap(ray, placement, viewState = {}) {
+  const placementMatrix = createXRPlacementMatrix(placement, viewState);
+  const localRay = transformXRRayToContent(ray, placementMatrix);
+  return intersectContentSurface(localRay, placement, viewState)?.coordinate || null;
+}
+function intersectContentSurface(localRay, placement, viewState = {}) {
+  if (!localRay.origin.every(Number.isFinite) || !localRay.direction.every(Number.isFinite) || Math.hypot(...localRay.direction) === 0) return null;
+  if (placement.type === "globe") {
+    const distance2 = intersectSphereDistance(localRay.origin, localRay.direction);
+    if (distance2 === null) return null;
+    const point = [
+      localRay.origin[0] + localRay.direction[0] * distance2,
+      localRay.origin[1] + localRay.direction[1] * distance2,
+      localRay.origin[2] + localRay.direction[2] * distance2
+    ];
+    const coordinate = globePositionToLongitudeLatitude(point);
+    coordinate[2] = 0;
+    return { coordinate, position: point };
+  }
+  const distance = intersectPlaneDistance(localRay.origin, localRay.direction, 0);
+  if (distance === null) {
+    return null;
+  }
+  const hit = [
+    localRay.origin[0] + localRay.direction[0] * distance,
+    localRay.origin[1] + localRay.direction[1] * distance,
+    0
+  ];
+  if (!isContentPointWithinMapBounds(hit, placement, viewState)) return null;
+  return { coordinate: metersToLongitudeLatitude(hit[0], hit[1]), position: hit };
+}
+function isContentPointWithinMapBounds(hit, placement, viewState = {}) {
+  if (placement.type === "map" && placement.surface?.type === "bounded") {
+    const longitude = finiteNumber(viewState.longitude, placement.anchor[0]);
+    const latitude = finiteNumber(viewState.latitude, placement.anchor[1]);
+    const [centerX, centerY] = longitudeLatitudeToMeters(longitude, latitude);
+    const latitudeScale = Math.cos(
+      Math.max(-MAX_MERCATOR_LATITUDE, Math.min(MAX_MERCATOR_LATITUDE, latitude)) * DEGREES_TO_RADIANS
+    );
+    const halfWidth = placement.surface.width * placement.metersPerXRUnit / (2 * latitudeScale);
+    const halfHeight = placement.surface.height * placement.metersPerXRUnit / (2 * latitudeScale);
+    if (Math.abs(hit[0] - centerX) > halfWidth || Math.abs(hit[1] - centerY) > halfHeight) {
+      return false;
+    }
+  }
+  return true;
+}
+function intersectXRGlobe(ray, placement, viewState = {}) {
+  const placementMatrix = createXRPlacementMatrix(placement, viewState);
+  const localRay = transformXRRayToContent(ray, placementMatrix);
+  return intersectContentSurface(localRay, placement, viewState)?.coordinate || null;
+}
+function getXRGlobeVisibleBounds({
+  views,
+  placement,
+  viewState
+}) {
+  const placementMatrix = createXRPlacementMatrix(placement, viewState);
+  const coordinates = [];
+  const samples = [-1, 0, 1];
+  let crossesHorizon = false;
+  for (const view of views) {
+    const inverseClip = new Matrix4(view.projectionMatrix).multiplyRight(view.viewMatrix).multiplyRight(placementMatrix).invert();
+    for (const x of samples) {
+      for (const y of samples) {
+        const near = transformHomogeneousPoint(inverseClip, [x, y, -1]);
+        const far = transformHomogeneousPoint(inverseClip, [x, y, 1]);
+        const direction = normalizeVector([
+          far[0] - near[0],
+          far[1] - near[1],
+          far[2] - near[2]
+        ]);
+        const distance = intersectSphereDistance(near, direction);
+        if (distance !== null) {
+          coordinates.push(
+            globePositionToLongitudeLatitude([
+              near[0] + direction[0] * distance,
+              near[1] + direction[1] * distance,
+              near[2] + direction[2] * distance
+            ])
+          );
+        } else crossesHorizon = true;
+      }
+    }
+  }
+  if (crossesHorizon && coordinates.length > 0) {
+    return getXRGlobeHorizonBounds(
+      views,
+      placementMatrix,
+      finiteNumber(viewState?.longitude, placement.anchor[0])
+    );
+  }
+  if (coordinates.length === 0) {
+    return [-180, -MAX_MERCATOR_LATITUDE, 180, MAX_MERCATOR_LATITUDE];
+  }
+  const anchorLongitude = finiteNumber(viewState?.longitude, placement.anchor[0]);
+  const unwrappedLongitudes = coordinates.map(
+    ([longitude]) => unwrapLongitude(longitude, anchorLongitude)
+  );
+  const latitudes = coordinates.map((coordinate) => coordinate[1]);
+  return [
+    Math.min(...unwrappedLongitudes),
+    Math.max(-MAX_MERCATOR_LATITUDE, Math.min(...latitudes)),
+    Math.max(...unwrappedLongitudes),
+    Math.min(MAX_MERCATOR_LATITUDE, Math.max(...latitudes))
+  ];
+}
+function getXRGlobeHorizonBounds(views, placementMatrix, anchorLongitude) {
+  let west = Infinity, south = Infinity, east = -Infinity, north = -Infinity;
+  for (const view of views) {
+    const camera = new Matrix4(view.viewMatrix).multiplyRight(placementMatrix).invert().transformAsPoint([0, 0, 0]);
+    const distance = Math.hypot(camera[0], camera[1], camera[2]);
+    if (!Number.isFinite(distance) || distance <= GLOBE_RADIUS) {
+      return [anchorLongitude - 180, -MAX_MERCATOR_LATITUDE, anchorLongitude + 180, MAX_MERCATOR_LATITUDE];
+    }
+    const [longitude, latitude] = globePositionToLongitudeLatitude([camera[0], camera[1], camera[2]]);
+    const radius = Math.acos(GLOBE_RADIUS / distance);
+    const latitudeRadians = latitude * DEGREES_TO_RADIANS;
+    const centerLongitude = unwrapLongitude(longitude, anchorLongitude);
+    const longitudeRadius = Math.abs(latitudeRadians) + radius >= Math.PI / 2 ? Math.PI : Math.asin(Math.min(1, Math.sin(radius) / Math.cos(latitudeRadians)));
+    west = Math.min(west, longitudeRadius === Math.PI ? anchorLongitude - 180 : centerLongitude - longitudeRadius / DEGREES_TO_RADIANS);
+    east = Math.max(east, longitudeRadius === Math.PI ? anchorLongitude + 180 : centerLongitude + longitudeRadius / DEGREES_TO_RADIANS);
+    south = Math.min(south, latitude - radius / DEGREES_TO_RADIANS);
+    north = Math.max(north, latitude + radius / DEGREES_TO_RADIANS);
+  }
+  return [west, Math.max(-MAX_MERCATOR_LATITUDE, south), east, Math.min(MAX_MERCATOR_LATITUDE, north)];
+}
+function unionGeographicBounds(bounds, anchorLongitude = 0) {
+  if (bounds.length === 0) {
+    return [-180, -MAX_MERCATOR_LATITUDE, 180, MAX_MERCATOR_LATITUDE];
+  }
+  const west = bounds.map((value) => unwrapLongitude(value[0], anchorLongitude));
+  const east = bounds.map((value) => unwrapLongitude(value[2], anchorLongitude));
+  return [
+    Math.min(...west),
+    Math.min(...bounds.map((value) => value[1])),
+    Math.max(...east),
+    Math.max(...bounds.map((value) => value[3]))
+  ];
+}
+function intersectPlaneDistance(origin, direction, planeZ) {
+  if (Math.abs(direction[2]) < 1e-8) {
+    return null;
+  }
+  return MAP_SURFACE.intersectLocalRay(
+    [origin[0], origin[2] - planeZ, origin[1]],
+    [direction[0], direction[2], direction[1]]
+  )?.distance ?? null;
+}
+function intersectSphereDistance(origin, direction) {
+  return GLOBE_SURFACE.intersectLocalRay(origin, direction)?.distance ?? null;
+}
+function globePositionToLongitudeLatitude(point) {
+  return unprojectGlobePosition(point);
+}
+function transformPoint(matrix, point) {
+  return transformHomogeneousPoint(matrix, point);
+}
+function transformHomogeneousPoint(matrix, point) {
+  const x = point[0];
+  const y = point[1];
+  const z = point[2];
+  const w = matrix[3] * x + matrix[7] * y + matrix[11] * z + matrix[15];
+  const divisor = w || 1;
+  return [
+    (matrix[0] * x + matrix[4] * y + matrix[8] * z + matrix[12]) / divisor,
+    (matrix[1] * x + matrix[5] * y + matrix[9] * z + matrix[13]) / divisor,
+    (matrix[2] * x + matrix[6] * y + matrix[10] * z + matrix[14]) / divisor
+  ];
+}
+function normalizeVector(vector) {
+  const length = Math.hypot(vector[0], vector[1], vector[2]);
+  if (!length) {
+    return [0, 0, -1];
+  }
+  return [vector[0] / length, vector[1] / length, vector[2] / length];
+}
+function finiteNumber(value, fallback) {
+  return Number.isFinite(value) ? value : fallback;
+}
+function unwrapLongitude(longitude, anchor) {
+  let result = longitude;
+  while (result - anchor > 180) result -= 360;
+  while (result - anchor < -180) result += 360;
+  return result;
+}
+
+// src/experimental/webxr/presentation.ts
+var DEFAULT_INTERPUPILLARY_DISTANCE = 0.064;
+var WebXRPresentation = class {
+  /** Initialize one logical view without allocating controllers or GPU resources. */
+  constructor({ view, viewState, placement, mode = "auto" }) {
+    this.view = view;
+    this.viewState = { ...viewState };
+    this.placement = placement || createDefaultPlacement(view, viewState);
+    this.mode = mode;
+    this.controllerMode = mode;
+    this.controller = null;
+    this.rightController = null;
+    this.eventManager = null;
+    this.controllerSize = { width: 1, height: 1 };
+  }
+  /** Read the shared state used by mono and both stereo eyes. */
+  getViewState() {
+    return this.viewState;
+  }
+  /** Apply a logical navigation patch and synchronize desktop controllers. */
+  setViewState(update) {
+    const patch = typeof update === "function" ? update(this.viewState) : update;
+    this.viewState = { ...this.viewState, ...patch };
+    this.updateController(this.controllerSize);
+    return this.viewState;
+  }
+  /** Replace the room placement without changing geographic navigation. */
+  setPlacement(placement) {
+    this.placement = placement;
+  }
+  /** Change the requested presentation mode and desktop hit regions. */
+  setMode(mode) {
+    this.mode = mode;
+    this.updateController(this.controllerSize);
+  }
+  /** Install deck.gl gestures backed by the shared logical navigation state. */
+  attachController({ element, timeline, onViewStateChange = () => {
+  }, onStateChange = () => {
+  } }) {
+    const controllerOptions = this.view.controller;
+    if (!controllerOptions) return null;
+    this.eventManager = new EventManager(element, {
+      touchAction: "none",
+      recognizers: [
+        { recognizer: new Pan({ event: "multipan", threshold: 10, pointers: 2, trackpad: true }) },
+        { recognizer: new Pinch({ event: "pinch", trackpad: true }), requireFailure: ["multipan"] },
+        {
+          recognizer: new Pan({ event: "pan", threshold: 1 }),
+          recognizeWith: ["pinch"],
+          requireFailure: ["multipan"]
+        },
+        { recognizer: new Tap({ event: "dblclick", taps: 2, enable: false }) },
+        {
+          recognizer: new DoubleClickDrag({ event: "dblclickdrag", enable: false }),
+          recognizeWith: ["dblclick"]
+        },
+        {
+          recognizer: new Tap({ event: "click" }),
+          recognizeWith: ["dblclickdrag"],
+          requireFailure: ["dblclick", "dblclickdrag"]
+        }
+      ]
+    });
+    this.controllerCallbacks = { timeline, onViewStateChange, onStateChange };
+    this.controller = this.createController();
+    this.updateController(this.controllerSize);
+    return this.controller;
+  }
+  /** Create a controller for one screen region backed by the shared view state. */
+  createController() {
+    const controllerOptions = this.view.controller;
+    if (!controllerOptions || !this.eventManager) {
+      throw new Error("Attach a controller before creating an eye controller");
+    }
+    const { timeline, onViewStateChange, onStateChange } = this.controllerCallbacks;
+    const Controller = controllerOptions.type;
+    return new Controller({
+      timeline,
+      eventManager: this.eventManager,
+      makeViewport: (viewState) => requireViewport(this.view.makeViewport({
+        ...this.controllerSize,
+        width: this.controllerMode === "stereo-preview" ? this.controllerSize.width / 2 : this.controllerSize.width,
+        viewState
+      })),
+      onViewStateChange: (parameters) => {
+        this.viewState = { ...parameters.viewState };
+        this.updateController(this.controllerSize);
+        onViewStateChange({ ...parameters, viewState: this.viewState });
+      },
+      onStateChange
+    });
+  }
+  /** Match controller rectangles to the current mono or stereo dimensions. */
+  updateController({ width, height }, mode = this.mode) {
+    this.controllerSize = { width, height };
+    this.controllerMode = mode;
+    if (!this.controller) return;
+    if (mode === "stereo-preview") {
+      this.rightController ||= this.createController();
+      width /= 2;
+    } else if (this.rightController) {
+      this.rightController.finalize();
+      this.rightController = null;
+    }
+    const viewport = this.view.makeViewport({ width, height, viewState: this.viewState });
+    const controllerOptions = this.view.controller;
+    if (!viewport || !controllerOptions) return;
+    this.controller.setProps({
+      ...this.viewState,
+      ...controllerOptions,
+      id: this.view.id,
+      x: viewport.x,
+      y: viewport.y,
+      width: viewport.width,
+      height: viewport.height
+    });
+    this.rightController?.setProps({
+      ...this.viewState,
+      ...controllerOptions,
+      // Keyboard input is global to the shared EventManager. Only the left
+      // controller handles it, otherwise FirstPersonView moves twice per key.
+      keyboard: false,
+      id: `${this.view.id}-right`,
+      x: width,
+      y: viewport.y,
+      width: viewport.width,
+      height: viewport.height
+    });
+  }
+  /** Advance desktop zoom and inertia transitions once per animation frame. */
+  updateTransitions() {
+    this.controller?.updateTransition();
+    this.rightController?.updateTransition();
+  }
+  /** Release desktop input resources without taking ownership of the host view. */
+  finalize() {
+    this.controller?.finalize();
+    this.rightController?.finalize();
+    this.eventManager?.destroy();
+    this.controller = null;
+    this.rightController = null;
+    this.eventManager = null;
+  }
+  /** Derive one eye viewport and its matching Tangram camera contract. */
+  makeRenderView({ id, width, height, eyeOffset = 0, viewportX = 0 }) {
+    const deckViewport = this.view.makeEyeViewport({
+      width,
+      height,
+      viewState: this.viewState,
+      eyeOffset
+    });
+    if (!deckViewport) {
+      throw new Error(`${this.view.constructor.displayName} produced an empty viewport`);
+    }
+    const hostFrame = this.view.getHostFrame(deckViewport);
+    return {
+      id,
+      viewport: { x: viewportX, y: 0, width, height },
+      camera: hostFrame.camera,
+      hostFrame,
+      deckViewport
+    };
+  }
+  /** Derive parallel off-axis desktop eyes with one shared geographic anchor. */
+  makeStereoRenderViews({ width, height, interpupillaryDistance = DEFAULT_INTERPUPILLARY_DISTANCE }) {
+    return ["left-eye", "right-eye"].map((id, index) => {
+      const renderView = this.makeRenderView({ id, width, height });
+      const viewport = renderView.deckViewport;
+      const viewScale = Math.hypot(
+        viewport.viewMatrix[0],
+        viewport.viewMatrix[4],
+        viewport.viewMatrix[8]
+      );
+      const unitsPerXR = this.placement.type === "globe" ? viewScale * 256 / this.placement.radius : viewScale * viewport.distanceScales.unitsPerMeter[2] * (this.placement.type === "map" ? this.placement.metersPerXRUnit : 1);
+      const eyeOffset = (index === 0 ? -0.5 : 0.5) * interpupillaryDistance * unitsPerXR;
+      const anchor = viewport.projectPosition([
+        this.viewState.longitude,
+        this.viewState.latitude,
+        0
+      ]);
+      const anchorInView = new Matrix42().copy(viewport.viewMatrix).transformAsPoint(anchor);
+      const anchorDistance = -anchorInView[2];
+      const convergence = anchorDistance > 0.01 ? anchorDistance : this.placement.type === "first-person" ? 100 * unitsPerXR : 0.01;
+      const viewMatrix = new Matrix42().translate([-eyeOffset, 0, 0]).multiplyRight(renderView.camera.view);
+      const projectionMatrix = new Matrix42().copy(viewport.projectionMatrix);
+      projectionMatrix[8] -= projectionMatrix[0] * eyeOffset / convergence;
+      renderView.camera = {
+        ...renderView.camera,
+        view: viewMatrix,
+        projection: this.view.getXRProjectionMatrix({ projectionMatrix, viewMatrix }),
+        position: this.placement.type === "globe" ? getCameraPosition(viewMatrix) : renderView.camera.position
+      };
+      renderView.hostFrame = { ...renderView.hostFrame, camera: renderView.camera };
+      if (typeof this.view.getHostFrameForCamera === "function") {
+        renderView.hostFrame = this.view.getHostFrameForCamera(viewport, renderView.camera);
+      }
+      return renderView;
+    });
+  }
+  /** Compose native XR eye matrices with content placement. */
+  makeXRRenderViews({ frameState, placementMatrix }) {
+    const logicalViewport = requireViewport(this.view.makeViewport({
+      width: Math.max(...frameState.views.map((view) => view.viewport[0] + view.viewport[2])),
+      height: Math.max(...frameState.views.map((view) => view.viewport[1] + view.viewport[3])),
+      viewState: this.viewState
+    }));
+    return frameState.views.map((xrView) => {
+      const [x, y, width, height] = xrView.viewport;
+      const viewMatrix = new Matrix42().copy(xrView.viewMatrix).multiplyRight(placementMatrix);
+      const projectionMatrix = new Matrix42().copy(xrView.projectionMatrix);
+      const renderView = {
+        id: xrView.eye || `eye-${xrView.index}`,
+        viewport: { x, y, width, height },
+        camera: {
+          view: viewMatrix,
+          projection: this.view.getXRProjectionMatrix({ projectionMatrix, viewMatrix }),
+          position: this.placement.type === "globe" ? getCameraPosition(viewMatrix) : [0, 0, 0]
+        },
+        deckViewport: logicalViewport,
+        xrView,
+        view: this.view,
+        viewState: this.viewState
+      };
+      if (typeof this.view.getHostFrameForCamera === "function") {
+        renderView.hostFrame = this.view.getHostFrameForCamera(logicalViewport, renderView.camera, { width, height });
+      }
+      return renderView;
+    });
+  }
+  /** Prepare a presentation snapshot and renderer-independent host frame. */
+  createFrame({ width, height, frameState, mode = this.mode, interpupillaryDistance, tileResources }) {
+    const resolvedMode = resolveMode(mode, frameState);
+    this.updateController({ width, height }, resolvedMode);
+    const logicalViewport = this.view.makeViewport({ width, height, viewState: this.viewState });
+    if (!logicalViewport) throw new Error("The logical deck.gl view produced an empty viewport");
+    let renderViews;
+    if (resolvedMode === "immersive-vr" && frameState?.views?.length) {
+      const placementMatrix = createXRPlacementMatrix(this.placement, this.viewState);
+      renderViews = this.makeXRRenderViews({ frameState, placementMatrix });
+    } else if (resolvedMode === "stereo-preview") {
+      const eyeWidth = Math.floor(width / 2);
+      renderViews = this.makeStereoRenderViews({
+        width: eyeWidth,
+        height,
+        interpupillaryDistance
+      });
+      renderViews[1].viewport.x = eyeWidth;
+    } else {
+      renderViews = [this.makeRenderView({ id: "mono", width, height })];
+    }
+    return {
+      mode: resolvedMode,
+      logicalViewport,
+      renderViews,
+      hostFrame: { ...this.createHostFrame({ width, height, renderViews, frameState }), tileResources }
+    };
+  }
+  /** Union per-eye visibility while preserving camera-independent host metadata. */
+  createHostFrame({ width, height, renderViews, frameState }) {
+    const fields = renderViews.find((renderView) => renderView.hostFrame)?.hostFrame;
+    const fallback = this.view.getHostFrame(
+      requireViewport(this.view.makeViewport({ width, height, viewState: this.viewState }))
+    );
+    const frameFields = fields || fallback;
+    let projection = frameFields.projection;
+    if (this.placement.type === "globe" && frameState?.views?.length) {
+      projection = {
+        ...frameFields.projection,
+        type: "globe",
+        visibleBounds: getXRGlobeVisibleBounds({
+          views: frameState.views,
+          placement: this.placement,
+          viewState: this.viewState
+        })
+      };
+    }
+    return {
+      viewport: { x: 0, y: 0, width, height },
+      geographicAnchor: frameFields.view,
+      projection,
+      renderViews: renderViews.map((renderView) => ({
+        ...renderView,
+        // Keep native render-pass rectangles untouched, but HostFrame routes
+        // top-origin canvas pixels (desktop CSS, immersive framebuffer units).
+        viewport: renderView.xrView ? {
+          ...renderView.viewport,
+          y: height - (renderView.viewport.y ?? 0) - renderView.viewport.height
+        } : renderView.viewport,
+        geographicAnchor: renderView.hostFrame?.view,
+        // Immersive globe bounds already describe the union in room space.
+        projection: frameState?.views?.length && this.placement.type === "globe" ? void 0 : renderView.hostFrame?.projection
+      })),
+      activeRenderViewId: renderViews[0].id,
+      tileBuffer: frameFields.tileBuffer,
+      globePreloadZoom: frameFields.globePreloadZoom
+    };
+  }
+  /** Apply navigation intents; non-navigation signals remain owned by the caller. */
+  dispatchInteractionIntent(intent) {
+    if (intent.type !== "navigate") return this.viewState;
+    const [horizontal = 0, vertical = 0] = intent.delta;
+    if (intent.action === "turn" || intent.action === "rotate") {
+      return this.setViewState({ bearing: (this.viewState.bearing || 0) + horizontal });
+    }
+    if (intent.action === "pitch") {
+      return this.setViewState({ pitch: (this.viewState.pitch || 0) + vertical });
+    }
+    if (intent.action === "zoom") {
+      return this.setViewState({ zoom: (this.viewState.zoom || 0) + vertical });
+    }
+    if (this.placement.type === "first-person") {
+      const position = this.placement.position || [0, 0, 0];
+      this.placement = {
+        ...this.placement,
+        position: [position[0] + horizontal, position[1] + vertical, position[2]]
+      };
+      return this.viewState;
+    }
+    return this.setViewState({
+      longitude: (this.viewState.longitude || 0) + horizontal,
+      latitude: (this.viewState.latitude || 0) + vertical
+    });
+  }
+};
+var WebXRViewManager = class extends WebXRPresentation {
+};
+function resolveMode(mode, frameState) {
+  if (mode === "auto") return frameState?.views?.length ? "immersive-vr" : "mono";
+  if (mode === "immersive-vr" && !frameState?.views?.length) return "stereo-preview";
+  return mode;
+}
+function createDefaultPlacement(view, viewState) {
+  const anchor = [viewState.longitude || 0, viewState.latitude || 0, 0];
+  if (view.constructor.displayName === "WebXRGlobeView") {
+    return { type: "globe", anchor, pose: { position: [0, 1.35, -2.35] }, radius: 0.72 };
+  }
+  if (view.constructor.displayName === "WebXRFirstPersonView") {
+    return { type: "first-person", origin: anchor, position: [0, 0, 0], bearing: 0 };
+  }
+  return {
+    type: "map",
+    anchor,
+    pose: { position: [0, 0.72, -1.8] },
+    metersPerXRUnit: 2500,
+    surface: { type: "unbounded" }
+  };
+}
+function getCameraPosition(matrix) {
+  const position = [0, 0, 0];
+  new Matrix42(matrix).invert().transformAsPoint([0, 0, 0], position);
+  return position;
+}
+function requireViewport(viewport) {
+  if (!viewport) throw new Error("The logical deck.gl view produced an empty viewport");
+  return viewport;
+}
+
+// src/experimental/webxr/picking.ts
+import { Matrix4 as Matrix43 } from "@math.gl/core";
+
+// src/web_mercator_view_adapter.ts
+import { PROJECTION_CONSTANTS as PROJECTION_CONSTANTS2 } from "@tangram.gl/tangram-renderer/core";
+var DECK_TO_TANGRAM_ZOOM_OFFSET = 1;
+var DECK_WORLD_SIZE = 512;
+var TANGRAM_HALF_WORLD_METERS2 = Math.PI * PROJECTION_CONSTANTS2.mercatorRadius;
+var WebMercatorViewAdapter = class _WebMercatorViewAdapter {
+  /**
+   * Checks that a deck viewport provides the public Web Mercator contract used
+   * by TangramLayer.
+   * @param viewport deck.gl viewport.
+   * @returns Validation error, or null when supported.
+   */
+  static validateViewport(viewport) {
+    if (viewport?.isGeospatial === false) {
+      return new Error("a Web Mercator viewport is required");
+    }
+    if (_WebMercatorViewAdapter.validateGeographicAnchor(viewport, "Web Mercator viewport")) {
+      return new Error("a Web Mercator viewport is required");
+    }
+    return null;
+  }
+  /**
+   * Validates the geographic anchor shared by all deck.gl view adapters.
+   * @param viewport deck.gl viewport.
+   * @param viewportName View name used in the error message.
+   * @returns Validation error, or null when the anchor is finite.
+   */
+  static validateGeographicAnchor(viewport, viewportName = "viewport") {
+    if (!Number.isFinite(viewport?.longitude) || !Number.isFinite(viewport?.latitude) || !Number.isFinite(viewport?.zoom)) {
+      return new Error(`${viewportName} requires finite longitude, latitude, and zoom`);
+    }
+    return null;
+  }
+  /**
+   * Converts deck.gl camera matrices to Tangram camera matrices.
+   *
+   * Tangram tile models use absolute EPSG:3857 meters while deck matrices
+   * consume zoom-zero common coordinates. Altitude uses deck's
+   * latitude-dependent distance scale.
+   * @param viewport deck.gl WebMercatorViewport.
+   * @returns Tangram camera matrices and eye position.
+   */
+  static getCameraFrame(viewport) {
+    const distanceScales = typeof viewport.getDistanceScales === "function" ? viewport.getDistanceScales() : viewport.distanceScales;
+    const unitsPerMeter = distanceScales && distanceScales.unitsPerMeter;
+    const viewMatrix = viewport.viewMatrix;
+    const projectionMatrix = viewport.projectionMatrix;
+    if (!viewMatrix || viewMatrix.length !== 16 || !projectionMatrix || projectionMatrix.length !== 16 || !unitsPerMeter || !Number.isFinite(unitsPerMeter[2])) {
+      throw new Error("deck viewport camera matrices and distance scales are required");
+    }
+    const xyScale = DECK_WORLD_SIZE / (TANGRAM_HALF_WORLD_METERS2 * 2);
+    const metersToCommon = new Float64Array(16);
+    metersToCommon[0] = xyScale;
+    metersToCommon[5] = xyScale;
+    metersToCommon[10] = unitsPerMeter[2];
+    metersToCommon[12] = DECK_WORLD_SIZE / 2;
+    metersToCommon[13] = DECK_WORLD_SIZE / 2;
+    metersToCommon[15] = 1;
+    return {
+      view: multiplyMatrices(viewMatrix, metersToCommon),
+      projection: new Float32Array(projectionMatrix),
+      // The view matrix places the camera at the origin in eye coordinates.
+      position: [0, 0, 0]
+    };
+  }
+  /**
+   * Builds Tangram's external-camera frame for a deck.gl MapView.
+   * @param viewport deck.gl WebMercatorViewport.
+   * @param dimensions Render-target size.
+   * @returns Tangram HostFrame legacy shape.
+   */
+  static getFrame(viewport, { width, height }) {
+    const longitude = viewport.longitude;
+    const latitude = viewport.latitude;
+    const zoom = viewport.zoom;
+    if (typeof longitude !== "number" || !Number.isFinite(longitude) || typeof latitude !== "number" || !Number.isFinite(latitude) || typeof zoom !== "number" || !Number.isFinite(zoom)) {
+      throw new Error("a Web Mercator viewport is required");
+    }
+    const pitch = Math.abs(viewport.pitch || 0) * Math.PI / 180;
+    return {
+      viewport: { width, height },
+      view: {
+        longitude,
+        latitude,
+        zoom: zoom + DECK_TO_TANGRAM_ZOOM_OFFSET
+      },
+      projection: { type: "web-mercator" },
+      camera: _WebMercatorViewAdapter.getCameraFrame(viewport),
+      tileBuffer: Math.min(4, Math.ceil(Math.tan(pitch) * (viewport.height || height) / 256))
+    };
+  }
+};
+function multiplyMatrices(left, right) {
+  const result = new Float64Array(16);
+  for (let column = 0; column < 4; column++) {
+    for (let row = 0; row < 4; row++) {
+      let value = 0;
+      for (let index = 0; index < 4; index++) {
+        value += left[index * 4 + row] * right[column * 4 + index];
+      }
+      result[column * 4 + row] = value;
+    }
+  }
+  return result;
+}
+
+// src/experimental/webxr/picking.ts
+function pickXRSurface(options) {
+  const { pointer, placement, frame } = options;
+  const viewState = options.viewState || {
+    longitude: frame?.logicalViewport.longitude,
+    latitude: frame?.logicalViewport.latitude,
+    bearing: frame?.logicalViewport.bearing
+  };
+  let ray;
+  let farPoint;
+  let renderViewId;
+  if ("origin" in pointer) {
+    if (!isFiniteVector(pointer.origin) || !isFiniteVector(pointer.direction) || Math.hypot(...pointer.direction) === 0) return null;
+    const matrix = options.placementMatrix || createXRPlacementMatrix(placement, viewState);
+    if (!isInvertibleMatrix(matrix)) return null;
+    const magnitude = Math.hypot(...pointer.direction);
+    if (!Number.isFinite(magnitude)) return null;
+    ray = transformXRRayToContent({ origin: pointer.origin, direction: [
+      pointer.direction[0] / magnitude,
+      pointer.direction[1] / magnitude,
+      pointer.direction[2] / magnitude
+    ] }, matrix);
+  } else {
+    if (!frame || !Number.isFinite(pointer.x) || !Number.isFinite(pointer.y)) return null;
+    let camera;
+    let viewport;
+    if (pointer.eye === "center") {
+      if (frame.mode === "immersive-vr") return null;
+      viewport = frame.logicalViewport;
+      camera = placement.type === "globe" ? { view: viewport.viewMatrix, projection: new Matrix43().copy(viewport.projectionMatrix).multiplyRight(viewport.viewMatrix) } : WebMercatorViewAdapter.getCameraFrame(viewport);
+    } else {
+      const eye = frame.renderViews.find((view) => view.viewport && containsPixel(getScreenViewport(view, frame), pointer.x, pointer.y) && (!pointer.eye || view.id === `${pointer.eye}-eye` || view.xrView?.eye === pointer.eye));
+      if (!eye?.camera) return null;
+      camera = eye.camera;
+      viewport = getScreenViewport(eye, frame);
+      renderViewId = eye.id;
+    }
+    if (!viewport || !containsPixel(viewport, pointer.x, pointer.y) || !isInvertibleMatrix(camera.projection) || !isInvertibleMatrix(camera.view)) return null;
+    const clipMatrix = new Matrix43().copy(camera.projection);
+    if (placement.type !== "globe") clipMatrix.multiplyRight(camera.view);
+    if (!isInvertibleMatrix(clipMatrix)) return null;
+    const inverse = clipMatrix.invert();
+    const horizontal = 2 * (pointer.x - (viewport.x ?? 0)) / viewport.width - 1;
+    const vertical = 1 - 2 * (pointer.y - (viewport.y ?? 0)) / viewport.height;
+    const nearPoint = unprojectPoint(inverse, horizontal, vertical, -1);
+    farPoint = unprojectPoint(inverse, horizontal, vertical, 1) || void 0;
+    if (!nearPoint || !farPoint) return null;
+    ray = { origin: nearPoint, direction: [
+      farPoint[0] - nearPoint[0],
+      farPoint[1] - nearPoint[1],
+      farPoint[2] - nearPoint[2]
+    ] };
+  }
+  const length = Math.hypot(...ray.direction);
+  if (!isFiniteVector(ray.origin) || !Number.isFinite(length) || length === 0) return null;
+  const direction = [ray.direction[0] / length, ray.direction[1] / length, ray.direction[2] / length];
+  if (options.terrain && options.terrain.projection !== (placement.type === "globe" ? "globe" : "web-mercator")) return null;
+  const terrainHit = options.terrain?.intersectRay({ origin: ray.origin, direction }, farPoint ? length : Infinity);
+  const hit = options.terrain ? terrainHit ? {
+    position: terrainHit.position,
+    coordinate: terrainHit.coordinate,
+    terrain: {
+      triangleIndex: terrainHit.triangleIndex,
+      normal: terrainHit.normal,
+      barycentric: terrainHit.barycentric
+    }
+  } : null : intersectContentSurface({ origin: ray.origin, direction }, placement, viewState);
+  if (!hit || !isFiniteVector(hit.position)) return null;
+  if (!isContentPointWithinMapBounds(hit.position, placement, viewState)) return null;
+  if (farPoint && Math.hypot(
+    hit.position[0] - ray.origin[0],
+    hit.position[1] - ray.origin[1],
+    hit.position[2] - ray.origin[2]
+  ) > length * (1 + 1e-9)) return null;
+  return renderViewId ? { ...hit, renderViewId } : hit;
+}
+function getScreenViewport(view, frame) {
+  const viewport = view.viewport;
+  return view.xrView ? {
+    ...viewport,
+    y: frame.hostFrame.viewport.height - (viewport.y ?? 0) - viewport.height
+  } : viewport;
+}
+function containsPixel(viewport, x, y) {
+  const left = viewport.x ?? 0;
+  const top = viewport.y ?? 0;
+  return Number.isFinite(viewport.width) && Number.isFinite(viewport.height) && x >= left && y >= top && x < left + viewport.width && y < top + viewport.height;
+}
+function isInvertibleMatrix(matrix) {
+  if (matrix.length !== 16 || !Array.from(matrix).every(Number.isFinite)) return false;
+  const determinant = new Matrix43(Array.from(matrix)).determinant();
+  return Number.isFinite(determinant) && determinant !== 0;
+}
+function unprojectPoint(matrix, x, y, z) {
+  const point = matrix.transform([x, y, z, 1]);
+  if (!point.every(Number.isFinite) || point[3] === 0) return null;
+  return [point[0] / point[3], point[1] / point[3], point[2] / point[3]];
+}
+function isFiniteVector(vector) {
+  return vector.length === 3 && vector.every(Number.isFinite);
+}
+
+// src/experimental/webxr/grabbing.ts
+import { Matrix4 as Matrix44, Quaternion } from "@math.gl/core";
+var WebXRSurfaceGrabber = class {
+  grab = null;
+  /** Whether one input currently owns a grab, including paused off-surface movement. */
+  isGrabbing() {
+    return this.grab !== null;
+  }
+  /** End a gesture without rolling back the application's last accepted placement. */
+  reset() {
+    this.grab = null;
+  }
+  /**
+   * Consume grab/hover/release/cancel intents and return a new placement on movement.
+   * Supply the actual rendered placement when starting; subsequent movement uses
+   * that frozen baseline, avoiding feedback as the application moves the object.
+   * Missing input IDs share a single implicit owner. Select-button releases never
+   * terminate a squeeze grab. First-person ground and screen grabs are unsupported.
+   */
+  dispatchInteractionIntent(intent, context) {
+    if (intent.type !== "point") return null;
+    const inputId = intent.inputId ?? "pointer";
+    if (this.grab && this.grab.inputId !== inputId) return null;
+    if (intent.action === "cancel" || intent.action === "release" && intent.button !== "select") {
+      this.reset();
+      return null;
+    }
+    if (!("origin" in intent.pointer)) return null;
+    if (intent.action === "grab" && !this.grab) {
+      this.beginGrab(inputId, intent.pointer, context);
+      return null;
+    }
+    if (intent.action !== "hover" || !this.grab) return null;
+    return this.moveGrab(intent.pointer);
+  }
+  /** Freeze geographic state, pose and the actual room matrix after a valid surface hit. */
+  beginGrab(inputId, pointer, context) {
+    if (context.placement.type === "first-person") return;
+    const hit = pickXRSurface({ ...context, pointer });
+    if (!hit) return;
+    const placement = context.placement;
+    const position = placement.pose?.position ?? [0, 0, 0];
+    const orientation = placement.pose?.orientation ?? [0, 0, 0, 1];
+    const scale = placement.type === "map" ? placement.metersPerXRUnit : placement.radius;
+    if (!position.every(Number.isFinite) || !orientation.every(Number.isFinite) || !(Math.hypot(...orientation) > 0) || !Number.isFinite(scale) || scale <= 0) return;
+    const snapshot = copyPlacement(placement);
+    const viewState = { ...context.viewState ?? {
+      longitude: context.frame?.logicalViewport.longitude,
+      latitude: context.frame?.logicalViewport.latitude
+    } };
+    const matrix = new Matrix44().copy(context.placementMatrix ?? createXRPlacementMatrix(placement, viewState));
+    const normal = normalize([
+      matrix[1] * matrix[6] - matrix[2] * matrix[5],
+      matrix[2] * matrix[4] - matrix[0] * matrix[6],
+      matrix[0] * matrix[5] - matrix[1] * matrix[4]
+    ]);
+    if (!normal || Math.abs(matrix[3]) + Math.abs(matrix[7]) + Math.abs(matrix[11]) > 1e-9 || Math.abs(matrix[15] - 1) > 1e-9) return;
+    this.grab = {
+      inputId,
+      placement: snapshot,
+      context: { ...context, placement: snapshot, viewState, placementMatrix: matrix },
+      matrix,
+      hit: transformPoint2(matrix, hit.position),
+      normal,
+      center: transformPoint2(matrix, [0, 0, 0])
+    };
+  }
+  /** Resolve movement against the start plane or sphere, never the already moved object. */
+  moveGrab(pointer) {
+    const grab = this.grab;
+    if (!grab || !pointer.origin.every(Number.isFinite)) return null;
+    const direction = normalize(pointer.direction);
+    if (!direction) return null;
+    if (grab.placement.type === "map") {
+      const denominator = dot(direction, grab.normal);
+      if (Math.abs(denominator) < 1e-7) return null;
+      const distance = dot(subtract(grab.hit, pointer.origin), grab.normal) / denominator;
+      if (!Number.isFinite(distance) || distance < 0) return null;
+      const hit2 = [
+        pointer.origin[0] + direction[0] * distance,
+        pointer.origin[1] + direction[1] * distance,
+        pointer.origin[2] + direction[2] * distance
+      ];
+      const position = grab.placement.pose?.position ?? [0, 0, 0];
+      const nextPosition = [
+        position[0] + hit2[0] - grab.hit[0],
+        position[1] + hit2[1] - grab.hit[1],
+        position[2] + hit2[2] - grab.hit[2]
+      ];
+      if (!nextPosition.every(Number.isFinite)) return null;
+      const placement2 = copyPlacement(grab.placement);
+      return { ...placement2, pose: {
+        ...placement2.pose,
+        position: nextPosition
+      } };
+    }
+    const hit = pickXRSurface({ ...grab.context, pointer });
+    if (!hit) return null;
+    const start = normalize(subtract(grab.hit, grab.center));
+    const end = normalize(subtract(transformPoint2(grab.matrix, hit.position), grab.center));
+    if (!start || !end) return null;
+    const rotation = new Quaternion().rotationTo([...start], [...end]);
+    const orientation = new Quaternion().copy(grab.placement.pose?.orientation ?? [0, 0, 0, 1]).multiplyLeft(rotation).normalize();
+    const placement = copyPlacement(grab.placement);
+    return { ...placement, pose: {
+      ...placement.pose,
+      orientation: [orientation[0], orientation[1], orientation[2], orientation[3]]
+    } };
+  }
+};
+function copyPlacement(placement) {
+  const position = placement.pose?.position ?? [0, 0, 0];
+  const orientation = placement.pose?.orientation ?? [0, 0, 0, 1];
+  const pose = {
+    position: [position[0], position[1], position[2]],
+    orientation: [orientation[0], orientation[1], orientation[2], orientation[3]]
+  };
+  return placement.type === "map" ? {
+    ...placement,
+    anchor: [...placement.anchor],
+    pose,
+    ...placement.surface ? { surface: { ...placement.surface } } : {}
+  } : { ...placement, anchor: [...placement.anchor], pose };
+}
+function transformPoint2(matrix, point) {
+  const result = matrix.transform([point[0], point[1], point[2], 1]);
+  return [result[0], result[1], result[2]];
+}
+function normalize(vector) {
+  const length = Math.hypot(...vector);
+  return length > 0 && Number.isFinite(length) ? [vector[0] / length, vector[1] / length, vector[2] / length] : null;
+}
+function subtract(first, second) {
+  return [first[0] - second[0], first[1] - second[1], first[2] - second[2]];
+}
+function dot(first, second) {
+  return first[0] * second[0] + first[1] * second[1] + first[2] * second[2];
+}
+
+// src/experimental/webxr/views.ts
+import {
+  _GlobeController as GlobeController,
+  FirstPersonView,
+  FirstPersonController,
+  MapController,
+  MapView,
+  _GlobeView as GlobeView
+} from "@deck.gl/core";
+
+// src/first_person_view_adapter.ts
+import { Matrix4 as Matrix45 } from "@math.gl/core";
+import { calculatePlanarVolumeBounds } from "@tangram.gl/tangram-renderer/core";
+var DECK_WORLD_SIZE2 = 512;
+var HALF_WORLD_METERS = 20037508342789244e-9;
+var TILE_SIZE = 256;
+var MAX_MERCATOR_LATITUDE2 = 85.05112878;
+var DEFAULT_GROUND_EXTENT = 2e4;
+var FirstPersonViewAdapter = class {
+  /** Converts the finite frustum/ground intersection without changing camera matrices. */
+  static getFrame = getFrame;
+};
+function getFrame(viewport, options = {}) {
+  return getFirstPersonFrameForCamera(viewport, WebMercatorViewAdapter.getCameraFrame(viewport), options);
+}
+function getFirstPersonFrameForCamera(viewport, camera, options = {}) {
+  const width = options.width ?? viewport.width;
+  const height = options.height ?? viewport.height;
+  const maxGroundExtent = options.maxGroundExtent ?? DEFAULT_GROUND_EXTENT;
+  if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0) {
+    throw new Error("FirstPersonViewport requires positive width and height");
+  }
+  if (!Number.isFinite(maxGroundExtent) || maxGroundExtent <= 0) {
+    throw new Error("FirstPersonViewport maxGroundExtent must be finite and positive");
+  }
+  const { longitude, latitude } = viewport;
+  const unprojectFlat = viewport.unprojectFlat;
+  if (typeof longitude !== "number" || !Number.isFinite(longitude) || typeof latitude !== "number" || !Number.isFinite(latitude) || typeof unprojectFlat !== "function") {
+    throw new Error("FirstPersonViewport geographic center and ground projection method are required");
+  }
+  const inverseView = new Matrix45().copy(camera.view);
+  if (!Number.isFinite(inverseView.determinant()) || inverseView.determinant() === 0) {
+    throw new Error("FirstPersonViewport camera is singular");
+  }
+  const eye = inverseView.invert().transformAsPoint([0, 0, 0]);
+  if (!eye.every(Number.isFinite)) throw new Error("FirstPersonViewport eye position is invalid");
+  const latitudeScale = Math.cos(Math.max(
+    -MAX_MERCATOR_LATITUDE2,
+    Math.min(MAX_MERCATOR_LATITUDE2, latitude)
+  ) * Math.PI / 180);
+  const extent = maxGroundExtent / latitudeScale;
+  const bounds = calculatePlanarVolumeBounds(camera, options.elevationRange ?? [0, 0], {
+    sw: { x: eye[0] - extent, y: eye[1] - extent },
+    ne: { x: eye[0] + extent, y: eye[1] + extent }
+  });
+  const xyScale = DECK_WORLD_SIZE2 / (HALF_WORLD_METERS * 2);
+  const toGeographic = (x, y) => unprojectFlat.call(viewport, [
+    x * xyScale + DECK_WORLD_SIZE2 / 2,
+    y * xyScale + DECK_WORLD_SIZE2 / 2
+  ]);
+  const center = bounds ? toGeographic(
+    (bounds.sw.x + bounds.ne.x) / 2,
+    (bounds.sw.y + bounds.ne.y) / 2
+  ) : [longitude, latitude];
+  const metersPerPixel = bounds ? Math.max(
+    (bounds.ne.x - bounds.sw.x) / width,
+    (bounds.ne.y - bounds.sw.y) / height
+  ) : extent * 2 / Math.min(width, height);
+  let visibleBounds = null;
+  if (bounds) {
+    const southwest = toGeographic(bounds.sw.x, bounds.sw.y);
+    const northeast = toGeographic(bounds.ne.x, bounds.ne.y);
+    visibleBounds = [southwest[0], southwest[1], northeast[0], northeast[1]];
+  }
+  if (!center.every(Number.isFinite) || !Number.isFinite(metersPerPixel) || metersPerPixel <= 0 || visibleBounds && !visibleBounds.every(Number.isFinite)) {
+    throw new Error("FirstPersonViewport ground footprint is invalid");
+  }
+  return {
+    viewport: { width, height },
+    view: {
+      longitude: center[0],
+      latitude: center[1],
+      altitude: eye[2],
+      zoom: Math.max(0, Math.log2(HALF_WORLD_METERS * 2 / (TILE_SIZE * metersPerPixel)))
+    },
+    projection: { type: "web-mercator", visibleBounds },
+    camera,
+    tileBuffer: 1
+  };
+}
+
+// src/globe_view_adapter.ts
+var DECK_TO_TANGRAM_ZOOM_OFFSET2 = 1;
+var GlobeViewAdapter = class {
+  /** Converts globe common-space matrices and visible geographic bounds. */
+  static getFrame = getFrame2;
+};
+function getFrame2(viewport, options = {}) {
+  if (options.maxElevation !== void 0 && (!Number.isFinite(options.maxElevation) || options.maxElevation < 0)) {
+    throw new Error("GlobeView maxElevation must be a finite non-negative number");
+  }
+  if (!viewport || !Number.isFinite(viewport.width) || !Number.isFinite(viewport.height) || !viewport.viewMatrix || viewport.viewMatrix.length !== 16 || !viewport.projectionMatrix || viewport.projectionMatrix.length !== 16 || !viewport.cameraPosition || viewport.cameraPosition.length !== 3 || !Array.from(viewport.cameraPosition).every(Number.isFinite) || typeof viewport.getBounds !== "function") {
+    throw new Error("deck GlobeViewport matrices, camera position, size, and visible bounds are required");
+  }
+  const visibleBounds = options.visibleBounds ?? viewport.getBounds({ z: 0 });
+  if (!Array.isArray(visibleBounds) || visibleBounds.length !== 4 || visibleBounds.some((value) => !Number.isFinite(value))) {
+    throw new Error("deck GlobeViewport must provide finite geographic bounds");
+  }
+  return {
+    viewport: { width: viewport.width, height: viewport.height },
+    view: {
+      longitude: viewport.longitude,
+      latitude: viewport.latitude,
+      zoom: Math.max(0, viewport.zoom + DECK_TO_TANGRAM_ZOOM_OFFSET2)
+    },
+    projection: {
+      type: "globe",
+      visibleBounds: [visibleBounds[0], visibleBounds[1], visibleBounds[2], visibleBounds[3]],
+      ...options.maxElevation === void 0 ? {} : { maxElevation: options.maxElevation }
+    },
+    camera: {
+      view: new Float64Array(viewport.viewMatrix),
+      projection: new Float32Array(
+        multiplyMatrices2(viewport.projectionMatrix, viewport.viewMatrix)
+      ),
+      position: [viewport.cameraPosition[0], viewport.cameraPosition[1], viewport.cameraPosition[2]]
+    },
+    tileBuffer: 0,
+    globePreloadZoom: options.preloadZoom
+  };
+}
+function multiplyMatrices2(left, right) {
+  const result = new Float64Array(16);
+  for (let column = 0; column < 4; column++) {
+    for (let row = 0; row < 4; row++) {
+      let value = 0;
+      for (let index = 0; index < 4; index++) {
+        value += left[index * 4 + row] * right[column * 4 + index];
+      }
+      result[column * 4 + row] = value;
+    }
+  }
+  return result;
+}
+
+// src/experimental/webxr/views.ts
+var WebXRMapController = class extends MapController {
+  _onMultiPanStart(event) {
+    const multiTouchDrag = this.multiTouchDrag;
+    if (event.pointerType === "trackpad") {
+      this.multiTouchDrag = "pan";
+    }
+    const handled = super._onMultiPanStart(event);
+    this.multiTouchDrag = multiTouchDrag;
+    return handled;
+  }
+};
+var WebXRFirstPersonController = class extends FirstPersonController {
+  _onMultiPanStart(event) {
+    const multiTouchDrag = this.multiTouchDrag;
+    if (event.pointerType === "trackpad") {
+      this.multiTouchDrag = "pan";
+    }
+    const handled = super._onMultiPanStart(event);
+    this.multiTouchDrag = multiTouchDrag;
+    return handled;
+  }
+};
+var WebXRGlobeController = class extends GlobeController {
+  _onMultiPanStart(event) {
+    const multiTouchDrag = this.multiTouchDrag;
+    if (event.pointerType === "trackpad") {
+      this.multiTouchDrag = "pan";
+    }
+    const handled = super._onMultiPanStart(event);
+    this.multiTouchDrag = multiTouchDrag;
+    return handled;
+  }
+};
+var WebXRMapView = class extends MapView {
+  static displayName = "WebXRMapView";
+  makeEyeViewport({ width, height, viewState, eyeOffset = 0 }) {
+    const position = viewState.position || [0, 0, 0];
+    return this.makeViewport({
+      width,
+      height,
+      viewState: { ...viewState, position: [position[0] + eyeOffset, position[1], position[2]] }
+    });
+  }
+  getHostFrame(viewport) {
+    return {
+      view: {
+        longitude: viewport.longitude,
+        latitude: viewport.latitude,
+        zoom: viewport.zoom + 1
+      },
+      projection: { type: "web-mercator" },
+      camera: WebMercatorViewAdapter.getCameraFrame(viewport),
+      tileBuffer: Math.min(
+        4,
+        Math.ceil(
+          Math.tan(Math.abs(viewport.pitch || 0) * Math.PI / 180) * viewport.height / 256
+        )
+      )
+    };
+  }
+  getXRProjectionMatrix({ projectionMatrix }) {
+    return projectionMatrix;
+  }
+};
+var WebXRFirstPersonView = class extends FirstPersonView {
+  static displayName = "WebXRFirstPersonView";
+  /** Configure the logical first-person view and optional ground extent. */
+  constructor(props = {}) {
+    super(props);
+  }
+  makeEyeViewport({ width, height, viewState, eyeOffset = 0 }) {
+    const position = viewState.position || [0, 0, 0];
+    return this.makeViewport({
+      width,
+      height,
+      viewState: { ...viewState, position: [position[0] + eyeOffset, position[1], position[2]] }
+    });
+  }
+  getHostFrame(viewport) {
+    const frame = FirstPersonViewAdapter.getFrame(viewport, {
+      maxGroundExtent: this.props.firstPersonMaxGroundExtent ?? void 0,
+      elevationRange: this.props.firstPersonElevationRange
+    });
+    return {
+      view: frame.view,
+      projection: frame.projection,
+      camera: frame.camera,
+      tileBuffer: frame.tileBuffer
+    };
+  }
+  /** Recomputes ground visibility after stereo or immersive camera transforms. */
+  getHostFrameForCamera(viewport, camera, options = {}) {
+    return getFirstPersonFrameForCamera(viewport, camera, {
+      ...options,
+      maxGroundExtent: this.props.firstPersonMaxGroundExtent ?? void 0,
+      elevationRange: this.props.firstPersonElevationRange
+    });
+  }
+  getXRProjectionMatrix({ projectionMatrix }) {
+    return projectionMatrix;
+  }
+};
+var WebXRGlobeView = class extends GlobeView {
+  static displayName = "WebXRGlobeView";
+  /** Configure a globe view and its optional globally resident loading fallback. */
+  constructor(props = {}) {
+    super(props);
+  }
+  makeEyeViewport({ width, height, viewState, eyeOffset = 0 }) {
+    return this.makeViewport({
+      width,
+      height,
+      viewState: { ...viewState, longitude: viewState.longitude + eyeOffset * 0.06 }
+    });
+  }
+  getHostFrame(viewport) {
+    const frame = GlobeViewAdapter.getFrame(viewport, {
+      maxElevation: this.props.globeMaxElevation ?? void 0,
+      preloadZoom: this.props.globePreloadZoom ?? void 0
+    });
+    return {
+      view: frame.view,
+      projection: frame.projection,
+      camera: frame.camera,
+      tileBuffer: frame.tileBuffer,
+      globePreloadZoom: frame.globePreloadZoom
+    };
+  }
+  getXRProjectionMatrix({ projectionMatrix, viewMatrix }) {
+    return projectionMatrix.clone().multiplyRight(viewMatrix);
+  }
+};
+export {
+  DEFAULT_INTERPUPILLARY_DISTANCE,
+  WebXRFirstPersonController,
+  WebXRFirstPersonView,
+  WebXRGlobeController,
+  WebXRGlobeView,
+  WebXRInputAdapter,
+  WebXRMapController,
+  WebXRMapView,
+  WebXRPresentation,
+  WebXRSurfaceGrabber,
+  WebXRViewManager,
+  createXRPlacementMatrix,
+  createXRPoseMatrix,
+  getXRGlobeVisibleBounds,
+  intersectXRGlobe,
+  intersectXRMap,
+  longitudeLatitudeToMeters,
+  metersToLongitudeLatitude,
+  pickXRSurface,
+  setWebXRSessionWithFallback,
+  transformXRRayToContent,
+  unionGeographicBounds
+};
+//# sourceMappingURL=webxr.js.map