Skip to main content

Experimental WebXR presentation

@vis.gl/tangram-layers/experimental/webxr is a tree-shakable, opt-in entry point. Importing the normal @vis.gl/tangram-layers entry does not include WebXR, controller, or placement code.

import {
  WebXRMapView,
  WebXRPresentation,
  WebXRInputAdapter
} from '@vis.gl/tangram-layers/experimental/webxr';

Presentation model​

WebXRPresentation owns one logical deck.gl view and view state. It can expand that view into mono, stereo-preview, immersive-vr, or auto render views. Both stereo eyes share the same logical camera. Each stereo half has a deck.gl controller sized to that half, so mouse, touch, keyboard, and gesture input update one shared view state.

Desktop stereo uses parallel cameras with off-axis projections and a default 64 mm eye separation. The geographic anchor is the convergence point. Map and globe placements determine the physical scale of the eye separation; FirstPersonView uses one geographic meter per XR meter. Call updateTransitions() once per animation frame to advance controller zoom and inertia. attachController registers deck.gl-compatible mouse and touch gesture recognizers, so drag and double-click input work in both Mono and Stereo Preview.

Pass CSS pixel dimensions to createFrame and updateController. Scale the returned viewport rectangles to drawing-buffer pixels when setting GPU render-pass viewports and scissors.

The presentation returns a matching Tangram HostFrame for each frame. Immersive cameras compose the XR eye matrices and the geospatial placement as:

xrProjection × xrView × placement × projectedPosition

The renderer stays independent from deck.gl and WebXR. It only consumes the resulting host frame.

Placements​

  • XRMapPlacement places a Web Mercator map on a bounded tabletop or unbounded plane. Its scale is expressed as geographic meters per physical XR meter.
  • XRGlobePlacement places a globe with an explicit physical radius and geographic orientation.
  • XRFirstPersonPlacement maps one XR meter to one geographic meter in a local east-north-up frame.

Planar placements compensate for Web Mercator's latitude-dependent scale, while altitude remains in physical meters. Globe placements face their geographic anchor toward the room's positive Z axis, with north toward positive Y.

createXRPlacementMatrix, intersectXRMap, and intersectXRGlobe are exported for applications that need custom placement or spatial picking.

Input​

WebXRInputAdapter translates luma.gl controller snapshots into XRInteractionIntent values for navigation, spatial pointers, selection, grabbing, and application signals. WebXRPresentation accepts those intents without placing WebXR state in HostFrame.

The Thor gestures website example is intentionally example-local. It maps webcam and MediaPipe navigation into the same logical deck.gl controller, but it is not native WebXR hand tracking and does not add Thor, React, or MediaPipe to the package entry.