mudra-skills 3.0.2 → 3.0.4

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

@@ -1,247 +0,0 @@
-<!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

@@ -1,251 +0,0 @@
-<!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>