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/templates/0_basic.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!doctype html>
+<!-- reference: templates/0_basic -->
+<html lang="en">
+  <head>
+    <title>Basic: Pinch to Set Color | XR Blocks Template</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/",
+          "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 * as THREE from 'three';
+import * as xb from 'xrblocks';
+class MainScript extends xb.Script {
+  init() {
+    this.add(new THREE.HemisphereLight(0xffffff, 0x666666, 3));
+    const geometry = new THREE.CylinderGeometry(0.2, 0.2, 0.4, 32);
+    const material = new THREE.MeshPhongMaterial({
+      color: 0xffffff,
+      transparent: true,
+      opacity: 0.8,
+    });
+    this.player = new THREE.Mesh(geometry, material);
+    this.player.position.set(0, xb.user.height - 0.5, -xb.user.objectDistance);
+    this.add(this.player);
+  }
+  onSelectEnd(event) {
+    this.player.material.color.set(Math.random() * 0xffffff);
+  }
+  onSelecting(event) {
+    this.player.material.color.set(0x66ccff);
+  }
+}
+document.addEventListener('DOMContentLoaded', function () {
+  xb.add(new MainScript());
+  const options = new xb.Options();
+  options.simulator.instructions.enabled = false;
+  xb.init(options);
+});
+    </script>
+  </body>
+</html>

package/skills/mudra-xr/assets/templates/1_ui.html ADDED Viewed

@@ -0,0 +1,107 @@
+<!doctype html>
+<!-- reference: templates/1_ui -->
+<html lang="en">
+  <head>
+    <title>UI: Spatial Panels | XR Blocks Template</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/",
+          "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 xb from 'xrblocks';
+// Inlined from UIManager.js
+/**
+ * Rending a draggable spatial UI panel with SDF font libraries, and icons
+ * buttons using XR Blocks.
+ */
+class UIManager extends xb.Script {
+  constructor() {
+    super();
+    // Adds an interactive SpatialPanel as a container for UI elements.
+    const panel = new xb.SpatialPanel({backgroundColor: '#2b2b2baa'});
+    this.add(panel);
+    const grid = panel.addGrid();
+    // `weight` defines the perentage of a view's dimension to its parent.
+    // Here, question occupies 70% of the height of the panel.
+    const question = grid.addRow({weight: 0.7}).addText({
+      text: 'Welcome to UI Playground! Is it your first time here?',
+      fontColor: '#ffffff',
+      fontSize: 0.08,
+    });
+    this.question = question;
+    // ctrlRow occupies 30% of the height of the panel.
+    const ctrlRow = grid.addRow({weight: 0.3});
+    // The `text` field defines the icon of the button from Material Icons in
+    // https://fonts.google.com/icons
+    const yesButton = ctrlRow
+      .addCol({weight: 0.5})
+      .addIconButton({text: 'check_circle', fontSize: 0.5});
+    // onTriggered defines unified behavior for `onSelected`, `onClicked`,
+    // `onPinched`, `onTouched` for buttons.
+    yesButton.onTriggered = () => {
+      this._onYes();
+    };
+    const noButton = ctrlRow
+      .addCol({weight: 0.5})
+      .addIconButton({text: 'cancel', fontSize: 0.5});
+    noButton.onTriggered = () => {
+      this._onNo();
+    };
+  }
+  _onYes() {
+    console.log('yes');
+  }
+  _onNo() {
+    console.log('no');
+  }
+}
+const options = new xb.Options();
+options.simulator.instructions.enabled = false;
+options.enableUI();
+document.addEventListener('DOMContentLoaded', function () {
+  xb.add(new UIManager());
+  xb.init(options);
+});
+</script>
+  </body>
+</html>

package/skills/mudra-xr/assets/templates/2_hands.html ADDED Viewed

@@ -0,0 +1,183 @@
+<!doctype html>
+<!-- reference: templates/2_hands -->
+<html lang="en">
+  <head>
+    <title>Hands: Mesh and Touch | XR Blocks Template</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/",
+          "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">
+// Provides optional 2D UIs for simulator on desktop.
+import 'xrblocks/addons/simulator/SimulatorAddons.js';
+import * as THREE from 'three';
+import * as xb from 'xrblocks';
+// Inlined from HandsInteraction.js
+class HandsInteraction extends xb.Script {
+  init() {
+    // Touch state.
+    this.leftHandTouching = false;
+    this.rightHandTouching = false;
+    // Grab state.
+    this.isGrabbing = false;
+    this._handToObject = null;
+    // Add a cylinder to touch and grab.
+    this.originalColor = new THREE.Color(0xfbbc05);
+    const geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.2, 32).translate(
+      0,
+      1.45,
+      -0.4
+    );
+    const material = new THREE.MeshPhongMaterial({color: this.originalColor});
+    this.target = new THREE.Mesh(geometry, material);
+    this.add(this.target);
+    // Add a light.
+    this.add(new THREE.HemisphereLight(0xbbbbbb, 0x888888, 3));
+    const light = new THREE.DirectionalLight(0xffffff, 2);
+    light.position.set(1, 1, 1).normalize();
+    this.add(light);
+  }
+  _updateColor() {
+    if (this.leftHandTouching && this.rightHandTouching) {
+      this.target.material.color.setHex(0xdb4437); // Red
+    } else if (this.leftHandTouching) {
+      this.target.material.color.setHex(0x34a853); // Green
+    } else if (this.rightHandTouching) {
+      this.target.material.color.setHex(0x4285f4); // Blue
+    } else {
+      this.target.material.color.copy(this.originalColor); // Yellow
+    }
+  }
+  onObjectTouchStart(event) {
+    const handName = event.handIndex === xb.Handedness.LEFT ? 'left' : 'right';
+    console.log(`Touch started with ${handName} hand!`);
+    if (event.handIndex === xb.Handedness.LEFT) {
+      this.leftHandTouching = true;
+    } else if (event.handIndex === xb.Handedness.RIGHT) {
+      this.rightHandTouching = true;
+    }
+    this._updateColor();
+  }
+  onObjectTouchEnd(event) {
+    const handName = event.handIndex === xb.Handedness.LEFT ? 'left' : 'right';
+    console.log(`Touch ended with ${handName} hand!`);
+    if (event.handIndex === xb.Handedness.LEFT) {
+      this.leftHandTouching = false;
+    } else if (event.handIndex === xb.Handedness.RIGHT) {
+      this.rightHandTouching = false;
+    }
+    this._updateColor();
+  }
+  onObjectGrabStart(event) {
+    if (this.isGrabbing) return;
+    this.isGrabbing = true;
+    const handName = event.handIndex === xb.Handedness.LEFT ? 'left' : 'right';
+    console.log(`Grab started with ${handName} hand!`);
+    // Make sure matrices are fresh.
+    this.target.updateMatrixWorld(true);
+    event.hand.updateMatrixWorld(true);
+    // Save the initial hand to object delta transform.
+    const H0 = new THREE.Matrix4().copy(event.hand.matrixWorld);
+    const O0 = new THREE.Matrix4().copy(this.target.matrixWorld);
+    this._handToObject = new THREE.Matrix4().copy(H0).invert().multiply(O0);
+  }
+  onObjectGrabbing(event) {
+    if (!this.isGrabbing || !this._handToObject) return;
+    event.hand.updateMatrixWorld(true);
+    const H = new THREE.Matrix4().copy(event.hand.matrixWorld);
+    const O = new THREE.Matrix4().multiplyMatrices(H, this._handToObject);
+    const parent = this.target.parent;
+    if (parent) parent.updateMatrixWorld(true);
+    const parentInv = parent
+      ? new THREE.Matrix4().copy(parent.matrixWorld).invert()
+      : new THREE.Matrix4().identity();
+    const Olocal = new THREE.Matrix4().multiplyMatrices(parentInv, O);
+    const pos = new THREE.Vector3();
+    const quat = new THREE.Quaternion();
+    const scl = new THREE.Vector3();
+    Olocal.decompose(pos, quat, scl);
+    this.target.position.copy(pos);
+    this.target.quaternion.copy(quat);
+    this.target.updateMatrix();
+  }
+  onObjectGrabEnd(event) {
+    if (!this.isGrabbing) return;
+    const handName = event.handIndex === xb.Handedness.LEFT ? 'left' : 'right';
+    console.log(`Grab ended with ${handName} hand!`);
+    this.isGrabbing = false;
+    this._handToObject = null;
+  }
+}
+const options = new xb.Options();
+options.simulator.instructions.enabled = false;
+options.enableReticles();
+options.enableHands();
+options.hands.enabled = true;
+options.hands.visualization = true;
+// Visualize hand joints.
+options.hands.visualizeJoints = true;
+// Visualize hand meshes.
+options.hands.visualizeMeshes = true;
+options.simulator.defaultMode = xb.SimulatorMode.POSE;
+function start() {
+  xb.add(new HandsInteraction());
+  xb.init(options);
+}
+document.addEventListener('DOMContentLoaded', function () {
+  start();
+});
+</script>
+  </body>
+</html>

package/skills/mudra-xr/assets/templates/3_depth.html ADDED Viewed

@@ -0,0 +1,89 @@
+<!doctype html>
+<!-- reference: templates/3_depth -->
+<html lang="en">
+  <head>
+    <title>Depth | XR Blocks Template</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/",
+          "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 * as xb from 'xrblocks';
+const pawnModelPath =
+  'https://cdn.jsdelivr.net/gh/xrblocks/assets@main/models/arcore_pawn_compressed.glb';
+class PawnPlacer extends xb.Script {
+  async init() {
+    this.addLights();
+    await this.loadPawnModel();
+  }
+  async loadPawnModel() {
+    const pawnGltf = await new xb.ModelLoader().load({
+      url: pawnModelPath,
+      renderer: xb.core.renderer,
+    });
+    pawnGltf.scene.scale.setScalar(0.5);
+    this.pawnModel = pawnGltf.scene;
+  }
+  addLights() {
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
+    directionalLight.position.set(0, 1, 0);
+    this.add(directionalLight);
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+    this.add(ambientLight);
+  }
+  onSelectStart(event) {
+    const intersection = xb.user.select(xb.core.depth.depthMesh, event.target);
+    if (intersection) {
+      this.add(
+        xb.placeObjectAtIntersectionFacingTarget(
+          this.pawnModel.clone(),
+          intersection,
+          xb.core.camera
+        )
+      );
+    }
+  }
+}
+document.addEventListener('DOMContentLoaded', async function () {
+  const options = new xb.Options();
+  options.simulator.instructions.enabled = false;
+  options.reticles.enabled = true;
+  options.depth = new xb.DepthOptions(xb.xrDepthMeshOptions);
+  await xb.init(options);
+  xb.showReticleOnDepthMesh(true);
+  xb.add(new PawnPlacer());
+});
+</script>
+  </body>
+</html>

package/skills/mudra-xr/assets/templates/4_stereo.html ADDED Viewed

@@ -0,0 +1,84 @@
+<!doctype html>
+<!-- reference: templates/4_stereo -->
+<html lang="en">
+  <head>
+    <title>Stereo | XR Blocks Template</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/",
+          "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 * as xb from 'xrblocks';
+const stereoTextureFile = 'SV_20241216_144600.webp';
+class StereoImage extends xb.Script {
+  async init() {
+    await this.addStereoQuad();
+  }
+  async addStereoQuad() {
+    const stereoObject = new THREE.Group();
+    const [leftTexture, rightTexture] =
+      await xb.loadStereoImageAsTextures(stereoTextureFile);
+    const geometry = new THREE.PlaneGeometry(1, 1);
+    const leftMesh = new THREE.Mesh(
+      geometry,
+      new THREE.MeshBasicMaterial({
+        map: leftTexture,
+        side: THREE.DoubleSide,
+      })
+    );
+    xb.showOnlyInLeftEye(leftMesh);
+    stereoObject.add(leftMesh);
+    const rightMesh = new THREE.Mesh(
+      geometry,
+      new THREE.MeshBasicMaterial({
+        map: rightTexture,
+        side: THREE.DoubleSide,
+      })
+    );
+    xb.showOnlyInRightEye(rightMesh);
+    stereoObject.add(rightMesh);
+    stereoObject.position.set(0.0, 1.5, -1.5);
+    this.add(stereoObject);
+  }
+}
+document.addEventListener('DOMContentLoaded', function () {
+  const options = new xb.Options();
+  options.simulator.instructions.enabled = false;
+  options.simulator.stereo.enabled = true;
+  xb.add(new StereoImage());
+  xb.init(options);
+});
+</script>
+  </body>
+</html>

package/skills/mudra-xr/assets/templates/5_camera.html ADDED Viewed

@@ -0,0 +1,117 @@
+<!doctype html>
+<!-- reference: templates/5_camera -->
+<html lang="en">
+  <head>
+    <title>Camera | XR Blocks Template</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/",
+          "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 xb from 'xrblocks';
+/**
+ * A class that provides UI to display and cycle through device cameras.
+ */
+class CameraViewManager extends xb.Script {
+  /** @private {XRDeviceCamera|null} */
+  cameraStream_ = null;
+  constructor() {
+    super();
+    this.panel = new xb.SpatialPanel({
+      backgroundColor: '#2b2b2baa',
+      useDefaultPosition: true,
+    });
+    const grid = this.panel.addGrid();
+    this.videoView = grid.addRow({weight: 0.7}).addVideo();
+    const txtRow = grid.addRow({weight: 0.15});
+    this.cameraLabel = txtRow
+      .addCol({weight: 1})
+      .addText({text: 'Camera', fontColor: '#ffffff', fontSize: 0.05});
+    const ctrlRow = grid.addRow({weight: 0.2});
+    this.prevCameraButton = ctrlRow.addCol({weight: 0.5}).addIconButton({
+      text: 'skip_previous',
+      fontSize: 0.5,
+    });
+    this.nextCameraButton = ctrlRow.addCol({weight: 0.5}).addIconButton({
+      text: 'skip_next',
+      fontSize: 0.5,
+    });
+    this.prevCameraButton.onTriggered = () => this.cycleCamera_(-1);
+    this.nextCameraButton.onTriggered = () => this.cycleCamera_(1);
+    this.add(this.panel);
+  }
+  async init() {
+    this.cameraStream_ = xb.core.deviceCamera;
+    // Listen for camera state changes to update UI
+    this.cameraStream_.addEventListener('statechange', (event) => {
+      this.cameraLabel.setText(event.device?.label || event.state || 'Camera');
+      if (event.state === 'streaming') {
+        this.videoView.load(this.cameraStream_);
+      }
+    });
+    this.cameraLabel.setText(
+      this.cameraStream_.getCurrentDevice()?.label || 'Camera'
+    );
+    this.videoView.load(this.cameraStream_);
+  }
+  /**
+   * Cycle to the next or previous device.
+   * @param {number} offset - The direction to cycle (-1 for prev, 1 for next).
+   */
+  async cycleCamera_(offset) {
+    const devices = this.cameraStream_.getAvailableDevices();
+    if (devices.length <= 1) return;
+    const newIndex =
+      (this.cameraStream_.getCurrentDeviceIndex() + offset + devices.length) %
+      devices.length;
+    await this.cameraStream_.setDeviceId(devices[newIndex].deviceId);
+  }
+}
+document.addEventListener('DOMContentLoaded', function () {
+  const options = new xb.Options();
+  options.simulator.instructions.enabled = false;
+  options.enableUI();
+  options.enableCamera();
+  xb.add(new CameraViewManager());
+  xb.init(options);
+});
+</script>
+  </body>
+</html>