npm - mudra-skills - Versions diffs - 1.0.0 - Mend

mudra-skills 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/skills/mudra-xr/assets/demos/measure.html ADDED Viewed

@@ -0,0 +1,247 @@
+<!doctype html>
+<!-- reference: demos/measure -->
+<html lang="en">
+  <head>
+    <title>Measure</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+<link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
+          "troika-three-text": "https://cdn.jsdelivr.net/gh/protectwise/troika@028b81cf308f0f22e5aa8e78196be56ec1997af5/packages/troika-three-text/src/index.js",
+          "troika-three-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-three-utils/src/index.js",
+          "troika-worker-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-worker-utils/src/index.js",
+          "bidi-js": "https://esm.sh/bidi-js@%5E1.0.2?target=es2022",
+          "webgl-sdf-generator": "https://esm.sh/webgl-sdf-generator@1.1.1/es2022/webgl-sdf-generator.mjs",
+          "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
+          "lit/": "https://esm.run/lit@3/",
+          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/xrblocks.js",
+          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/addons/"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <script type="module">
+import 'xrblocks/addons/simulator/SimulatorAddons.js';
+import * as THREE from 'three';
+import {FontLoader} from 'three/addons/loaders/FontLoader.js';
+import * as xb from 'xrblocks';
+// --- MeasuringTape inlined ---
+const fontLoader = new FontLoader();
+const DEFAULT_FONT_PATH =
+  'https://cdn.jsdelivr.net/gh/mrdoob/three.js@r180/examples/fonts/droid/droid_sans_regular.typeface.json';
+const upVector = new THREE.Vector3(0.0, 1.0, 0.0);
+const backwardsVector = new THREE.Vector3(0.0, 0.0, 1.0);
+class MeasuringTape extends THREE.Object3D {
+  ignoreReticleRaycast = true;
+  constructor(
+    firstPoint,
+    secondPoint,
+    radius = 0.05,
+    visualColor = 0xffffff,
+    textColor = 0xff0000,
+    fontPath = DEFAULT_FONT_PATH
+  ) {
+    super();
+    this.firstPoint = firstPoint.clone();
+    this.secondPoint = secondPoint.clone();
+    this.radius = radius;
+    this.cylinder = new THREE.Mesh(
+      new THREE.CylinderGeometry(radius, radius),
+      new THREE.MeshStandardMaterial({
+        color: visualColor,
+        side: THREE.FrontSide,
+      })
+    );
+    this.visual = new THREE.Object3D();
+    this.visual.add(this.cylinder);
+    this.add(this.visual);
+    this.updateVisual();
+    this.textGeometry = null;
+    this.textMaterial = new THREE.MeshBasicMaterial({
+      color: textColor,
+      side: THREE.DoubleSide,
+    });
+    this.textMesh = null;
+    this.camera = null;
+    fontLoader.load(fontPath, (font) => {
+      this.textFont = font;
+      this.updateText();
+    });
+  }
+  getLengthText() {
+    const length = this.secondPoint.distanceTo(this.firstPoint);
+    return `${length.toFixed(2)} m`;
+  }
+  updateText() {
+    if (!this.textFont) {
+      return;
+    }
+    if (this.textGeometry) {
+      this.textGeometry.dispose();
+    }
+    const textShapes = this.textFont.generateShapes(this.getLengthText());
+    this.textGeometry = new THREE.ShapeGeometry(textShapes);
+    this.textGeometry.computeBoundingBox();
+    const tempVector = new THREE.Vector3();
+    this.textGeometry.boundingBox.getCenter(tempVector);
+    this.textGeometry.translate(-tempVector.x, -tempVector.y, -tempVector.z);
+    if (this.textMesh) {
+      this.remove(this.textMesh);
+    }
+    this.textMesh = new THREE.Mesh(this.textGeometry, this.textMaterial);
+    this.textMesh.position
+      .copy(this.firstPoint)
+      .add(this.secondPoint)
+      .multiplyScalar(0.5);
+    const offset = new THREE.Vector3(
+      0.0,
+      0.0,
+      0.1 + 1.5 * this.radius
+    ).applyQuaternion(this.cylinder.quaternion);
+    this.textMesh.position.add(offset);
+    this.textMesh.scale.setScalar(0.0005);
+    this.add(this.textMesh);
+  }
+  setSecondPoint(point) {
+    this.secondPoint.copy(point);
+    this.updateVisual();
+    this.updateText();
+  }
+  rotateTextToFaceCamera(cameraPosition) {
+    if (this.textMesh) {
+      this.textMesh.quaternion.setFromUnitVectors(
+        backwardsVector,
+        cameraPosition.clone().sub(this.textMesh.position).normalize()
+      );
+    }
+  }
+  updateVisual() {
+    const tempVector = this.cylinder.position;
+    this.cylinder.quaternion.setFromUnitVectors(
+      upVector,
+      tempVector.copy(this.secondPoint).sub(this.firstPoint).normalize()
+    );
+    this.cylinder.scale.set(
+      1.0,
+      tempVector.subVectors(this.secondPoint, this.firstPoint).length(),
+      1.0
+    );
+    this.cylinder.position
+      .copy(this.firstPoint)
+      .add(this.secondPoint)
+      .multiplyScalar(0.5);
+  }
+}
+// --- MeasureScene inlined ---
+const palette = [0x0f9d58, 0xf4b400, 0x4285f4, 0xdb4437];
+class MeasureScene extends xb.Script {
+  activeMeasuringTapes = new Map();
+  currentColorIndex = 0;
+  init() {
+    xb.showReticleOnDepthMesh(true);
+    this.setupLights();
+  }
+  setupLights() {
+    const light = new THREE.DirectionalLight(0xffffff, 2.0);
+    light.position.set(0.5, 1, 0.866);
+    this.add(light);
+    const light2 = new THREE.DirectionalLight(0xffffff, 1.0);
+    light2.position.set(-1, 0.5, -0.5);
+    this.add(light2);
+    const light3 = new THREE.AmbientLight(0x404040, 2.0);
+    this.add(light3);
+  }
+  onSelectStart(event) {
+    const controller = event.target;
+    const intersections =
+      xb.core.input.intersectionsForController.get(controller);
+    if (intersections.length == 0) return;
+    if (this.activeMeasuringTapes.has(controller)) {
+      this.remove(this.activeMeasuringTapes.get(controller));
+    }
+    const closestIntersection = intersections[0];
+    const color = palette[this.currentColorIndex];
+    this.currentColorIndex = (this.currentColorIndex + 1) % palette.length;
+    const measuringTape = new MeasuringTape(
+      closestIntersection.point,
+      closestIntersection.point,
+      0.05,
+      color
+    );
+    this.add(measuringTape);
+    this.activeMeasuringTapes.set(controller, measuringTape);
+  }
+  update() {
+    for (const [controller, tape] of this.activeMeasuringTapes) {
+      const intersections = xb.core.input.intersectionsForController
+        .get(controller)
+        .filter((intersection) => {
+          let target = intersection.object;
+          while (target) {
+            if (target.ignoreReticleRaycast === true) {
+              return false;
+            }
+            target = target.parent;
+          }
+          return true;
+        });
+      if (intersections.length > 0) {
+        tape.setSecondPoint(intersections[0].point);
+      }
+    }
+  }
+  onSelectEnd(event) {
+    const controller = event.target;
+    this.activeMeasuringTapes.delete(controller);
+  }
+}
+const options = new xb.Options({
+  antialias: true,
+  reticles: {enabled: true},
+  visualizeRays: true,
+  depth: xb.xrDepthMeshPhysicsOptions,
+});
+options.simulator.instructions.enabled = false;
+function start() {
+  xb.add(new MeasureScene());
+  options.setAppTitle('XR Measure');
+  xb.init(options);
+}
+document.addEventListener('DOMContentLoaded', function () {
+  start();
+});
+</script>
+  </body>
+</html>

package/skills/mudra-xr/assets/demos/occlusion.html ADDED Viewed

@@ -0,0 +1,251 @@
+<!doctype html>
+<!-- reference: demos/occlusion -->
+<html lang="en">
+  <head>
+    <title>Occlusion</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+<link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
+    <script>
+      window.litDisableBundleWarning = true;
+    </script>
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
+          "troika-three-text": "https://cdn.jsdelivr.net/gh/protectwise/troika@028b81cf308f0f22e5aa8e78196be56ec1997af5/packages/troika-three-text/src/index.js",
+          "troika-three-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-three-utils/src/index.js",
+          "troika-worker-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-worker-utils/src/index.js",
+          "bidi-js": "https://esm.sh/bidi-js@%5E1.0.2?target=es2022",
+          "webgl-sdf-generator": "https://esm.sh/webgl-sdf-generator@1.1.1/es2022/webgl-sdf-generator.mjs",
+          "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
+          "lit/": "https://esm.run/lit@3/",
+          "@material/web/": "https://esm.run/@material/web/",
+          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/xrblocks.js",
+          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/addons/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '@material/web/all.js';
+      import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
+      document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
+    </script>
+  </head>
+  <body>
+    <div
+      class="background-image"
+      style="background-image: url('textures/background.webp')"
+    ></div>
+    <script type="module">
+import * as THREE from 'three';
+import * as xb from 'xrblocks';
+import {ModelManager} from 'xrblocks/addons/ui/ModelManager.js';
+// --- animals_data inlined ---
+const ANIMALS_DATA = [
+  {
+    path: 'https://cdn.jsdelivr.net/gh/xrblocks/assets@main/',
+    model: 'models/Cat/cat.gltf',
+    thumbnail: 'thumbnail.png',
+  },
+];
+// --- DepthMeshClone inlined ---
+class DepthMeshClone extends THREE.Mesh {
+  constructor() {
+    super(
+      new THREE.PlaneGeometry(),
+      new THREE.ShadowMaterial({
+        opacity: xb.xrDepthMeshOptions.depthMesh.shadowOpacity,
+        depthWrite: false,
+      })
+    );
+    this.receiveShadow = true;
+  }
+  cloneDepthMesh(depthMesh) {
+    this.geometry.dispose();
+    this.geometry = depthMesh.geometry.clone();
+    depthMesh.getWorldPosition(this.position);
+    depthMesh.getWorldQuaternion(this.quaternion);
+    depthMesh.getWorldScale(this.scale);
+  }
+}
+// --- OcclusionScene inlined ---
+const kLightX = xb.getUrlParamFloat('lightX', 0);
+const kLightY = xb.getUrlParamFloat('lightY', 500);
+const kLightZ = xb.getUrlParamFloat('lightZ', -10);
+class OcclusionScene extends xb.Script {
+  constructor() {
+    super();
+    this.pointer = new THREE.Vector3();
+    this.depthMeshClone = new DepthMeshClone();
+    this.raycaster = new THREE.Raycaster();
+    this.modelManager = new ModelManager(
+      ANIMALS_DATA,
+      /*enableOcclusion=*/ true
+    );
+    this.modelManager.layers.enable(xb.OCCLUDABLE_ITEMS_LAYER);
+    this.add(this.modelManager);
+    this.instructionText =
+      'Pinch on the environment and try hiding the cat behind sofa!';
+    this.instructionCol = null;
+  }
+  init() {
+    this.addLights();
+    xb.showReticleOnDepthMesh(true);
+    this.addPanel();
+  }
+  addPanel() {
+    const panel = new xb.SpatialPanel({
+      backgroundColor: '#00000000',
+      useDefaultPosition: false,
+      showEdge: false,
+    });
+    panel.position.set(0, 1.6, -1.0);
+    panel.isRoot = true;
+    this.add(panel);
+    const grid = panel.addGrid();
+    grid.addRow({weight: 0.05});
+    grid.addRow({weight: 0.1});
+    const controlRow = grid.addRow({weight: 0.3});
+    const ctrlPanel = controlRow.addPanel({backgroundColor: '#000000bb'});
+    const ctrlGrid = ctrlPanel.addGrid();
+    const midColumn = ctrlGrid.addCol({weight: 0.9});
+    midColumn.addRow({weight: 0.3});
+    const gesturesRow = midColumn.addRow({weight: 0.4});
+    gesturesRow.addCol({weight: 0.05});
+    const textCol = gesturesRow.addCol({weight: 1.0});
+    this.instructionCol = textCol.addRow({weight: 1.0}).addText({
+      text: `${this.instructionText}`,
+      fontColor: '#ffffff',
+      fontSize: 0.05,
+    });
+    gesturesRow.addCol({weight: 0.01});
+    midColumn.addRow({weight: 0.1});
+    const orbiter = ctrlGrid.addOrbiter();
+    orbiter.addExitButton();
+    panel.updateLayouts();
+    this.panel = panel;
+    this.frameId = 0;
+  }
+  onSimulatorStarted() {
+    this.instructionText =
+      'Click on the environment and try hiding the cat behind sofa!';
+    if (this.instructionCol) {
+      this.instructionCol.setText(this.instructionText);
+    }
+  }
+  addLights() {
+    this.add(new THREE.HemisphereLight(0xbbbbbb, 0x888888, 3));
+    const light = new THREE.DirectionalLight(0xffffff, 2);
+    light.position.set(kLightX, kLightY, kLightZ);
+    light.castShadow = true;
+    light.shadow.mapSize.width = 2048;
+    light.shadow.mapSize.height = 2048;
+    this.add(light);
+  }
+  updatePointerPosition(event) {
+    this.pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
+    this.pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    this.pointer.x = 1 + 2 * this.pointer.x;
+  }
+  onSelectStart(event) {
+    const controller = event.target;
+    if (xb.core.input.intersectionsForController.get(controller).length > 0) {
+      const intersection =
+        xb.core.input.intersectionsForController.get(controller)[0];
+      if (intersection.handleSelectRaycast) {
+        intersection.handleSelectRaycast(intersection);
+        return;
+      } else if (intersection.object.handleSelectRaycast) {
+        intersection.object.handleSelectRaycast(intersection);
+        return;
+      } else if (intersection.object == xb.core.depth.depthMesh) {
+        this.onDepthMeshSelectStart(intersection);
+        return;
+      }
+    }
+  }
+  onDepthMeshSelectStart(intersection) {
+    this.modelManager.positionModelAtIntersection(intersection, xb.core.camera);
+  }
+  onPointerDown(event) {
+    this.updatePointerPosition(event);
+    const cameras = xb.core.renderer.xr.getCamera().cameras;
+    if (cameras.length == 0) return;
+    const camera = cameras[0];
+    this.raycaster.setFromCamera(this.pointer, camera);
+    const intersections = this.raycaster.intersectObjects(
+      xb.core.input.reticleTargets
+    );
+    for (let intersection of intersections) {
+      if (intersection.handleSelectRaycast) {
+        intersection.handleSelectRaycast(intersection);
+        return;
+      } else if (intersection.object.handleSelectRaycast) {
+        intersection.object.handleSelectRaycast(intersection);
+        return;
+      } else if (intersection.object == xb.core.depth.depthMesh) {
+        this.modelManager.positionModelAtIntersection(intersection, camera);
+        return;
+      }
+    }
+  }
+}
+const options = new xb.Options();
+options.simulator.instructions.enabled = false;
+options.reticles.enabled = true;
+options.depth = new xb.DepthOptions(xb.xrDepthMeshOptions);
+options.depth.depthMesh.updateFullResolutionGeometry = true;
+options.depth.depthMesh.renderShadow = true;
+options.depth.depthTexture.enabled = true;
+options.depth.occlusion.enabled = true;
+options.xrButton.startText = '<i id="xrlogo"></i> BRING IT TO LIFE';
+options.xrButton.endText = '<i id="xrlogo"></i> MISSION COMPLETE';
+async function start() {
+  const occlusion = new OcclusionScene();
+  await xb.init(options);
+  xb.add(occlusion);
+  window.addEventListener(
+    'pointerdown',
+    occlusion.onPointerDown.bind(occlusion)
+  );
+}
+document.addEventListener('DOMContentLoaded', function () {
+  start();
+});
+</script>
+  </body>
+</html>