@terraware/web-components 5.0.1 → 5.0.3

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

@@ -5,26 +5,31 @@ export declare class XrGazeDwell extends Script {
      * dwell opens OTHER annotations while one is open (and never re-dwells the open one). */
     activeIndex: number;
     private _dwell;
+    private _candidates;
     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;IACjD,OAAO,CAAC,WAAW,CAAqC;IAExD,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;IAgCjB,OAAO,CAAC,UAAU;IAgBlB,uDAAuD;IACvD,OAAO,CAAC,SAAS;IAcjB,OAAO;CAiBR"}

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

@@ -1,8 +1,10 @@
-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 { createAnnotationCandidateBuffer } 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';
+import { HOTSPOT_HALF_EXTENT } from './xr-annotation-candidate-buffer.js';
 
 /** Multiplier on the hotspot's world radius for gaze targeting. */
 const GAZE_HIT_RADIUS_PAD = 5;
@@ -12,9 +14,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 +22,48 @@ 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;
+  _candidates = createAnnotationCandidateBuffer();
   _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,61 +71,31 @@ 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}`;
-    const candidates = collectAnnotationHitCandidates(this.app, GAZE_HIT_RADIUS_PAD).filter(candidate => candidate.entity.name !== activeName);
+    const candidates = this._candidates.collect(this.app, GAZE_HIT_RADIUS_PAD, `annotation-${this.activeIndex}`);
     this._headRot.transformVector(LOCAL_FORWARD, this._forward);
     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 +107,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 +147,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"}