@terraware/web-components 5.0.1 → 5.0.2

package/components/VirtualWalkthrough/VirtualWalkthroughViewer.d.ts

@@ -37,6 +37,17 @@ export interface VirtualWalkthroughViewerProps {
      * `rotation`, `scaleFactor` and `revealRain` — take precedence over anything set here.
      */
     splatModelProps?: Partial<SplatModelProps>;
+    /**
+     * Requests a VR session when this goes from false to true, and when the viewer mounts with it
+     * already true. Never re-requests on its own, so exiting VR leaves the user out. Browsers only
+     * grant an immersive session inside a user gesture, so the caller must raise this from a click.
+     */
+    autoStartVr?: boolean;
+    /**
+     * Called whenever the viewer ends up out of XR: when a session ends, and when one was requested
+     * but couldn't be started, in which case the error says why.
+     */
+    onXrExit?: (error?: Error) => void;
     annotations: AnnotationProps[];
     onSaveAnnotations: (annotations: AnnotationProps[]) => void | Promise<void>;
     editable?: boolean;
@@ -45,6 +56,6 @@ export interface VirtualWalkthroughViewerProps {
     onToggleFullScreen?: () => void;
     maxImagesPerAnnotation?: number;
 }
-declare const VirtualWalkthroughViewer: ({ splatSrc, splatFormat, origin, cameraPosition, sceneBounds, groundPlane: groundPlaneProp, skyColor, groundColor, averageCameraHeight, scaleFactor, splatModelProps, annotations, onSaveAnnotations, editable, showFreeFly, isFullScreen, onToggleFullScreen, maxImagesPerAnnotation, }: VirtualWalkthroughViewerProps) => import("react/jsx-runtime").JSX.Element;
+declare const VirtualWalkthroughViewer: ({ splatSrc, splatFormat, origin, cameraPosition, sceneBounds, groundPlane: groundPlaneProp, skyColor, groundColor, averageCameraHeight, scaleFactor, splatModelProps, autoStartVr, onXrExit, annotations, onSaveAnnotations, editable, showFreeFly, isFullScreen, onToggleFullScreen, maxImagesPerAnnotation, }: VirtualWalkthroughViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default VirtualWalkthroughViewer;
 //# sourceMappingURL=VirtualWalkthroughViewer.d.ts.map

package/components/VirtualWalkthrough/VirtualWalkthroughViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualWalkthroughViewer.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/VirtualWalkthroughViewer.tsx"],"names":[],"mappings":"AAYA,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAO3D,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAS3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAmB5C;;;;GAIG;AACH,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,8CAA8C;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,2FAA2F;IAC3F,WAAW,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAC3C,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB,EAAE,CAAC,WAAW,EAAE,eAAe,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,QAAA,MAAM,wBAAwB,GAAI,0RAmB/B,6BAA6B,4CAgY/B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"VirtualWalkthroughViewer.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/VirtualWalkthroughViewer.tsx"],"names":[],"mappings":"AAYA,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAO3D,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAS3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAmB5C;;;;GAIG;AACH,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,8CAA8C;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,2FAA2F;IAC3F,WAAW,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAC3C;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB,EAAE,CAAC,WAAW,EAAE,eAAe,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,QAAA,MAAM,wBAAwB,GAAI,iTAqB/B,6BAA6B,4CAqa/B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/components/VirtualWalkthrough/VirtualWalkthroughViewer.js

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { useTheme } from '@mui/material';
 import { Entity } from '@playcanvas/react';
 import { Camera, Script } from '@playcanvas/react/components';
@@ -61,6 +61,8 @@ const VirtualWalkthroughViewer = ({
   averageCameraHeight = 0,
   scaleFactor = 1,
   splatModelProps,
+  autoStartVr = false,
+  onXrExit,
   annotations,
   onSaveAnnotations,
   editable = false,
@@ -87,12 +89,46 @@ const VirtualWalkthroughViewer = ({
   const [viewingAnnotation, setViewingAnnotation] = useState(null);
   const [viewingAnnotationIndex, setViewingAnnotationIndex] = useState(-1);
   const [viewedScreenPos, setViewedScreenPos] = useState(null);
+  const reportXrError = useCallback(error => {
+    console.warn(error.message, error);
+    onXrExit?.(error);
+  }, [onXrExit]);
   const {
     isCurrentlyInXr,
     isCurrentlyInVr,
-    isCurrentlyInAr
-  } = useXr();
+    isCurrentlyInAr,
+    isXrAvailable,
+    startXr
+  } = useXr({
+    onError: reportXrError
+  });
   useXrRenderTuning();
+  const autoStartRequested = useRef(false);
+
+  // Edge-triggered so that ending a session doesn't pull the user straight back into one. The ref
+  // is written before the early returns, so lowering the prop re-arms the next rising edge.
+  useEffect(() => {
+    const isRisingEdge = autoStartVr && !autoStartRequested.current;
+    autoStartRequested.current = autoStartVr;
+    if (!isRisingEdge || isCurrentlyInXr) {
+      return;
+    }
+    if (!isXrAvailable('VR')) {
+      reportXrError(new Error('A VR session was requested, but this device reports no immersive VR support'));
+      return;
+    }
+    startXr('VR');
+  }, [autoStartVr, isCurrentlyInXr, isXrAvailable, startXr, reportXrError]);
+  const wasInXr = useRef(false);
+
+  // Edge-detected rather than reported whenever the viewer is out of XR, which would fire on mount
+  // and tell a caller a session had ended before one ever began.
+  useEffect(() => {
+    if (wasInXr.current && !isCurrentlyInXr) {
+      onXrExit?.();
+    }
+    wasInXr.current = isCurrentlyInXr;
+  }, [isCurrentlyInXr, onXrExit]);
   const sceneBoundsRadius = useMemo(() => {
     if (sceneBounds?.m !== undefined) {
       return sceneBounds.m;
@@ -287,7 +323,7 @@ const VirtualWalkthroughViewer = ({
       }), /*#__PURE__*/jsx(XrPointerRay, {}), isCurrentlyInVr && viewingAnnotation && /*#__PURE__*/jsx(VrAnnotationPanel, {
         annotation: viewingAnnotation,
         annotationIndex: viewingAnnotationIndex
-      }, viewingAnnotationIndex), isCurrentlyInXr && /*#__PURE__*/jsx(XrGazeDwell, {
+      }, viewingAnnotationIndex), /*#__PURE__*/jsx(XrGazeDwell, {
         activeIndex: viewingAnnotationIndex
       }), /*#__PURE__*/jsx(Script, {
         script: XrStartPose,
@@ -370,7 +406,8 @@ const VirtualWalkthroughViewer = ({
       onToggleFullScreen: onToggleFullScreen,
       isFreeFly: isFreeFly,
       onToggleFreeFly: handleToggleFreeFly,
-      showFreeFly: showFreeFly
+      showFreeFly: showFreeFly,
+      onError: reportXrError
     }), /*#__PURE__*/jsx(AnnotationPanel, {
       annotation: viewingAnnotation,
       hotspotPosition: viewedScreenPos,

package/components/VirtualWalkthrough/xr-exit-button-mask.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Bakes the exit button's static artwork into a two-channel mask: red covers the backing disc, green
+ * the X glyph. The shader composites the progress sweep between the two, which is what keeps the
+ * glyph legible over the fill.
+ *
+ * The channels have to stay independent, so the glyph is drawn additively rather than over the disc,
+ * and an opaque base goes down first. Uniform full alpha means the mask survives the texture upload
+ * whether or not alpha ends up premultiplied, and antialiased edges keep their coverage.
+ */
+export declare const drawExitButtonMask: (ctx: CanvasRenderingContext2D, size: number) => void;
+//# sourceMappingURL=xr-exit-button-mask.d.ts.map

package/components/VirtualWalkthrough/xr-exit-button-mask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xr-exit-button-mask.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/xr-exit-button-mask.ts"],"names":[],"mappings":"AAOA;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,KAAK,wBAAwB,EAAE,MAAM,MAAM,SA4B7E,CAAC"}

package/components/VirtualWalkthrough/xr-exit-button-mask.js

@@ -0,0 +1,41 @@
+/** Backing disc radius as a fraction of the button's half-size. Matches the shader's pie radius. */
+const DISC_RADIUS = 0.92;
+
+/** Glyph arm reach and stroke width, as fractions of the drawn size. */
+const GLYPH_ARM = 0.24;
+const GLYPH_WIDTH = 0.09;
+
+/**
+ * Bakes the exit button's static artwork into a two-channel mask: red covers the backing disc, green
+ * the X glyph. The shader composites the progress sweep between the two, which is what keeps the
+ * glyph legible over the fill.
+ *
+ * The channels have to stay independent, so the glyph is drawn additively rather than over the disc,
+ * and an opaque base goes down first. Uniform full alpha means the mask survives the texture upload
+ * whether or not alpha ends up premultiplied, and antialiased edges keep their coverage.
+ */
+const drawExitButtonMask = (ctx, size) => {
+  const c = size / 2;
+  ctx.save();
+  ctx.globalCompositeOperation = 'source-over';
+  ctx.fillStyle = '#000000';
+  ctx.fillRect(0, 0, size, size);
+  ctx.globalCompositeOperation = 'lighter';
+  ctx.fillStyle = '#ff0000';
+  ctx.beginPath();
+  ctx.arc(c, c, c * DISC_RADIUS, 0, Math.PI * 2);
+  ctx.fill();
+  const arm = size * GLYPH_ARM;
+  ctx.strokeStyle = '#00ff00';
+  ctx.lineWidth = size * GLYPH_WIDTH;
+  ctx.lineCap = 'round';
+  ctx.beginPath();
+  ctx.moveTo(c - arm, c - arm);
+  ctx.lineTo(c + arm, c + arm);
+  ctx.moveTo(c + arm, c - arm);
+  ctx.lineTo(c - arm, c + arm);
+  ctx.stroke();
+  ctx.restore();
+};
+
+export { drawExitButtonMask };

package/components/VirtualWalkthrough/xr-exit-button.d.ts

@@ -20,9 +20,6 @@ export declare class XrExitButton extends Script {
     private _headRotation;
     private _worldOffset;
     private _faceButtons;
-    private _canvas?;
-    private _context?;
-    private _drawnProgress;
     private _hold;
     private _arming;
     private _isVrActive;
@@ -31,20 +28,10 @@ export declare class XrExitButton extends Script {
     private _onSelect;
     /** True when the ray points at the button's hit sphere. False while the button entity is disabled. */
     rayHitsButton(origin: Vec3, direction: Vec3): boolean;
-    private _createCanvas;
-    private _createTexture;
-    /**
-     * Repaints the button: dark disc, then the hold progress wedge, then the X arms on top so the
-     * glyph stays legible over the fill. The pie is skipped entirely at zero progress so the idle
-     * button doesn't wear the pie's faint track. Returns whether it painted, so callers can tell a
-     * missing context from a successful repaint.
-     */
-    private _drawButton;
-    /** Repaints only when the drawn wedge would visibly move. Only records the paint on success, so a
-     * missing context doesn't fool the dedupe cache into thinking a repaint already happened. */
-    private _setProgress;
+    /** The button's static artwork, painted once. Only the sweep changes per frame, and that lives in
+     * the shader. */
+    private _createMaskTexture;
     private _resetProgress;
-    private _createMesh;
     initialize(): void;
     update(dt: number): void;
     /**

package/components/VirtualWalkthrough/xr-exit-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"xr-exit-button.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/xr-exit-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,MAAM,EAGN,IAAI,EAGL,MAAM,YAAY,CAAC;AAOpB;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,IAAI,EAAE,WAAW,IAAI,EAAE,QAAQ,IAAI,EAAE,QAAQ,MAAM,KAAG,OAUhG,CAAC;AAOF,qBAAa,YAAa,SAAQ,MAAM;IACtC,MAAM,CAAC,UAAU,SAAkB;IAEnC,yGAAyG;IACzG,MAAM,OAA8B;IAEpC,oFAAoF;IACpF,QAAQ,SAAQ;IAEhB,sGAAsG;IACtG,SAAS,SAAQ;IAEjB,OAAO,CAAC,SAAS,CAAC,CAAmB;IACrC,OAAO,CAAC,QAAQ,CAAC,CAAU;IAC3B,OAAO,CAAC,KAAK,CAAC,CAAO;IACrB,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,YAAY,CAAgC;IAEpD,OAAO,CAAC,OAAO,CAAC,CAAoB;IACpC,OAAO,CAAC,QAAQ,CAAC,CAA2B;IAC5C,OAAO,CAAC,cAAc,CAAM;IAC5B,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,WAAW,CAAyE;IAE5F,OAAO,CAAC,UAAU,CAGhB;IAEF,OAAO,CAAC,QAAQ,CASd;IAEF,OAAO,CAAC,SAAS,CAOf;IAEF,sGAAsG;IACtG,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO;IAQrD,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAgBtB;;;;;OAKG;IACH,OAAO,CAAC,WAAW;IAiCnB;iGAC6F;IAC7F,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,WAAW;IAYnB,UAAU;IAgCV,MAAM,CAAC,EAAE,EAAE,MAAM;IAoDjB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAuBlB,OAAO;CAgBR"}
+{"version":3,"file":"xr-exit-button.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/xr-exit-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,MAAM,EAGN,IAAI,EAGL,MAAM,YAAY,CAAC;AASpB;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,IAAI,EAAE,WAAW,IAAI,EAAE,QAAQ,IAAI,EAAE,QAAQ,MAAM,KAAG,OAUhG,CAAC;AAUF,qBAAa,YAAa,SAAQ,MAAM;IACtC,MAAM,CAAC,UAAU,SAAkB;IAEnC,yGAAyG;IACzG,MAAM,OAA8B;IAEpC,oFAAoF;IACpF,QAAQ,SAAQ;IAEhB,sGAAsG;IACtG,SAAS,SAAQ;IAEjB,OAAO,CAAC,SAAS,CAAC,CAAiB;IACnC,OAAO,CAAC,QAAQ,CAAC,CAAU;IAC3B,OAAO,CAAC,KAAK,CAAC,CAAO;IACrB,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,YAAY,CAAgC;IAEpD,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,WAAW,CAAyE;IAE5F,OAAO,CAAC,UAAU,CAGhB;IAEF,OAAO,CAAC,QAAQ,CAMd;IAEF,OAAO,CAAC,SAAS,CAOf;IAEF,sGAAsG;IACtG,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO;IAQrD;qBACiB;IACjB,OAAO,CAAC,kBAAkB;IAyB1B,OAAO,CAAC,cAAc;IAKtB,UAAU;IAwBV,MAAM,CAAC,EAAE,EAAE,MAAM;IAiDjB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAuBlB,OAAO;CAcR"}

package/components/VirtualWalkthrough/xr-exit-button.js

@@ -1,8 +1,10 @@
-import { Script, Vec3, Quat, XRTYPE_VR, Texture, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE, Mesh, StandardMaterial, Color, BLEND_NORMAL, CULLFACE_NONE, MeshInstance, LAYERID_IMMEDIATE } from 'playcanvas';
+import { Script, Vec3, Quat, XRTYPE_VR, Texture, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE, MeshInstance, LAYERID_IMMEDIATE } from 'playcanvas';
 import { ButtonArmingLatch } from './xr-button-arming.js';
 import { INITIAL_HOLD_STATE, advanceHold } from './xr-button-hold.js';
+import { drawExitButtonMask } from './xr-exit-button-mask.js';
 import { FaceButtonPressTracker, secondaryFaceButtonPressed } from './xr-face-buttons.js';
-import { drawProgressPie } from './xr-progress-pie.js';
+import { pieShaderProgress } from './xr-progress-pie.js';
+import { createProgressPieMaterial, progressPieQuadMesh } from './xr-progress-pie-material.js';
 
 /**
  * Boolean ray-sphere hit test. Treats the ray as a half-line (t >= 0) and returns true when it
@@ -20,6 +22,9 @@ const raySphereIntersect = (origin, direction, center, radius) => {
 };
 const TEXTURE_SIZE = 256;
 
+/** Opacity of the button while it is not being aimed at. */
+const IDLE_OPACITY = 0.9;
+
 /** Seconds of continuous B/Y hold required to leave the session. Matches the gaze-dwell threshold. */
 const EXIT_HOLD_SECONDS = 1.25;
 class XrExitButton extends Script {
@@ -38,7 +43,6 @@ class XrExitButton extends Script {
   _headRotation = new Quat();
   _worldOffset = new Vec3();
   _faceButtons = new FaceButtonPressTracker();
-  _drawnProgress = -1;
   _hold = INITIAL_HOLD_STATE;
   _arming = new ButtonArmingLatch();
   _isVrActive = () => this.app.xr?.active === true && this.app.xr?.type === XRTYPE_VR;
@@ -51,10 +55,7 @@ class XrExitButton extends Script {
     this._hovered = false;
     this._resetProgress();
     this.entity.setLocalScale(1, 1, 1);
-    if (this._material) {
-      this._material.opacity = 0.9;
-      this._material.update();
-    }
+    this._material?.setParameter('uOpacity', IDLE_OPACITY);
   };
   _onSelect = inputSource => {
     if (!this.entity.enabled) {
@@ -72,15 +73,19 @@ class XrExitButton extends Script {
     }
     return raySphereIntersect(origin, direction, this.entity.getPosition(), this.hitRadius);
   }
-  _createCanvas() {
+
+  /** The button's static artwork, painted once. Only the sweep changes per frame, and that lives in
+   * the shader. */
+  _createMaskTexture() {
     const canvas = document.createElement('canvas');
     canvas.width = TEXTURE_SIZE;
     canvas.height = TEXTURE_SIZE;
-    return canvas;
-  }
-  _createTexture(canvas) {
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      drawExitButtonMask(ctx, TEXTURE_SIZE);
+    }
     const texture = new Texture(this.app.graphicsDevice, {
-      name: 'xr-exit-button',
+      name: 'xr-exit-button-mask',
       width: TEXTURE_SIZE,
       height: TEXTURE_SIZE,
       addressU: ADDRESS_CLAMP_TO_EDGE,
@@ -92,85 +97,22 @@ class XrExitButton extends Script {
     texture.setSource(canvas);
     return texture;
   }
-
-  /**
-   * Repaints the button: dark disc, then the hold progress wedge, then the X arms on top so the
-   * glyph stays legible over the fill. The pie is skipped entirely at zero progress so the idle
-   * button doesn't wear the pie's faint track. Returns whether it painted, so callers can tell a
-   * missing context from a successful repaint.
-   */
-  _drawButton(progress) {
-    const ctx = this._context;
-    if (!ctx) {
-      return false;
-    }
-    const c = TEXTURE_SIZE / 2;
-    ctx.clearRect(0, 0, TEXTURE_SIZE, TEXTURE_SIZE);
-    ctx.fillStyle = 'rgba(20, 20, 20, 0.75)';
-    ctx.beginPath();
-    ctx.arc(c, c, c * 0.92, 0, Math.PI * 2);
-    ctx.fill();
-    if (progress > 0) {
-      drawProgressPie(ctx, TEXTURE_SIZE, progress);
-    }
-    const arm = TEXTURE_SIZE * 0.24;
-    ctx.strokeStyle = '#ffffff';
-    ctx.lineWidth = TEXTURE_SIZE * 0.09;
-    ctx.lineCap = 'round';
-    ctx.beginPath();
-    ctx.moveTo(c - arm, c - arm);
-    ctx.lineTo(c + arm, c + arm);
-    ctx.moveTo(c + arm, c - arm);
-    ctx.lineTo(c - arm, c + arm);
-    ctx.stroke();
-    this._texture?.upload();
-    return true;
-  }
-
-  /** Repaints only when the drawn wedge would visibly move. Only records the paint on success, so a
-   * missing context doesn't fool the dedupe cache into thinking a repaint already happened. */
-  _setProgress(progress) {
-    if (Math.abs(progress - this._drawnProgress) <= 0.001) {
-      return;
-    }
-    if (this._drawButton(progress)) {
-      this._drawnProgress = progress;
-    }
-  }
   _resetProgress() {
     this._hold = INITIAL_HOLD_STATE;
-    this._drawnProgress = -1;
-    this._setProgress(0);
-  }
-  _createMesh() {
-    const h = this.halfSize;
-    const mesh = new Mesh(this.app.graphicsDevice);
-    mesh.setPositions([-h, -h, 0, h, -h, 0, h, h, 0, -h, h, 0]);
-    mesh.setNormals([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
-    mesh.setUvs(0, [0, 1, 1, 1, 1, 0, 0, 0]);
-    mesh.setIndices([0, 1, 2, 0, 2, 3]);
-    mesh.update();
-    return mesh;
+    this._material?.setParameter('uProgress', 0);
   }
   initialize() {
-    this._canvas = this._createCanvas();
-    this._context = this._canvas.getContext('2d') ?? undefined;
-    this._texture = this._createTexture(this._canvas);
+    this._texture = this._createMaskTexture();
+    this._material = createProgressPieMaterial({
+      uniqueName: 'xr-exit-button',
+      maskMap: this._texture,
+      discColor: [20 / 255, 20 / 255, 20 / 255],
+      discAlpha: 0.75
+    });
+    this._material.setParameter('uOpacity', IDLE_OPACITY);
     this._resetProgress();
-    const material = new StandardMaterial();
-    material.useLighting = false;
-    material.emissive = new Color(1, 1, 1);
-    material.emissiveMap = this._texture;
-    material.opacityMap = this._texture;
-    material.opacityMapChannel = 'a';
-    material.blendType = BLEND_NORMAL;
-    material.depthTest = false;
-    material.depthWrite = false;
-    material.cull = CULLFACE_NONE;
-    material.update();
-    this._material = material;
-    this._mesh = this._createMesh();
-    const meshInstance = new MeshInstance(this._mesh, material);
+    this._mesh = progressPieQuadMesh(this.app.graphicsDevice, this.halfSize);
+    const meshInstance = new MeshInstance(this._mesh, this._material);
 
     // Immediate layer draws after the World layer (where the splats render) so the button is never
     // composited behind them; depthTest:false keeps it on top within the layer.
@@ -211,7 +153,7 @@ class XrExitButton extends Script {
     }
     const hold = advanceHold(this._hold, holdActive, dt, EXIT_HOLD_SECONDS);
     this._hold = hold.state;
-    this._setProgress(hold.progress);
+    this._material?.setParameter('uProgress', pieShaderProgress(hold.progress));
     if (hold.justFired) {
       this.app.xr?.end();
       return;
@@ -220,10 +162,7 @@ class XrExitButton extends Script {
       this._hovered = hovered;
       const scale = hovered ? 1.15 : 1;
       this.entity.setLocalScale(scale, scale, scale);
-      if (this._material) {
-        this._material.opacity = hovered ? 1 : 0.9;
-        this._material.update();
-      }
+      this._material?.setParameter('uOpacity', hovered ? 1 : IDLE_OPACITY);
     }
   }
 
@@ -262,8 +201,6 @@ class XrExitButton extends Script {
     this._mesh = undefined;
     this._material = undefined;
     this._texture = undefined;
-    this._canvas = undefined;
-    this._context = undefined;
   }
 }
 

package/components/VirtualWalkthrough/xr-gaze-dwell.d.ts

@@ -6,25 +6,29 @@ export declare class XrGazeDwell extends Script {
     activeIndex: number;
     private _dwell;
     private _pieEntity?;
-    private _pieCanvas?;
-    private _pieTexture?;
     private _pieMaterial?;
     private _pieMesh?;
-    private _drawnProgress;
+    private _pieMask?;
     private _headPos;
     private _headRot;
     private _viewOffset;
     private _forward;
     private _scratchScale;
     private _isVrActive;
+    /**
+     * A render component hands its mesh instances to a layer only when it flips from disabled to
+     * enabled, and hands over nothing if the layer cannot be resolved yet. The session events are the
+     * points where the layers are known to exist, so the pie flips there: start registers it, and end
+     * restores the transition for the next session.
+     */
+    private _onXrStart;
+    private _onXrEnd;
+    private _setPieEnabled;
     initialize(): void;
-    private _createQuad;
-    /** Redraws the pie fill for the given dwell progress (0..1) onto the texture canvas. */
-    private _drawPie;
-    private _trackHead;
     update(dt: number): void;
-    private _showPie;
-    private _hidePie;
+    private _trackHead;
+    /** Sits the pie on the hotspot, square to the head. */
+    private _placePie;
     destroy(): void;
 }
 //# sourceMappingURL=xr-gaze-dwell.d.ts.map

package/components/VirtualWalkthrough/xr-gaze-dwell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"xr-gaze-dwell.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/xr-gaze-dwell.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,MAAM,EAKP,MAAM,YAAY,CAAC;AAqBpB,qBAAa,WAAY,SAAQ,MAAM;IACrC,MAAM,CAAC,UAAU,SAAiB;IAElC;6FACyF;IACzF,WAAW,SAAM;IAEjB,OAAO,CAAC,MAAM,CAAmC;IAEjD,OAAO,CAAC,UAAU,CAAC,CAAS;IAC5B,OAAO,CAAC,UAAU,CAAC,CAAoB;IACvC,OAAO,CAAC,WAAW,CAAC,CAAU;IAC9B,OAAO,CAAC,YAAY,CAAC,CAAmB;IACxC,OAAO,CAAC,QAAQ,CAAC,CAAO;IACxB,OAAO,CAAC,cAAc,CAAM;IAE5B,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,aAAa,CAAc;IAEnC,OAAO,CAAC,WAAW,CAAyE;IAE5F,UAAU;IAuCV,OAAO,CAAC,WAAW;IAYnB,wFAAwF;IACxF,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,UAAU;IAgBlB,MAAM,CAAC,EAAE,EAAE,MAAM;IAmCjB,OAAO,CAAC,QAAQ;IAmBhB,OAAO,CAAC,QAAQ;IAOhB,OAAO;CAeR"}
+{"version":3,"file":"xr-gaze-dwell.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/xr-gaze-dwell.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,MAAM,EAKP,MAAM,YAAY,CAAC;AAmBpB,qBAAa,WAAY,SAAQ,MAAM;IACrC,MAAM,CAAC,UAAU,SAAiB;IAElC;6FACyF;IACzF,WAAW,SAAM;IAEjB,OAAO,CAAC,MAAM,CAAmC;IAEjD,OAAO,CAAC,UAAU,CAAC,CAAS;IAC5B,OAAO,CAAC,YAAY,CAAC,CAAiB;IACtC,OAAO,CAAC,QAAQ,CAAC,CAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,CAAU;IAE3B,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,aAAa,CAAc;IAEnC,OAAO,CAAC,WAAW,CAAyE;IAE5F;;;;;OAKG;IACH,OAAO,CAAC,UAAU,CAGhB;IAEF,OAAO,CAAC,QAAQ,CAId;IAEF,OAAO,CAAC,cAAc;IAMtB,UAAU;IA4BV,MAAM,CAAC,EAAE,EAAE,MAAM;IAmCjB,OAAO,CAAC,UAAU;IAgBlB,uDAAuD;IACvD,OAAO,CAAC,SAAS;IAcjB,OAAO;CAiBR"}

package/components/VirtualWalkthrough/xr-gaze-dwell.js

@@ -1,8 +1,9 @@
-import { Vec3, Script, Quat, XRTYPE_VR, Texture, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE, StandardMaterial, Color, BLEND_NORMAL, CULLFACE_NONE, MeshInstance, Entity, LAYERID_IMMEDIATE, Mesh } from 'playcanvas';
-import { HOTSPOT_HALF_EXTENT, collectAnnotationHitCandidates } from './xr-annotation-candidates.js';
+import { Vec3, Script, Quat, XRTYPE_VR, MeshInstance, Entity, LAYERID_IMMEDIATE } from 'playcanvas';
+import { collectAnnotationHitCandidates, HOTSPOT_HALF_EXTENT } from './xr-annotation-candidates.js';
 import { nearestAnnotationHit } from './xr-annotation-targeting.js';
 import { INITIAL_DWELL_STATE, advanceDwell } from './xr-gaze-dwell-state.js';
-import { drawProgressPie } from './xr-progress-pie.js';
+import { pieShaderProgress } from './xr-progress-pie.js';
+import { emptyMaskTexture, createProgressPieMaterial, progressPieQuadMesh } from './xr-progress-pie-material.js';
 
 /** Multiplier on the hotspot's world radius for gaze targeting. */
 const GAZE_HIT_RADIUS_PAD = 5;
@@ -12,9 +13,6 @@ const DWELL_SECONDS = 1.25;
 
 /** Progress-pie quad radius as a multiple of the hotspot's rendered half-extent (covers the hotspot). */
 const PIE_RADIUS_SCALE = 1.25;
-
-/** Progress-pie texture resolution. */
-const PIE_TEXTURE_SIZE = 128;
 const LOCAL_FORWARD = new Vec3(0, 0, -1);
 class XrGazeDwell extends Script {
   static scriptName = 'xrGazeDwell';
@@ -23,42 +21,47 @@ class XrGazeDwell extends Script {
    * dwell opens OTHER annotations while one is open (and never re-dwells the open one). */
   activeIndex = -1;
   _dwell = INITIAL_DWELL_STATE;
-  _drawnProgress = -1;
   _headPos = new Vec3();
   _headRot = new Quat();
   _viewOffset = new Vec3();
   _forward = new Vec3();
   _scratchScale = new Vec3();
   _isVrActive = () => this.app.xr?.active === true && this.app.xr?.type === XRTYPE_VR;
+
+  /**
+   * A render component hands its mesh instances to a layer only when it flips from disabled to
+   * enabled, and hands over nothing if the layer cannot be resolved yet. The session events are the
+   * points where the layers are known to exist, so the pie flips there: start registers it, and end
+   * restores the transition for the next session.
+   */
+  _onXrStart = () => {
+    this._dwell = INITIAL_DWELL_STATE;
+    this._setPieEnabled(this._isVrActive());
+  };
+  _onXrEnd = () => {
+    this._dwell = INITIAL_DWELL_STATE;
+    this._pieMaterial?.setParameter('uProgress', 0);
+    this._setPieEnabled(false);
+  };
+  _setPieEnabled(enabled) {
+    if (this._pieEntity) {
+      this._pieEntity.enabled = enabled;
+    }
+  }
   initialize() {
-    this._pieCanvas = document.createElement('canvas');
-    this._pieCanvas.width = PIE_TEXTURE_SIZE;
-    this._pieCanvas.height = PIE_TEXTURE_SIZE;
-    this._pieTexture = new Texture(this.app.graphicsDevice, {
-      name: 'xr-gaze-dwell-pie',
-      width: PIE_TEXTURE_SIZE,
-      height: PIE_TEXTURE_SIZE,
-      addressU: ADDRESS_CLAMP_TO_EDGE,
-      addressV: ADDRESS_CLAMP_TO_EDGE,
-      minFilter: FILTER_LINEAR,
-      magFilter: FILTER_LINEAR,
-      mipmaps: true
+    this._pieMask = emptyMaskTexture(this.app.graphicsDevice);
+    this._pieMaterial = createProgressPieMaterial({
+      uniqueName: 'xr-gaze-dwell-pie',
+      maskMap: this._pieMask
     });
-    this._pieTexture.setSource(this._pieCanvas);
-    const material = new StandardMaterial();
-    material.useLighting = false;
-    material.emissive = new Color(1, 1, 1);
-    material.emissiveMap = this._pieTexture;
-    material.opacityMap = this._pieTexture;
-    material.opacityMapChannel = 'a';
-    material.blendType = BLEND_NORMAL;
-    material.depthTest = false;
-    material.depthWrite = false;
-    material.cull = CULLFACE_NONE;
-    material.update();
-    this._pieMaterial = material;
-    this._pieMesh = this._createQuad();
-    const meshInstance = new MeshInstance(this._pieMesh, material);
+    this._pieMesh = progressPieQuadMesh(this.app.graphicsDevice, HOTSPOT_HALF_EXTENT);
+    const meshInstance = new MeshInstance(this._pieMesh, this._pieMaterial);
+
+    // Never frustum-culled. The quad only takes a position once a sweep starts, and until then sits
+    // at the origin where culling would drop it from the render list - taking the shader compile it
+    // stays enabled for along with it. An always-submitted quad that discards every fragment costs
+    // less than that compile landing mid-gaze.
+    meshInstance.cull = false;
     this._pieEntity = new Entity('xr-gaze-dwell-pie');
     this._pieEntity.addComponent('render', {
       meshInstances: [meshInstance],
@@ -66,49 +69,20 @@ class XrGazeDwell extends Script {
     });
     this._pieEntity.enabled = false;
     this.entity.addChild(this._pieEntity);
-  }
-  _createQuad() {
-    const h = HOTSPOT_HALF_EXTENT;
-    const mesh = new Mesh(this.app.graphicsDevice);
-    mesh.setPositions([-h, -h, 0, h, -h, 0, h, h, 0, -h, h, 0]);
-    mesh.setNormals([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
-    mesh.setUvs(0, [0, 1, 1, 1, 1, 0, 0, 0]);
-    mesh.setIndices([0, 1, 2, 0, 2, 3]);
-    mesh.update();
-    return mesh;
-  }
 
-  /** Redraws the pie fill for the given dwell progress (0..1) onto the texture canvas. */
-  _drawPie(progress) {
-    const ctx = this._pieCanvas?.getContext('2d');
-    if (!ctx) {
-      return;
-    }
-    ctx.clearRect(0, 0, PIE_TEXTURE_SIZE, PIE_TEXTURE_SIZE);
-    drawProgressPie(ctx, PIE_TEXTURE_SIZE, progress);
-    this._pieTexture?.upload();
-  }
-  _trackHead() {
-    const views = this.app.xr?.views?.list;
-    if (!views || views.length === 0) {
-      return false;
-    }
-    this._headPos.set(0, 0, 0);
-    for (const view of views) {
-      view.viewInvOffMat.getTranslation(this._viewOffset);
-      this._headPos.add(this._viewOffset);
-    }
-    this._headPos.mulScalar(1 / views.length);
-    this._headRot.setFromMat4(views[0].viewInvOffMat);
-    return true;
+    // Both orders happen: the walkthrough can mount into a session that has already started (as it
+    // does when VR is entered from outside the canvas), or mount first and wait for one.
+    this._setPieEnabled(this._isVrActive());
+    this.app.xr?.on('start', this._onXrStart);
+    this.app.xr?.on('end', this._onXrEnd);
   }
   update(dt) {
-    if (!this._pieEntity) {
+    if (!this._pieEntity || !this._pieMaterial) {
       return;
     }
     if (!this._isVrActive() || !this._trackHead()) {
       this._dwell = INITIAL_DWELL_STATE;
-      this._hidePie();
+      this._pieMaterial.setParameter('uProgress', 0);
       return;
     }
     const activeName = `annotation-${this.activeIndex}`;
@@ -117,10 +91,10 @@ class XrGazeDwell extends Script {
     const target = nearestAnnotationHit(this._headPos, this._forward, candidates);
     const result = advanceDwell(this._dwell, target, dt, DWELL_SECONDS);
     this._dwell = result.state;
-    if (target !== null && result.progress > 0 && result.progress < 1) {
-      this._showPie(candidates[target].entity, result.progress);
-    } else {
-      this._hidePie();
+    const progress = pieShaderProgress(result.progress);
+    this._pieMaterial.setParameter('uProgress', progress);
+    if (progress > 0 && target !== null) {
+      this._placePie(candidates[target].entity);
     }
     if (result.justOpened && target !== null) {
       const {
@@ -132,30 +106,37 @@ class XrGazeDwell extends Script {
       script.onVrOpenCallback(screen?.x ?? 0, screen?.y ?? 0);
     }
   }
-  _showPie(entity, progress) {
+  _trackHead() {
+    const views = this.app.xr?.views?.list;
+    if (!views || views.length === 0) {
+      return false;
+    }
+    this._headPos.set(0, 0, 0);
+    for (const view of views) {
+      view.viewInvOffMat.getTranslation(this._viewOffset);
+      this._headPos.add(this._viewOffset);
+    }
+    this._headPos.mulScalar(1 / views.length);
+    this._headRot.setFromMat4(views[0].viewInvOffMat);
+    return true;
+  }
+
+  /** Sits the pie on the hotspot, square to the head. */
+  _placePie(entity) {
     if (!this._pieEntity) {
       return;
     }
-    if (Math.abs(progress - this._drawnProgress) > 0.001) {
-      this._drawnProgress = progress;
-      this._drawPie(progress);
-    }
 
     // The unit quad has half-extent HOTSPOT_HALF_EXTENT, so scale it to reach the desired world size.
     entity.getWorldTransform().getScale(this._scratchScale);
     const scale = this._scratchScale.x * PIE_RADIUS_SCALE;
-    this._pieEntity.enabled = true;
     this._pieEntity.setLocalScale(scale, scale, scale);
     this._pieEntity.setPosition(entity.getPosition());
     this._pieEntity.setRotation(this._headRot);
   }
-  _hidePie() {
-    if (this._pieEntity && this._pieEntity.enabled) {
-      this._pieEntity.enabled = false;
-      this._drawnProgress = -1;
-    }
-  }
   destroy() {
+    this.app.xr?.off('start', this._onXrStart);
+    this.app.xr?.off('end', this._onXrEnd);
     if (this._pieEntity) {
       if (this._pieEntity.render) {
         this._pieEntity.render.meshInstances = [];
@@ -165,10 +146,10 @@ class XrGazeDwell extends Script {
     }
     this._pieMesh?.destroy();
     this._pieMaterial?.destroy();
-    this._pieTexture?.destroy();
+    this._pieMask?.destroy();
     this._pieMesh = undefined;
     this._pieMaterial = undefined;
-    this._pieTexture = undefined;
+    this._pieMask = undefined;
   }
 }
 

package/components/VirtualWalkthrough/xr-progress-pie-material.d.ts

@@ -0,0 +1,24 @@
+import { GraphicsDevice, Mesh, ShaderMaterial, Texture } from 'playcanvas';
+/** A camera-facing unit quad with y-down UVs, sized to `halfExtent` in local units. */
+export declare const progressPieQuadMesh: (device: GraphicsDevice, halfExtent: number) => Mesh;
+/**
+ * A single transparent texel, for pies that carry no static artwork of their own.
+ *
+ * The filters are set explicitly because the default minification filter samples a mipmap chain,
+ * which a single-level texture does not have. That combination is incomplete in WebGL, and what a
+ * shader reads from an incomplete texture is not something to rely on.
+ */
+export declare const emptyMaskTexture: (device: GraphicsDevice) => Texture;
+export interface ProgressPieMaterialOptions {
+    uniqueName: string;
+    /** Static artwork baked once: red masks a disc under the sweep, green a glyph over it. */
+    maskMap: Texture;
+    discColor?: [number, number, number];
+    discAlpha?: number;
+}
+/**
+ * Material for a progress pie. Everything that animates rides on the `uProgress` uniform, so a
+ * running sweep costs one uniform write per frame and no texture work at all.
+ */
+export declare const createProgressPieMaterial: ({ uniqueName, maskMap, discColor, discAlpha, }: ProgressPieMaterialOptions) => ShaderMaterial;
+//# sourceMappingURL=xr-progress-pie-material.d.ts.map

package/components/VirtualWalkthrough/xr-progress-pie-material.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xr-progress-pie-material.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/xr-progress-pie-material.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,cAAc,EACd,IAAI,EAIJ,cAAc,EACd,OAAO,EACR,MAAM,YAAY,CAAC;AAoGpB,uFAAuF;AACvF,eAAO,MAAM,mBAAmB,GAAI,QAAQ,cAAc,EAAE,YAAY,MAAM,KAAG,IAUhF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,QAAQ,cAAc,KAAG,OAiBzD,CAAC;AAEF,MAAM,WAAW,0BAA0B;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,yBAAyB,GAAI,gDAKvC,0BAA0B,KAAG,cA0B/B,CAAC"}

package/components/VirtualWalkthrough/xr-progress-pie-material.js

@@ -0,0 +1,174 @@
+import { ShaderMaterial, SEMANTIC_TEXCOORD0, SEMANTIC_POSITION, BLEND_NORMAL, CULLFACE_NONE, Texture, ADDRESS_CLAMP_TO_EDGE, FILTER_NEAREST, PIXELFORMAT_RGBA8, Mesh } from 'playcanvas';
+
+/** Pie radius as a fraction of the quad's half-extent. */
+const PIE_RADIUS = 0.92;
+
+// GLSL only, for the same reason as BoundaryWallScript: @playcanvas/react's Application defaults to
+// deviceTypes [DEVICETYPE_WEBGL2], so WGSL variants would never be compiled here.
+const pieVertexGLSL = /* glsl */`
+    attribute vec3 vertex_position;
+    attribute vec2 aUv0;
+
+    uniform mat4 matrix_model;
+    uniform mat4 matrix_viewProjection;
+
+    varying vec2 uv0;
+
+    void main(void) {
+        uv0 = aUv0;
+        gl_Position = matrix_viewProjection * matrix_model * vec4(vertex_position, 1.0);
+    }
+`;
+
+/**
+ * Draws the progress sweep analytically from `uProgress`, so animating it costs one uniform write
+ * per frame.
+ *
+ * `uMaskMap` carries whatever static artwork sits around the pie, baked once by the caller: red is
+ * a mask for a backing disc drawn under the sweep, green a mask for a glyph drawn over it. Callers
+ * with no such artwork bind a transparent pixel and get the bare pie.
+ */
+const pieFragmentGLSL = /* glsl */`
+    uniform float uProgress;
+    uniform vec3 uTrackColor;
+    uniform float uTrackAlpha;
+    uniform vec3 uWedgeColor;
+    uniform float uWedgeAlpha;
+    uniform vec3 uDiscColor;
+    uniform float uDiscAlpha;
+    uniform vec3 uGlyphColor;
+    uniform float uOpacity;
+    uniform sampler2D uMaskMap;
+
+    varying vec2 uv0;
+
+    const float PI = 3.14159265359;
+    const float TWO_PI = 6.28318530718;
+    const float HALF_PI = 1.57079632679;
+    const float PIE_RADIUS = ${PIE_RADIUS};
+
+    /** Source-over composite of a straight-alpha source onto a straight-alpha destination. */
+    vec4 over(vec4 dst, vec4 src) {
+        float a = src.a + dst.a * (1.0 - src.a);
+        if (a <= 0.0) {
+            return vec4(0.0);
+        }
+
+        return vec4((src.rgb * src.a + dst.rgb * dst.a * (1.0 - src.a)) / a, a);
+    }
+
+    void main(void) {
+        // The quad's UVs run y-down (v = 0 along the top edge), so centring them gives a coordinate
+        // system with +y downward and angles increasing clockwise.
+        vec2 p = uv0 * 2.0 - 1.0;
+        float d = length(p);
+
+        // Derivatives are undefined in non-uniform control flow, so every fwidth runs before the
+        // discard at the end.
+        float radiusFeather = fwidth(d);
+        float insideDisc = 1.0 - smoothstep(PIE_RADIUS - radiusFeather, PIE_RADIUS + radiusFeather, d);
+
+        // Fraction of a full turn, measured clockwise from 12 o'clock.
+        float turn = mod(atan(p.y, p.x) + HALF_PI + TWO_PI, TWO_PI) / TWO_PI;
+
+        // Signed arc-length to the sweep's leading edge, which is smooth either side of that edge and
+        // so antialiases cleanly. It jumps at the 12 o'clock seam, where fwidth would blow up and
+        // wash the edge out to half coverage, so the feather is capped to keep the smoothstep
+        // saturated there instead.
+        float edgeDistance = (turn - uProgress) * TWO_PI * d;
+        float edgeFeather = min(fwidth(edgeDistance), 0.05);
+        float swept = 1.0 - smoothstep(-edgeFeather, edgeFeather, edgeDistance);
+
+        // A pie at zero progress is not started, and should not show even its track.
+        float pie = insideDisc * step(0.0001, uProgress);
+
+        vec4 mask = texture2D(uMaskMap, uv0);
+
+        vec4 color = over(vec4(0.0), vec4(uDiscColor, uDiscAlpha * mask.r));
+        color = over(color, vec4(uTrackColor, uTrackAlpha * pie));
+        color = over(color, vec4(uWedgeColor, uWedgeAlpha * pie * swept));
+        color = over(color, vec4(uGlyphColor, mask.g));
+        color.a *= uOpacity;
+
+        if (color.a <= 0.0) {
+            discard;
+        }
+
+        gl_FragColor = color;
+    }
+`;
+
+/** A camera-facing unit quad with y-down UVs, sized to `halfExtent` in local units. */
+const progressPieQuadMesh = (device, halfExtent) => {
+  const h = halfExtent;
+  const mesh = new Mesh(device);
+  mesh.setPositions([-h, -h, 0, h, -h, 0, h, h, 0, -h, h, 0]);
+  mesh.setNormals([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
+  mesh.setUvs(0, [0, 1, 1, 1, 1, 0, 0, 0]);
+  mesh.setIndices([0, 1, 2, 0, 2, 3]);
+  mesh.update();
+  return mesh;
+};
+
+/**
+ * A single transparent texel, for pies that carry no static artwork of their own.
+ *
+ * The filters are set explicitly because the default minification filter samples a mipmap chain,
+ * which a single-level texture does not have. That combination is incomplete in WebGL, and what a
+ * shader reads from an incomplete texture is not something to rely on.
+ */
+const emptyMaskTexture = device => {
+  const texture = new Texture(device, {
+    name: 'xr-progress-pie-empty-mask',
+    width: 1,
+    height: 1,
+    format: PIXELFORMAT_RGBA8,
+    mipmaps: false,
+    minFilter: FILTER_NEAREST,
+    magFilter: FILTER_NEAREST,
+    addressU: ADDRESS_CLAMP_TO_EDGE,
+    addressV: ADDRESS_CLAMP_TO_EDGE
+  });
+  const pixels = texture.lock();
+  pixels.set([0, 0, 0, 0]);
+  texture.unlock();
+  return texture;
+};
+/**
+ * Material for a progress pie. Everything that animates rides on the `uProgress` uniform, so a
+ * running sweep costs one uniform write per frame and no texture work at all.
+ */
+const createProgressPieMaterial = ({
+  uniqueName,
+  maskMap,
+  discColor = [0.08, 0.08, 0.08],
+  discAlpha = 0
+}) => {
+  const material = new ShaderMaterial({
+    uniqueName,
+    vertexGLSL: pieVertexGLSL,
+    fragmentGLSL: pieFragmentGLSL,
+    attributes: {
+      vertex_position: SEMANTIC_POSITION,
+      aUv0: SEMANTIC_TEXCOORD0
+    }
+  });
+  material.blendType = BLEND_NORMAL;
+  material.cull = CULLFACE_NONE;
+  material.depthTest = false;
+  material.depthWrite = false;
+  material.setParameter('uProgress', 0);
+  material.setParameter('uTrackColor', [1, 1, 1]);
+  material.setParameter('uTrackAlpha', 0.18);
+  material.setParameter('uWedgeColor', [64 / 255, 200 / 255, 1]);
+  material.setParameter('uWedgeAlpha', 0.85);
+  material.setParameter('uDiscColor', discColor);
+  material.setParameter('uDiscAlpha', discAlpha);
+  material.setParameter('uGlyphColor', [1, 1, 1]);
+  material.setParameter('uOpacity', 1);
+  material.setParameter('uMaskMap', maskMap);
+  material.update();
+  return material;
+};
+
+export { createProgressPieMaterial, emptyMaskTexture, progressPieQuadMesh };

package/components/VirtualWalkthrough/xr-progress-pie.d.ts

@@ -1,10 +1,10 @@
 /**
- * Draws a circular progress pie into the `size` x `size` region at the context origin: a faint
- * full-circle track under a wedge that sweeps clockwise as `progress` goes 0 -> 1. A `progress`
- * above 1 simply sweeps a full circle. Neither clears the context nor uploads a texture, so callers
- * can composite it between their own layers. Saves and restores the drawing state it touches and
- * leaves the path clean on exit, so callers can stroke or fill right after without an explicit
- * `beginPath()` of their own.
+ * Progress to hand the pie shader, where 0 draws nothing at all: an untouched target wears no faint
+ * track, and a completed one has already opened its annotation or ended the session.
+ *
+ * Visibility rides on this value so the quad can stay enabled for the whole session. A mesh
+ * instance compiles its shader variant the first time it is drawn, and that compile has to land
+ * somewhere other than the frame a pie first appears.
  */
-export declare const drawProgressPie: (ctx: CanvasRenderingContext2D, size: number, progress: number) => void;
+export declare const pieShaderProgress: (progress: number) => number;
 //# sourceMappingURL=xr-progress-pie.d.ts.map

package/components/VirtualWalkthrough/xr-progress-pie.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"xr-progress-pie.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/xr-progress-pie.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,wBAAwB,EAAE,MAAM,MAAM,EAAE,UAAU,MAAM,SAsB5F,CAAC"}
+{"version":3,"file":"xr-progress-pie.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/xr-progress-pie.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,MAAuD,CAAC"}

package/components/VirtualWalkthrough/xr-progress-pie.js

@@ -1,32 +1,11 @@
-/** Sweep starts at 12 o'clock. */
-const PIE_START_ANGLE = -Math.PI / 2;
-
 /**
- * Draws a circular progress pie into the `size` x `size` region at the context origin: a faint
- * full-circle track under a wedge that sweeps clockwise as `progress` goes 0 -> 1. A `progress`
- * above 1 simply sweeps a full circle. Neither clears the context nor uploads a texture, so callers
- * can composite it between their own layers. Saves and restores the drawing state it touches and
- * leaves the path clean on exit, so callers can stroke or fill right after without an explicit
- * `beginPath()` of their own.
+ * Progress to hand the pie shader, where 0 draws nothing at all: an untouched target wears no faint
+ * track, and a completed one has already opened its annotation or ended the session.
+ *
+ * Visibility rides on this value so the quad can stay enabled for the whole session. A mesh
+ * instance compiles its shader variant the first time it is drawn, and that compile has to land
+ * somewhere other than the frame a pie first appears.
  */
-const drawProgressPie = (ctx, size, progress) => {
-  const c = size / 2;
-  const r = c * 0.92;
-  ctx.save();
-  ctx.beginPath();
-  ctx.arc(c, c, r, 0, Math.PI * 2);
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.18)';
-  ctx.fill();
-  if (progress > 0) {
-    ctx.beginPath();
-    ctx.moveTo(c, c);
-    ctx.arc(c, c, r, PIE_START_ANGLE, PIE_START_ANGLE + progress * Math.PI * 2);
-    ctx.closePath();
-    ctx.fillStyle = 'rgba(64, 200, 255, 0.85)';
-    ctx.fill();
-  }
-  ctx.restore();
-  ctx.beginPath();
-};
+const pieShaderProgress = progress => progress > 0 && progress < 1 ? progress : 0;
 
-export { drawProgressPie };
+export { pieShaderProgress };

package/hooks/useXr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useXr.d.ts","sourceRoot":"","sources":["../../src/hooks/useXr.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjC,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAgBD,eAAO,MAAM,KAAK,GAAI,cAAa,YAAiB;0BA4CT,MAAM;oBAGtC,MAAM;;;;;CA8BhB,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"useXr.d.ts","sourceRoot":"","sources":["../../src/hooks/useXr.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjC,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAgBD,eAAO,MAAM,KAAK,GAAI,cAAa,YAAiB;0BAiDT,MAAM;oBAGtC,MAAM;;;;;CA8BhB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/hooks/useXr.js

@@ -19,10 +19,12 @@ const useXr = ({
   onError
 } = {}) => {
   const app = useApp();
-  const [available, setAvailable] = useState({
-    VR: false,
-    AR: false
-  });
+  // Seeded from the manager rather than defaulting to unavailable, so a caller acting in a mount
+  // effect isn't told VR is unsupported while the effect below is still waiting to run.
+  const [available, setAvailable] = useState(() => ({
+    VR: app.xr?.isAvailable(XRTYPE_VR) ?? false,
+    AR: app.xr?.isAvailable(XRTYPE_AR) ?? false
+  }));
   // `type` is set as soon as a session is requested, so gate on `active` to ignore pending sessions.
   const [currentXrType, setCurrentXrType] = useState(app.xr?.active ? app.xr.type : null);
   useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {