brilliantsole 0.0.27 → 0.0.29

package/examples/utils/aframe/bs-vibration.js

@@ -0,0 +1,150 @@
+import * as BS from "../../../build/brilliantsole.module.js";
+
+AFRAME.registerComponent("bs-vibration", {
+  schema: {
+    type: {
+      default: "insole",
+      oneOf: ["glove", "insole"],
+    },
+    side: {
+      default: "right",
+      oneOf: ["left", "right"],
+    },
+  },
+
+  dependencies: ["hand-tracking-controls"],
+
+  init() {
+    this.type = this.data.type;
+    this.side = this.data.side;
+
+    this.hand = this.el.components["hand-tracking-controls"];
+    if (this.hand) {
+      this.side = this.hand.data.hand;
+      this.type = "glove";
+    }
+
+    switch (this.type) {
+      case "glove":
+        this.devicePair = BS.DevicePair.gloves;
+
+        this.el.addEventListener("grabstarted", () =>
+          this.setGrabEnabled(true)
+        );
+        this.el.addEventListener("grabended", () => this.setGrabEnabled(false));
+
+        this.setGrabEnabled = AFRAME.utils.throttleLeadingAndTrailing(
+          this.setGrabEnabled.bind(this),
+          70
+        );
+
+        this.el.sceneEl.addEventListener(
+          "startPetting",
+          this.onStartPetting.bind(this)
+        );
+        this.el.sceneEl.addEventListener(
+          "stopPetting",
+          this.onStopPetting.bind(this)
+        );
+        break;
+      case "insole":
+        this.devicePair = BS.DevicePair.insoles;
+        break;
+    }
+
+    this.el.sceneEl.addEventListener(
+      "bs-trigger-vibration",
+      this.onVibrate.bind(this)
+    );
+  },
+
+  setGrabEnabled: function (enabled) {
+    if (enabled) {
+      this.onGrabStarted();
+    } else {
+      this.onGrabEnded();
+    }
+  },
+
+  onGrabStarted: function (event) {
+    /** @type {BS.VibrationWaveformEffect} */
+    const waveformEffect = "sharpClick100";
+    this.vibrate(waveformEffect);
+  },
+  onGrabEnded: function (event) {
+    /** @type {BS.VibrationWaveformEffect} */
+    const waveformEffect = "shortDoubleSharpTick100";
+    this.vibrate(waveformEffect);
+  },
+
+  onStartPetting: function (event) {
+    const { side } = event.detail;
+    if (side != this.side) {
+      return;
+    }
+    /** @type {BS.VibrationWaveformEffect} */
+    const waveformEffect = "transitionHum40";
+    this.vibrate(waveformEffect, true);
+  },
+  onStopPetting: function (event) {
+    const { side } = event.detail;
+    if (side != this.side) {
+      return;
+    }
+    /** @type {BS.VibrationWaveformEffect} */
+    const waveformEffect = "none";
+    this.vibrate(waveformEffect);
+  },
+
+  onVibrate: function (event) {
+    const { side, type, waveformEffect } = event.detail;
+    if (side != this.side || type != this.type) {
+      return;
+    }
+    this.vibrate(waveformEffect);
+  },
+
+  vibrate: function (waveformEffect, loop = false) {
+    if (this.loopInterval) {
+      clearInterval(this.loopInterval);
+    }
+    if (!this.devicePair) {
+      console.log("devicePair not defined");
+      return;
+    }
+    /** @type {BS.Device?} */
+    const device = this.devicePair[this.side];
+    if (!device?.isConnected) {
+      // console.log(
+      //   `${this.side} ${this.type} not connected`,
+      //   device,
+      //   this.devicePair
+      // );
+      return;
+    }
+
+    if (loop) {
+      const trigger = () => {
+        device.triggerVibration([
+          {
+            type: "waveformEffect",
+            locations: ["rear"],
+            segments: new Array(
+              BS.MaxNumberOfVibrationWaveformEffectSegments
+            ).fill({ effect: waveformEffect }),
+          },
+        ]);
+      };
+      this.loopInterval = setInterval(() => trigger(), 4000);
+      trigger();
+    } else {
+      device.triggerVibration([
+        {
+          type: "waveformEffect",
+          locations: ["rear"],
+          segments: [{ effect: waveformEffect }],
+        },
+      ]);
+    }
+  },
+});

package/examples/utils/aframe/force-pushable.js

@@ -0,0 +1,80 @@
+/**
+ * Force Pushable component.
+ *
+ * Applies behavior to the current entity such that cursor clicks will apply a
+ * strong impulse, pushing the entity away from the viewer.
+ *
+ * Requires: physics
+ */
+AFRAME.registerComponent("force-pushable", {
+  schema: {
+    force: { default: 100 },
+  },
+  init: function () {
+    if (this.el.sceneEl.getAttribute("physics").driver === "ammo") {
+      this.driver = "ammo";
+    } else {
+      this.driver = "cannon";
+    }
+
+    this.pStart = new THREE.Vector3();
+    this.sourceEl = this.el.sceneEl.querySelector("[camera]");
+
+    if (this.driver === "cannon") {
+      this.el.addEventListener("click", this.forcePushCannon.bind(this));
+    } else {
+      this.el.addEventListener("click", this.forcePushAmmo.bind(this));
+
+      this.force = new THREE.Vector3();
+      this.pos = new THREE.Vector3();
+
+      this.el.addEventListener("body-loaded", (e) => {
+        this.impulseBtVector = new Ammo.btVector3();
+        this.posBtVector = new Ammo.btVector3();
+      });
+    }
+  },
+
+  forcePushCannon: function () {
+    var force,
+      el = this.el,
+      pStart = this.pStart.copy(this.sourceEl.getAttribute("position"));
+
+    // Compute direction of force, normalize, then scale.
+    force = el.body.position.vsub(pStart);
+    force.normalize();
+    force.scale(this.data.force, force);
+
+    if (window.force) {
+      force = window.force;
+    }
+
+    el.body.applyImpulse(force, el.body.position);
+  },
+
+  forcePushAmmo: function (e) {
+    if (!this.impulseBtVector) return;
+
+    const el = this.el;
+    const force = this.force;
+    const impulseBt = this.impulseBtVector;
+    const pusher = e.detail.cursorEl.object3D;
+    force.copy(pusher.position);
+    pusher.localToWorld(force);
+    force.copy(el.object3D.position.sub(force));
+    force.normalize();
+
+    force.multiplyScalar(this.data.force);
+    impulseBt.setValue(force.x, force.y, force.z);
+
+    // use data from intersection to determine point at which to apply impulse.
+    const pos = this.pos;
+    const posBt = this.posBtVector;
+    pos.copy(e.detail.intersection.point);
+    el.object3D.worldToLocal(pos);
+    posBt.setValue(pos.x, pos.y, pos.z);
+
+    el.body.activate();
+    el.body.applyImpulse(impulseBt, posBt);
+  },
+});

package/examples/utils/aframe/grabbable-anchor.js

@@ -0,0 +1,46 @@
+AFRAME.registerComponent("grabbable-anchor", {
+  schema: {},
+  dependencies: ["anchored", "grabbable"],
+
+  init: function () {
+    this.el.addEventListener("grabstarted", () => {
+      this.el.removeAttribute("anchored");
+    });
+
+    this.el.addEventListener("grabended", () => {
+      this.el.setAttribute("anchored", "persistent: true;");
+      this.shouldCreateAnchor = true;
+    });
+  },
+
+  deleteAnchor: async function () {
+    this.isDeletingAnchor = true;
+    const uuid = localStorage.getItem(this.el.id);
+    if (uuid) {
+      const frame = this.el.sceneEl.renderer.xr.getFrame();
+      console.log("removing persistant anchor");
+      try {
+        await frame.session.deletePersistentAnchor(uuid);
+      } catch (e) {
+        console.log(e);
+      }
+      localStorage.removeItem(this.el.id);
+    }
+    this.isDeletingAnchor = false;
+  },
+
+  tick: function () {
+    if (this.shouldCreateAnchor && this.el.components.anchored?.createAnchor) {
+      this.deleteAnchor();
+      if (this.isDeletingAnchor) {
+        return;
+      }
+      this.shouldCreateAnchor = false;
+      const position = new THREE.Vector3();
+      this.el.object3D.getWorldPosition(position);
+      const quaternion = new THREE.Quaternion();
+      this.el.object3D.getWorldQuaternion(quaternion);
+      this.el.components.anchored.createAnchor(position, quaternion);
+    }
+  },
+});

package/examples/utils/aframe/grabbable-listener.js

@@ -0,0 +1,31 @@
+AFRAME.registerSystem("grabbable-listener", {
+  schema: {},
+
+  init: function () {
+    this.allGrabControls = Array.from(
+      document.querySelectorAll("[hand-tracking-grab-controls]")
+    );
+    this.allGrabControls.forEach((grabControls) => {
+      grabControls.addEventListener("grabstarted", (event) => {
+        if (!event.detail?.grabbedEl) {
+          return;
+        }
+        const { grabbedEl } = event.detail;
+        grabbedEl.emit(event.type, {
+          hand: event.target.components["hand-tracking-controls"].data.hand,
+          grab: event.target.components["hand-tracking-grab-controls"],
+        });
+      });
+      grabControls.addEventListener("grabended", (event) => {
+        if (!event.detail?.grabbedEl) {
+          return;
+        }
+        const { grabbedEl } = event.detail;
+        grabbedEl.emit(event.type, {
+          hand: event.target.components["hand-tracking-controls"].data.hand,
+          grab: event.target.components["hand-tracking-grab-controls"],
+        });
+      });
+    });
+  },
+});

package/examples/utils/aframe/grabbable-physics-body.js

@@ -0,0 +1,190 @@
+AFRAME.registerComponent("grabbable-physics-body", {
+  dependencies: ["grabbable"],
+
+  schema: {
+    type: {
+      default: "static",
+      oneOf: ["static", "dynamic"],
+    },
+    staticBody: { default: "" },
+    dynamicBody: { default: "" },
+    enableAngularVelocity: { default: true },
+  },
+
+  init: function () {
+    this.velocityScalar = 1.5;
+    this.isGrabbed = false;
+    this.positionHistory = [];
+    this.velocity = new THREE.Vector3();
+
+    this.rotationHistory = [];
+    this.angularVelocityScalar = 1.0;
+    this.angularVelocity = new THREE.Vector3();
+
+    this.el.addEventListener("body-loaded", this.onBodyLoaded.bind(this));
+
+    this.el.addEventListener("grabstarted", () => {
+      this.grabStartTime = Date.now();
+      this.isGrabbed = true;
+
+      this.positionHistory = [];
+      this.velocity.set(0, 0, 0);
+
+      this.angularVelocity.set(0, 0, 0);
+      this.rotationHistory = [];
+
+      // console.log("removing physics");
+      this.el.removeAttribute("static-body");
+      this.el.removeAttribute("dynamic-body");
+    });
+
+    this.el.addEventListener("grabended", () => {
+      this.isGrabbed = false;
+      const now = Date.now();
+
+      // Compute velocity from position history
+      const history = this.positionHistory;
+      if (history.length >= 2) {
+        const first = history[0];
+        const last = history[history.length - 1];
+        const dt = (last.time - first.time) / 1000;
+        if (dt > 0) {
+          this.velocity.copy(last.pos).sub(first.pos).divideScalar(dt);
+        }
+      }
+
+      // Compute angular velocity
+      const rotHistory = this.rotationHistory;
+      if (rotHistory.length >= 2) {
+        const first = rotHistory[0];
+        const last = rotHistory[rotHistory.length - 1];
+        const dt = (last.time - first.time) / 1000;
+
+        this.angularVelocity = this.getAngularVelocityFromQuaternions(
+          first.rot,
+          last.rot,
+          dt
+        );
+      }
+
+      if (now - this.grabStartTime < 10) {
+        this.velocity.set(0, 0, 0);
+        this.angularVelocity.set(0, 0, 0);
+      }
+
+      this.el.removeAttribute("dynamic-body");
+      this.el.removeAttribute("static-body");
+      this.el.removeAttribute("shape__main");
+
+      // console.log("adding physics", this.data.type);
+      // Re-add physics and apply velocity
+      if (this.data.type === "static") {
+        this.el.setAttribute("static-body", this.data.staticBody);
+        this.el.setAttribute(
+          "shape__main",
+          `shape: box;
+          halfExtents: 0.1 0.091 0.09;
+          offset: 0 0 0;`
+        );
+      } else {
+        this.shouldSetVelocity = true;
+        //console.log("setting dynamic body", this.data.dynamicBody);
+        //this.el.setAttribute("dynamic-body", this.data.dynamicBody);
+        const shapeMain = this.el.shapeMain;
+        if (shapeMain) {
+          this.el.setAttribute("dynamic-body", "shape: none;");
+          // console.log("shape__main", shapeMain);
+          //this.el.setAttribute("shape__main", shapeMain);
+          // should wait for 'goomba' component to load
+          this.el.setAttribute("shape__main", shapeMain);
+        } else {
+          this.el.setAttribute("dynamic-body", "");
+        }
+      }
+    });
+  },
+
+  onBodyLoaded: function () {
+    if (!this.shouldSetVelocity) {
+      return;
+    }
+    // console.log("grabbable physics onBodyLoaded");
+    this.shouldSetVelocity = false;
+    const body = this.el.body;
+    if (body) {
+      body.wakeUp();
+      setTimeout(() => {
+        body.wakeUp();
+        // console.log("setting velocity", this.velocity);
+        body.velocity.set(
+          this.velocity.x * this.velocityScalar,
+          this.velocity.y * this.velocityScalar,
+          this.velocity.z * this.velocityScalar
+        );
+
+        if (this.data.enableAngularVelocity) {
+          // console.log("setting angularVelocity", this.angularVelocity);
+          body.angularVelocity.set(
+            this.angularVelocity.x * this.angularVelocityScalar,
+            this.angularVelocity.y * this.angularVelocityScalar,
+            this.angularVelocity.z * this.angularVelocityScalar
+          );
+        }
+
+        this.el.emit("toss", {
+          velocity: body.velocity.clone(),
+          angularVelocity: body.angularVelocity.clone(),
+        });
+      }, 1);
+    } else {
+      console.error("body not found");
+    }
+  },
+
+  getAngularVelocityFromQuaternions: function (q1, q2, deltaTime) {
+    const invQ1 = q1.clone().invert();
+    const deltaQ = q2.clone().multiply(invQ1);
+
+    // Convert delta quaternion to axis-angle
+    const axis = new THREE.Vector3();
+    let angle = 2 * Math.acos(deltaQ.w);
+
+    if (angle > Math.PI) {
+      angle -= 2 * Math.PI;
+    }
+
+    const s = Math.sqrt(1 - deltaQ.w * deltaQ.w);
+    if (s < 0.001) {
+      axis.set(1, 0, 0); // arbitrary
+    } else {
+      axis.set(deltaQ.x / s, deltaQ.y / s, deltaQ.z / s);
+    }
+
+    // Angular velocity = axis * angle / deltaTime
+    const angularVelocity = axis.multiplyScalar(angle / deltaTime);
+
+    return angularVelocity;
+  },
+
+  tick: function (time, delta) {
+    if (!this.isGrabbed) return;
+
+    // Track recent positions (with timestamp)
+    const pos = new THREE.Vector3();
+    this.el.object3D.getWorldPosition(pos);
+    this.positionHistory.push({ pos, time });
+
+    // Keep only recent entries (e.g. last 100ms or 10 positions)
+    while (this.positionHistory.length > 10) {
+      this.positionHistory.shift();
+    }
+
+    const rot = new THREE.Quaternion();
+    this.el.object3D.getWorldQuaternion(rot);
+    this.rotationHistory.push({ rot, time });
+
+    while (this.rotationHistory.length > 10) {
+      this.rotationHistory.shift();
+    }
+  },
+});

package/examples/utils/aframe/grow-shrink.js

@@ -0,0 +1,25 @@
+AFRAME.registerComponent("grow-shrink", {
+  schema: {
+    duration: { type: "number", default: 200 }, // ms
+    targetScale: { type: "vec3", default: { x: 1, y: 1, z: 1 } },
+  },
+
+  init() {
+    this.el.addEventListener("grow", () => {
+      this.animateScale(this.data.targetScale, undefined, "easeOutBack");
+    });
+    this.el.addEventListener("shrink", () => {
+      this.animateScale({ x: 0, y: 0, z: 0 });
+    });
+  },
+
+  animateScale(to, duration, easing = "easeInOutQuad") {
+    this.el.removeAttribute("animation__scale"); // clear existing animation if any
+    this.el.setAttribute("animation__scale", {
+      property: "scale",
+      to: `${to.x} ${to.y} ${to.z}`,
+      dur: duration || this.data.duration,
+      easing,
+    });
+  },
+});

package/examples/utils/aframe/hand-punch.js

@@ -0,0 +1,119 @@
+import * as BS from "../../../build/brilliantsole.module.js";
+
+AFRAME.registerComponent("hand-punch", {
+  schema: {
+    punchable: { default: ".punchable" },
+    velocityThreshold: { default: 1.2 },
+    velocityScalar: { default: 1 },
+    punchTimeout: { default: 50 },
+  },
+
+  dependencies: [
+    "hand-tracking-controls",
+    "hand-tracking-grab-controls",
+    "obb-collider",
+  ],
+
+  init() {
+    this.hand = this.el.components["hand-tracking-controls"];
+    this.side = this.hand.data.hand;
+
+    this.lastTimePunched = 0;
+    this.positionHistory = [];
+
+    if (true) {
+      this.collider = document.createElement("a-box");
+      this.collider.setAttribute("visible", "false");
+
+      let trackedObject3DVariable;
+      if (this.side === "right") {
+        trackedObject3DVariable =
+          "parentEl.components.hand-tracking-controls.bones.11";
+      } else {
+        trackedObject3DVariable =
+          "parentEl.components.hand-tracking-controls.bones.13";
+      }
+
+      this.collider.addEventListener("loaded", () => {
+        this.collider.setAttribute("obb-collider", {
+          trackedObject3D: trackedObject3DVariable,
+          size: 0.12,
+        });
+      });
+
+      this.el.appendChild(this.collider);
+    } else {
+      this.collider = this.el;
+    }
+    this.onCollisionStarted = this.onCollisionStarted.bind(this);
+    this.onCollisionEnded = this.onCollisionEnded.bind(this);
+    this.collider.addEventListener(
+      "obbcollisionstarted",
+      this.onCollisionStarted
+    );
+    this.collider.addEventListener("obbcollisionended", this.onCollisionEnded);
+  },
+
+  onCollisionStarted: function (event) {
+    // console.log(this, event);
+    const now = Date.now();
+    if (now - this.lastTimePunched < this.data.punchTimeout) {
+      //return;
+    }
+    this.lastTimePunched = now;
+    const { withEl, trackedObject3D } = event.detail;
+    if (!trackedObject3D) {
+      return;
+    }
+    const position = trackedObject3D.position.clone();
+    if (withEl.classList.contains("punchable")) {
+      // Compute velocity from position history
+      const velocity = new THREE.Vector3();
+      const history = this.positionHistory;
+      if (history.length >= 2) {
+        const first = history[0];
+        const last = history[history.length - 1];
+        const dt = (last.time - first.time) / 1000;
+        if (dt > 0) {
+          velocity.copy(last.pos).sub(first.pos).divideScalar(dt);
+        }
+      }
+
+      velocity.multiplyScalar(this.data.velocityScalar);
+
+      const length = velocity.length();
+      if (length < this.data.velocityThreshold) {
+        return;
+      }
+
+      withEl.emit("punch", { velocity, position });
+
+      /** @type {BS.VibrationWaveformEffect} */
+      let waveformEffect = "strongClick100";
+      this.el.sceneEl.emit("bs-trigger-vibration", {
+        side: this.side,
+        type: "glove",
+        waveformEffect,
+      });
+    }
+  },
+
+  onCollisionEnded: function () {},
+
+  tick: function (time, delta) {
+    const object = this.collider.object3D;
+    if (!object) {
+      return;
+    }
+    // Track recent positions (with timestamp)
+
+    const pos = new THREE.Vector3();
+    object.getWorldPosition(pos);
+    this.positionHistory.push({ pos, time });
+
+    // Keep only recent entries (e.g. last 100ms or 10 positions)
+    while (this.positionHistory.length > 10) {
+      this.positionHistory.shift();
+    }
+  },
+});