@relu-interactives/spatial-ecs 0.3.17 → 0.3.19

package/dist/index.cjs

@@ -2576,6 +2576,9 @@ var _XRRigComponent = class _XRRigComponent extends Component {
     this.snapTurn = options?.snapTurn ?? true;
     this.snapTurnDegrees = options?.snapTurnDegrees ?? 30;
     this.fallbackEyeHeight = options?.fallbackEyeHeight ?? 1.6;
+    this.teleportArcColor = options?.teleportArcColor ?? "#4da3ff";
+    this.teleportArcInvalidColor = options?.teleportArcInvalidColor ?? "#ff5a5a";
+    this.teleportArcThickness = options?.teleportArcThickness ?? 0.012;
   }
 };
 __name(_XRRigComponent, "XRRigComponent");
@@ -2726,15 +2729,22 @@ function getHandPosePreset(id) {
   return cloneHandPose(preset);
 }
 __name(getHandPosePreset, "getHandPosePreset");
+function cloneTarget(target) {
+  return {
+    ...target,
+    ...target.directions ? { directions: [...target.directions] } : {}
+  };
+}
+__name(cloneTarget, "cloneTarget");
 function cloneHandPose(definition) {
   return {
     ...definition,
     fingers: {
-      thumb: { ...definition.fingers.thumb },
-      index: { ...definition.fingers.index },
-      middle: { ...definition.fingers.middle },
-      ring: { ...definition.fingers.ring },
-      pinky: { ...definition.fingers.pinky }
+      thumb: cloneTarget(definition.fingers.thumb),
+      index: cloneTarget(definition.fingers.index),
+      middle: cloneTarget(definition.fingers.middle),
+      ring: cloneTarget(definition.fingers.ring),
+      pinky: cloneTarget(definition.fingers.pinky)
     },
     pinch: definition.pinch ? { ...definition.pinch } : void 0,
     orientation: definition.orientation ? { ...definition.orientation } : void 0
@@ -2743,22 +2753,27 @@ function cloneHandPose(definition) {
 __name(cloneHandPose, "cloneHandPose");
 function handPoseFromCurls(id, name, curls, options) {
   const tolerance = options?.tolerance ?? NARROW;
-  const target = /* @__PURE__ */ __name((curl) => ({
-    curl: Math.min(1, Math.max(0, curl)),
-    tolerance
-  }), "target");
+  const target = /* @__PURE__ */ __name((finger, curl) => {
+    const directions = options?.directions?.[finger];
+    return {
+      curl: Math.min(1, Math.max(0, curl)),
+      tolerance,
+      ...directions && directions.length > 0 ? { directions } : {}
+    };
+  }, "target");
   return {
     id,
     name,
     fingers: {
-      thumb: target(curls.thumb),
-      index: target(curls.index),
-      middle: target(curls.middle),
-      ring: target(curls.ring),
-      pinky: target(curls.pinky)
+      thumb: target("thumb", curls.thumb),
+      index: target("index", curls.index),
+      middle: target("middle", curls.middle),
+      ring: target("ring", curls.ring),
+      pinky: target("pinky", curls.pinky)
     },
     pinch: options?.pinch,
     orientation: options?.orientation,
+    directionToleranceDegrees: options?.directionToleranceDegrees,
     hand: options?.hand
   };
 }
@@ -2772,6 +2787,13 @@ var DEFAULT_POSE_CURLS = {
   ring: 0,
   pinky: 0
 };
+var DEFAULT_POSE_DIRECTIONS = {
+  thumb: [],
+  index: [],
+  middle: [],
+  ring: [],
+  pinky: []
+};
 function createHandPoseEntry(partial) {
   return {
     id: partial.id,
@@ -2779,6 +2801,14 @@ function createHandPoseEntry(partial) {
     preset: partial.preset ?? null,
     curls: { ...DEFAULT_POSE_CURLS, ...partial.curls },
     tolerance: partial.tolerance ?? 0.25,
+    directions: {
+      thumb: [...partial.directions?.thumb ?? []],
+      index: [...partial.directions?.index ?? []],
+      middle: [...partial.directions?.middle ?? []],
+      ring: [...partial.directions?.ring ?? []],
+      pinky: [...partial.directions?.pinky ?? []]
+    },
+    directionTolerance: partial.directionTolerance ?? 45,
     hand: partial.hand ?? null,
     orientation: partial.orientation ?? null,
     minHoldSeconds: partial.minHoldSeconds ?? 0.15,
@@ -2801,7 +2831,9 @@ function handPoseDefinitionFor(entry, resolvePreset) {
   return handPoseFromCurls(entry.id, entry.name, entry.curls, {
     tolerance: entry.tolerance,
     orientation: entry.orientation ?? void 0,
-    hand: entry.hand ?? void 0
+    hand: entry.hand ?? void 0,
+    directions: entry.directions,
+    directionToleranceDegrees: entry.directionTolerance
   });
 }
 __name(handPoseDefinitionFor, "handPoseDefinitionFor");
@@ -3957,6 +3989,7 @@ __export(components_exports, {
   DEFAULT_MESH_GEOMETRY_PARAMETERS: () => DEFAULT_MESH_GEOMETRY_PARAMETERS,
   DEFAULT_PHYSICS_STATE: () => DEFAULT_PHYSICS_STATE,
   DEFAULT_POSE_CURLS: () => DEFAULT_POSE_CURLS,
+  DEFAULT_POSE_DIRECTIONS: () => DEFAULT_POSE_DIRECTIONS,
   DEFAULT_POSTPROCESSING_STATE: () => DEFAULT_POSTPROCESSING_STATE,
   DEFAULT_RIGIDBODY_STATE: () => DEFAULT_RIGIDBODY_STATE,
   EntityType: () => EntityType,
@@ -4831,6 +4864,15 @@ function restorePostCreateComponents(world, objectManagementSystem, targetEntity
       if (typeof sourceXrRig.snapTurnDegrees === "number") {
         rig.snapTurnDegrees = sourceXrRig.snapTurnDegrees;
       }
+      if (typeof sourceXrRig.teleportArcColor === "string") {
+        rig.teleportArcColor = sourceXrRig.teleportArcColor;
+      }
+      if (typeof sourceXrRig.teleportArcInvalidColor === "string") {
+        rig.teleportArcInvalidColor = sourceXrRig.teleportArcInvalidColor;
+      }
+      if (typeof sourceXrRig.teleportArcThickness === "number") {
+        rig.teleportArcThickness = sourceXrRig.teleportArcThickness;
+      }
       if (typeof sourceXrRig.fallbackEyeHeight === "number") {
         rig.fallbackEyeHeight = sourceXrRig.fallbackEyeHeight;
       }
@@ -12625,24 +12667,33 @@ __name(_XRControllerVisualSystem, "XRControllerVisualSystem");
 var XRControllerVisualSystem = _XRControllerVisualSystem;
 var MARKER_RADIUS = 0.28;
 var ACCENT = new THREE51__namespace.Color("#4da3ff");
-var BLOCKED = new THREE51__namespace.Color("#ff5a5a");
+var SEGMENT_AXIS = new THREE51__namespace.Vector3(0, 1, 0);
+var HEAD_CLEARANCE = 0.25;
 var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
   constructor(locomotionSystem) {
     this.group = new THREE51__namespace.Group();
-    this.arcGeometry = new THREE51__namespace.BufferGeometry();
+    /** Holds the segment chain that draws the arc. */
+    this.arc = new THREE51__namespace.Group();
+    /**
+     * Unit cylinder along +Y, reused by every segment.
+     *
+     * The arc was a `THREE.Line`, which WebGL always renders one pixel wide —
+     * effectively invisible on a headset, and not thickenable at all. A chain of
+     * scaled cylinders gives real thickness while rebuilding no geometry: each
+     * frame only moves, rotates and scales meshes that already exist.
+     */
+    this.segmentGeometry = new THREE51__namespace.CylinderGeometry(1, 1, 1, 6, 1);
+    this.segments = [];
     this.marker = new THREE51__namespace.Group();
     this.attached = false;
+    this.scratchDirection = new THREE51__namespace.Vector3();
+    this.scratchHead = new THREE51__namespace.Vector3();
+    this.validColor = new THREE51__namespace.Color();
+    this.invalidColor = new THREE51__namespace.Color();
     this.locomotionSystem = locomotionSystem;
     this.group.name = "XRTeleportVisuals";
     this.group.userData.ecsPreviewHidden = true;
-    const arcMaterial = new THREE51__namespace.LineBasicMaterial({
-      vertexColors: true,
-      transparent: true,
-      depthTest: false
-    });
-    this.arc = new THREE51__namespace.Line(this.arcGeometry, arcMaterial);
-    this.arc.frustumCulled = false;
-    this.arc.renderOrder = 998;
+    this.arc.name = "XRTeleportArc";
     this.group.add(this.arc);
     this.marker.add(this.createRing(), this.createDot());
     this.marker.renderOrder = 999;
@@ -12654,15 +12705,27 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
       world.getScene().add(this.group);
       this.attached = true;
     }
-    const curve = this.locomotionSystem.getAimCurve();
+    const raw = this.locomotionSystem.getAimCurve();
     const landing = this.locomotionSystem.getLandingPoint();
     const valid = this.locomotionSystem.isAimValid();
+    if (raw.length < 2) {
+      this.setVisible(false);
+      return;
+    }
+    const curve = this.trimNearHead(world, raw);
     if (curve.length < 2) {
       this.setVisible(false);
       return;
     }
-    this.updateArcGeometry(curve, valid ? ACCENT : BLOCKED);
+    const rig = this.resolveRig(world);
+    const thickness = Math.min(
+      0.1,
+      Math.max(1e-3, rig?.teleportArcThickness ?? 0.012)
+    );
+    const tint = valid ? this.validColor.set(rig?.teleportArcColor ?? "#4da3ff") : this.invalidColor.set(rig?.teleportArcInvalidColor ?? "#ff5a5a");
+    this.updateArcGeometry(curve, tint, thickness);
     if (valid && landing) {
+      this.tintMarker(tint);
       this.marker.position.copy(landing);
       this.marker.position.y += 0.01;
       this.marker.visible = true;
@@ -12671,27 +12734,66 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
     }
     this.setVisible(true);
   }
-  updateArcGeometry(curve, tint) {
-    const count = curve.length;
-    const positions = new Float32Array(count * 3);
-    const colors = new Float32Array(count * 3);
-    for (let i = 0; i < count; i += 1) {
-      const point = curve[i];
-      positions[i * 3] = point.x;
-      positions[i * 3 + 1] = point.y;
-      positions[i * 3 + 2] = point.z;
-      const t = count > 1 ? i / (count - 1) : 0;
+  updateArcGeometry(curve, tint, thickness) {
+    const needed = curve.length - 1;
+    this.ensureSegments(needed);
+    const radius = thickness / 2;
+    for (let i = 0; i < this.segments.length; i += 1) {
+      const segment = this.segments[i];
+      if (i >= needed) {
+        segment.visible = false;
+        continue;
+      }
+      const from = curve[i];
+      const to = curve[i + 1];
+      this.scratchDirection.subVectors(to, from);
+      const length = this.scratchDirection.length();
+      if (length < 1e-6) {
+        segment.visible = false;
+        continue;
+      }
+      segment.visible = true;
+      segment.position.copy(from).addScaledVector(this.scratchDirection, 0.5);
+      segment.quaternion.setFromUnitVectors(
+        SEGMENT_AXIS,
+        this.scratchDirection.divideScalar(length)
+      );
+      segment.scale.set(radius, length, radius);
+      const t = needed > 1 ? i / (needed - 1) : 0;
       const fade = 1 - t * 0.75;
-      colors[i * 3] = tint.r * fade;
-      colors[i * 3 + 1] = tint.g * fade;
-      colors[i * 3 + 2] = tint.b * fade;
+      segment.material.color.copy(tint).multiplyScalar(fade);
+    }
+  }
+  /** Grow the segment pool to cover the current arc. */
+  ensureSegments(count) {
+    while (this.segments.length < count) {
+      const material = new THREE51__namespace.MeshBasicMaterial({
+        transparent: true,
+        depthTest: false,
+        depthWrite: false
+      });
+      const mesh = new THREE51__namespace.Mesh(this.segmentGeometry, material);
+      mesh.frustumCulled = false;
+      mesh.renderOrder = 998;
+      mesh.raycast = () => {
+      };
+      this.segments.push(mesh);
+      this.arc.add(mesh);
     }
-    this.arcGeometry.setAttribute(
-      "position",
-      new THREE51__namespace.BufferAttribute(positions, 3)
-    );
-    this.arcGeometry.setAttribute("color", new THREE51__namespace.BufferAttribute(colors, 3));
-    this.arcGeometry.computeBoundingSphere();
+  }
+  /** Drop leading points that sit too close to the viewer's head. */
+  trimNearHead(world, curve) {
+    world.getCamera().getWorldPosition(this.scratchHead);
+    let start = 0;
+    while (start < curve.length - 2 && curve[start].distanceTo(this.scratchHead) < HEAD_CLEARANCE) {
+      start += 1;
+    }
+    return start === 0 ? curve : curve.slice(start);
+  }
+  resolveRig(world) {
+    const entityId = world.query(XRRigComponent)[0];
+    if (typeof entityId !== "number") return null;
+    return world.getComponent(entityId, XRRigComponent) ?? null;
   }
   createRing() {
     const geometry = new THREE51__namespace.RingGeometry(
@@ -12725,6 +12827,15 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
       })
     );
   }
+  /** Recolour the landing marker to match the arc. */
+  tintMarker(color) {
+    this.marker.traverse((child) => {
+      const material = child.material;
+      if (material && !Array.isArray(material)) {
+        material.color?.copy(color);
+      }
+    });
+  }
   setVisible(visible) {
     this.group.visible = visible;
   }
@@ -12951,10 +13062,22 @@ function computeHandShape(joints, handedness) {
     const direction = new THREE51__namespace.Vector3().subVectors(thumbTip, thumbBase);
     if (direction.lengthSq() > 1e-12) thumbDirection = direction.normalize();
   }
+  const fingerDirections = {};
+  for (const finger of XR_FINGERS) {
+    const base = joints[METACARPAL_JOINTS[finger]];
+    const tip = joints[TIP_JOINTS[finger]];
+    if (!base || !tip) {
+      fingerDirections[finger] = null;
+      continue;
+    }
+    const direction = new THREE51__namespace.Vector3().subVectors(tip, base);
+    fingerDirections[finger] = direction.lengthSq() > 1e-12 ? direction.normalize() : null;
+  }
   return {
     handedness,
     fingers: fingers2,
     pinch,
+    fingerDirections,
     spread: {
       thumbIndex: computeSpread(joints, "thumb", "index") ?? 0,
       indexMiddle: computeSpread(joints, "index", "middle") ?? 0,
@@ -12979,6 +13102,7 @@ function scoreAgainst(actual, target, tolerance) {
   return clamp01(1 - (error - tolerance) / MATCH_FALLOFF);
 }
 __name(scoreAgainst, "scoreAgainst");
+var DEFAULT_DIRECTION_TOLERANCE = 45;
 var WORLD_DIRECTIONS = {
   up: new THREE51__namespace.Vector3(0, 1, 0),
   down: new THREE51__namespace.Vector3(0, -1, 0),
@@ -13006,6 +13130,22 @@ function resolveDirection(direction, shape, context) {
   return direction === "toward-head" ? toHead : toHead.multiplyScalar(-1);
 }
 __name(resolveDirection, "resolveDirection");
+function scoreDirections(actual, accepted, shape, toleranceDegrees, context) {
+  if (!actual) return 0;
+  let best = 0;
+  for (const direction of accepted) {
+    const wanted = resolveDirection(direction, shape, context);
+    if (!wanted) continue;
+    const angle = THREE51__namespace.MathUtils.radToDeg(
+      Math.acos(THREE51__namespace.MathUtils.clamp(actual.dot(wanted), -1, 1))
+    );
+    const normalizedError = Math.max(0, angle - toleranceDegrees) / 90;
+    const score = clamp01(1 - normalizedError / MATCH_FALLOFF);
+    if (score > best) best = score;
+  }
+  return best;
+}
+__name(scoreDirections, "scoreDirections");
 function matchHandPose(shape, definition, context) {
   if (definition.hand && definition.hand !== shape.handedness) return NO_MATCH;
   let confidence = 1;
@@ -13035,6 +13175,18 @@ function matchHandPose(shape, definition, context) {
         `${finger} tip`
       );
     }
+    if (target.directions && target.directions.length > 0) {
+      consider(
+        scoreDirections(
+          shape.fingerDirections[finger],
+          target.directions,
+          shape,
+          definition.directionToleranceDegrees ?? DEFAULT_DIRECTION_TOLERANCE,
+          context
+        ),
+        `${finger} direction`
+      );
+    }
   }
   if (definition.pinch) {
     const { finger, target, tolerance } = definition.pinch;
@@ -14783,6 +14935,7 @@ exports.CURLED_COS = CURLED_COS;
 exports.CameraSyncSystem = CameraSyncSystem;
 exports.Component = Component;
 exports.CoreComponents = components_exports;
+exports.DEFAULT_DIRECTION_TOLERANCE = DEFAULT_DIRECTION_TOLERANCE;
 exports.DEFAULT_ENTER_CONFIDENCE = DEFAULT_ENTER_CONFIDENCE;
 exports.DEFAULT_EXIT_CONFIDENCE = DEFAULT_EXIT_CONFIDENCE;
 exports.DEFAULT_LOST_GRACE_SECONDS = DEFAULT_LOST_GRACE_SECONDS;