mudra-skills 3.0.2 → 3.0.4

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

@@ -1,422 +0,0 @@
-<!doctype html>
-<!-- reference: demos/balloonpop -->
-<html lang="en">
-  <head>
-    <title>XR Blocks: Balloon Pop (v5.1 - Stable Fallback)</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.180.0/build/three.module.js",
-          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.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/",
-          "@dimforge/rapier3d-simd-compat": "https://cdn.skypack.dev/@dimforge/rapier3d-simd-compat@0.17.0",
-          "xrblocks": "https://cdn.jsdelivr.net/gh/google/xrblocks@build/xrblocks.js",
-          "xrblocks/addons/": "https://cdn.jsdelivr.net/gh/google/xrblocks@build/addons/"
-        }
-      }
-    </script>
-  </head>
-
-  <body>
-    <script type="module">
-import * as xb from 'xrblocks';
-import RAPIER from '@dimforge/rapier3d-simd-compat';
-import 'xrblocks/addons/simulator/SimulatorAddons.js';
-import * as THREE from 'three';
-
-// --- audio.js inlined ---
-const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-
-function playPopSound() {
-  if (audioContext.state === 'suspended') audioContext.resume();
-  const noiseSource = audioContext.createBufferSource();
-  const bandpass = audioContext.createBiquadFilter();
-  const gainNode = audioContext.createGain();
-  const now = audioContext.currentTime;
-  const sampleRate = audioContext.sampleRate;
-  const bufferSize = sampleRate * 0.15;
-  const noiseBuffer = audioContext.createBuffer(1, bufferSize, sampleRate);
-  const output = noiseBuffer.getChannelData(0);
-  for (let i = 0; i < bufferSize; i++) output[i] = Math.random() * 2 - 1;
-  noiseSource.buffer = noiseBuffer;
-  bandpass.type = 'bandpass';
-  bandpass.frequency.setValueAtTime(3000, now);
-  bandpass.Q.setValueAtTime(1.2, now);
-  gainNode.gain.setValueAtTime(0, now);
-  gainNode.gain.linearRampToValueAtTime(0.8, now + 0.002);
-  gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.12);
-  noiseSource.connect(bandpass);
-  bandpass.connect(gainNode);
-  gainNode.connect(audioContext.destination);
-  noiseSource.start(0);
-}
-
-function playWhooshSound() {
-  if (audioContext.state === 'suspended') audioContext.resume();
-  const oscillator = audioContext.createOscillator();
-  const gainNode = audioContext.createGain();
-  const now = audioContext.currentTime;
-  oscillator.type = 'sawtooth';
-  oscillator.frequency.setValueAtTime(800, now);
-  oscillator.frequency.exponentialRampToValueAtTime(100, now + 0.1);
-  gainNode.gain.setValueAtTime(0.3, now);
-  gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.1);
-  oscillator.connect(gainNode);
-  gainNode.connect(audioContext.destination);
-  oscillator.start(0);
-  oscillator.stop(now + 0.1);
-}
-
-// --- BalloonPop.js inlined ---
-const DART_SPEED = 15.0;
-const DART_GRAVITY_SCALE = 0.1;
-const MENU_WIDTH = 0.85;
-const PARTICLE_COUNT = 30;
-const PARTICLE_LIFE = 1.0;
-const BOUNDARY_RADIUS = 7.62;
-const BOUNDARY_IMPULSE = 0.02;
-
-const GROUP_WORLD = (0x0001 << 16) | (0x0002 | 0x0004);
-const GROUP_BALLOON = (0x0002 << 16) | (0x0001 | 0x0002 | 0x0004);
-const GROUP_DART = (0x0004 << 16) | (0x0001 | 0x0002);
-
-function createStepperControl(game, grid, labelText, valueRef, min, max, step, isCount) {
-  const H_BUTTON = 0.15;
-  const H_VALUE_LABEL = 0.12;
-  const menuHeight = game.menuPanel.height;
-  const getW = (h) => h / menuHeight;
-
-  grid.addRow({weight: getW(H_BUTTON)}).addTextButton({
-    text: '+', fontColor: '#ffffff', backgroundColor: '#4285f4', fontSize: 0.7, width: 0.3, weight: 1.0,
-  }).onTriggered = () => {
-    const maxVal = isCount ? max : 0.1;
-    game[valueRef] = Math.min(maxVal, game[valueRef] + step);
-    game.renderMenu();
-  };
-
-  const displayValue = isCount ? game[valueRef] : Math.round(game[valueRef] * 100);
-  const valueText = grid.addRow({weight: getW(H_VALUE_LABEL)}).addText({
-    text: `${labelText}: ${displayValue}`, fontColor: '#ffffff', fontSize: 0.12, textAlign: 'center',
-  });
-
-  if (isCount) game.countValueText = valueText;
-  else game.speedValueText = valueText;
-
-  grid.addRow({weight: getW(H_BUTTON)}).addTextButton({
-    text: '-', fontColor: '#ffffff', backgroundColor: '#4285f4', fontSize: 0.7, width: 0.3, weight: 1.0,
-  }).onTriggered = () => {
-    game[valueRef] = Math.max(min, game[valueRef] - step);
-    game.renderMenu();
-  };
-  grid.addRow({weight: getW(0.01)});
-}
-
-class BalloonGame extends xb.Script {
-  constructor() {
-    super();
-    this.balloons = new Map();
-    this.darts = new Map();
-    this.particles = [];
-    this.balloonCount = 10;
-    this.balloonSpeed = 0.03;
-    this.balloonsPopped = 0;
-    this.activeDart = null;
-    this.menuPanel = null;
-    this.isMenuExpanded = true;
-    this.physics = null;
-    this.physicsWorld = null;
-    this.RAPIER = null;
-    this.balloonModel = null;
-    this.dartModel = null;
-    this.particleGeometry = null;
-    this.particleMaterial = null;
-    this.raycaster = new THREE.Raycaster();
-    this.menuPos = new THREE.Vector3(0.6, 1.3, -1.0);
-    this.menuRot = new THREE.Euler(0, -0.4, 0);
-  }
-
-  async init() {
-    setTimeout(() => {
-      const options = xb.core.registry.get(xb.Options);
-      if (options && options.depth) {
-        options.depth.enabled = true;
-        if (options.depth.depthMesh) {
-          options.depth.depthMesh.enabled = true;
-          options.depth.depthMesh.physicsEnabled = true;
-          options.depth.depthMesh.collisionGroups = GROUP_WORLD;
-        }
-      }
-    }, 1000);
-
-    this.add(new THREE.HemisphereLight(0xffffff, 0xbbbbff, 3));
-    const dirLight = new THREE.DirectionalLight(0xffffff, 2);
-    dirLight.position.set(1, 2, 1);
-    this.add(dirLight);
-
-    this.createPrefabs();
-    this.renderMenu();
-  }
-
-  createPrefabs() {
-    this.dartModel = new THREE.Group();
-    const needleMat = new THREE.MeshStandardMaterial({color: 0xaaaaaa, metalness: 1.0, roughness: 0.1});
-    const silverMat = new THREE.MeshStandardMaterial({color: 0xcccccc, metalness: 0.8, roughness: 0.3});
-    const redMat = new THREE.MeshStandardMaterial({color: 0xaa0000, roughness: 0.5});
-    const finMat = new THREE.MeshStandardMaterial({color: 0xcc0000, roughness: 0.6});
-    const needle = new THREE.Mesh(new THREE.ConeGeometry(0.002, 0.04, 6), needleMat);
-    needle.position.y = 0.17;
-    const tipHolder = new THREE.Mesh(new THREE.CylinderGeometry(0.008, 0.012, 0.03, 8), silverMat);
-    tipHolder.position.y = 0.135;
-    const body = new THREE.Mesh(new THREE.CylinderGeometry(0.01, 0.01, 0.18, 8), redMat);
-    body.position.y = 0.03;
-    const createFin = (rotationY) => {
-      const fin = new THREE.Mesh(new THREE.BoxGeometry(0.07, 0.05, 0.002, 1, 1, 1), finMat);
-      fin.position.set(0, -0.05, 0);
-      fin.rotation.set(Math.PI, rotationY, 0);
-      return fin;
-    };
-    this.dartModel.add(needle, tipHolder, body);
-    this.dartModel.add(createFin(0));
-    this.dartModel.add(createFin(Math.PI / 2));
-    this.dartModel.add(createFin(Math.PI));
-    this.dartModel.add(createFin(Math.PI * 1.5));
-
-    this.balloonModel = new THREE.Group();
-    const balloonGeo = new THREE.SphereGeometry(0.5, 32, 32);
-    const pos = balloonGeo.attributes.position;
-    const v = new THREE.Vector3();
-    for (let i = 0; i < pos.count; i++) {
-      v.fromBufferAttribute(pos, i);
-      if (v.y < 0) { const t = 1.0 - Math.abs(v.y) * 0.35; v.x *= t; v.z *= t; }
-      pos.setXYZ(i, v.x, v.y, v.z);
-    }
-    balloonGeo.computeVertexNormals();
-    const balloonMat = new THREE.MeshStandardMaterial({color: 0xffffff, roughness: 0.2, metalness: 0.1, transparent: true, opacity: 0.85, side: THREE.FrontSide});
-    this.balloonModel.add(new THREE.Mesh(balloonGeo, balloonMat));
-    const knotGeo = new THREE.CylinderGeometry(0.03, 0.01, 0.12, 16);
-    knotGeo.translate(0, -0.54, 0);
-    this.balloonModel.add(new THREE.Mesh(knotGeo, balloonMat));
-    const ringGeo = new THREE.TorusGeometry(0.035, 0.015, 8, 24);
-    ringGeo.rotateX(Math.PI / 2);
-    ringGeo.translate(0, -0.6, 0);
-    this.balloonModel.add(new THREE.Mesh(ringGeo, balloonMat));
-
-    this.particleGeometry = new THREE.PlaneGeometry(0.08, 0.08);
-    this.particleMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, transparent: true, opacity: 1.0, side: THREE.DoubleSide, blending: THREE.AdditiveBlending});
-  }
-
-  initPhysics(physics) {
-    this.physics = physics;
-    this.physicsWorld = physics.blendedWorld;
-    this.RAPIER = physics.RAPIER;
-    this.spawnBalloons();
-    this.renderMenu();
-  }
-
-  renderMenu() {
-    if (this.menuPanel) {
-      this.menuPos.copy(this.menuPanel.position);
-      this.menuRot.copy(this.menuPanel.rotation);
-      this.remove(this.menuPanel);
-    }
-    const H_TOGGLE = 0.1, H_SCORE = 0.15, H_RESET = 0.15, H_SPACE = 0.03, H_BUTTON = 0.15, H_VALUE_LABEL = 0.12;
-    const headerHeight = H_TOGGLE + H_SCORE + H_RESET + H_SPACE;
-    const expandedControlsHeight = (H_BUTTON + H_VALUE_LABEL + H_BUTTON + H_SPACE) * 2;
-    const menuHeight = this.isMenuExpanded ? headerHeight + expandedControlsHeight : headerHeight;
-    const getW = (h) => h / menuHeight;
-
-    this.menuPanel = new xb.SpatialPanel({width: MENU_WIDTH, height: menuHeight, backgroundColor: '#2b2b2baa', showEdge: true, edgeColor: 'white', edgeWidth: 0.001});
-    this.menuPanel.position.copy(this.menuPos);
-    this.menuPanel.rotation.copy(this.menuRot);
-    this.add(this.menuPanel);
-    const grid = this.menuPanel.addGrid();
-    grid.addRow({weight: getW(H_TOGGLE)}).addTextButton({text: this.isMenuExpanded ? '\u25B2' : '\u25BC', fontColor: '#ffffff', backgroundColor: '#444444', fontSize: 0.7, weight: 1.0}).onTriggered = () => this.toggleMenu();
-    this.scoreText = grid.addRow({weight: getW(H_SCORE)}).addText({text: `${this.balloonsPopped} / ${this.balloonCount}`, fontColor: '#ffffff', fontSize: 0.15, textAlign: 'center'});
-    grid.addRow({weight: getW(H_RESET)}).addTextButton({text: '\u21BB', fontColor: '#ffffff', backgroundColor: '#d93025', fontSize: 0.7, weight: 1.0}).onTriggered = () => this.resetGame();
-    grid.addRow({weight: getW(H_SPACE)});
-    if (this.isMenuExpanded) {
-      createStepperControl(this, grid, 'Balloons', 'balloonCount', 5, 30, 1, true);
-      createStepperControl(this, grid, 'Speed', 'balloonSpeed', 0.0, 0.1, 0.01, false);
-    }
-  }
-
-  toggleMenu() { this.isMenuExpanded = !this.isMenuExpanded; this.renderMenu(); }
-  updateScoreDisplay() { if (this.scoreText) this.scoreText.text = `${this.balloonsPopped} / ${this.balloonCount}`; }
-  resetGame() { this.spawnBalloons(); this.renderMenu(); }
-
-  spawnBalloons() {
-    if (!this.physicsWorld || !this.RAPIER || !this.balloonModel) return;
-    this.clearBalloons();
-    this.balloonsPopped = 0;
-    this.updateScoreDisplay();
-    const color = new THREE.Color();
-    for (let i = 0; i < this.balloonCount; i++) {
-      const grp = this.balloonModel.clone();
-      const x = (Math.random() - 0.5) * 4, y = 1.5 + Math.random() * 1, z = -2 - Math.random() * 2;
-      grp.position.set(x, y, z);
-      const s = 0.7 + Math.random() * 0.6;
-      grp.scale.set(s, s, s);
-      color.setHSL(Math.random(), 0.95, 0.6);
-      grp.traverse((c) => { if (c.isMesh) { c.material = c.material.clone(); c.material.color.copy(color); } });
-      const rb = this.physicsWorld.createRigidBody(this.RAPIER.RigidBodyDesc.dynamic().setTranslation(x, y, z).setGravityScale(-0.05 * s).setLinearDamping(0.5).setAngularDamping(0.5));
-      const col = this.physicsWorld.createCollider(this.RAPIER.ColliderDesc.ball(0.5 * s).setActiveEvents(this.RAPIER.ActiveEvents.COLLISION_EVENTS).setRestitution(0.85).setDensity(0.1).setCollisionGroups(GROUP_BALLOON), rb);
-      this.balloons.set(col.handle, {mesh: grp, rigidBody: rb, collider: col, color: color.clone()});
-      this.add(grp);
-    }
-  }
-
-  clearBalloons() {
-    if (!this.physicsWorld) return;
-    for (const [h, b] of this.balloons.entries()) { this.remove(b.mesh); this.physicsWorld.removeCollider(b.collider, false); this.physicsWorld.removeRigidBody(b.rigidBody); }
-    this.balloons.clear();
-  }
-
-  spawnExplosion(position, color) {
-    for (let i = 0; i < PARTICLE_COUNT; i++) {
-      const mat = this.particleMaterial.clone();
-      mat.color.copy(color);
-      const mesh = new THREE.Mesh(this.particleGeometry, mat);
-      mesh.position.copy(position);
-      this.add(mesh);
-      this.particles.push({mesh, velocity: new THREE.Vector3((Math.random() - 0.5) * 4.0, (Math.random() - 0.5) * 4.0, (Math.random() - 0.5) * 4.0), life: PARTICLE_LIFE});
-    }
-  }
-
-  onSelectStart(event) {
-    if (this.menuPanel && this.menuPanel.parent) {
-      const ctrl = event.target, pos = new THREE.Vector3(), quat = new THREE.Quaternion();
-      ctrl.getWorldPosition(pos);
-      ctrl.getWorldQuaternion(quat);
-      this.raycaster.set(pos, new THREE.Vector3(0, 0, -1).applyQuaternion(quat));
-      if (this.raycaster.intersectObject(this.menuPanel, true).length > 0) return;
-    }
-    if (this.activeDart) return;
-    this.activeDart = this.dartModel.clone();
-    this.activeDart.position.set(0, -0.05, -0.15);
-    this.activeDart.rotation.set(-Math.PI / 2, 0, 0);
-    event.target.add(this.activeDart);
-  }
-
-  onSelectEnd(event) {
-    const ctrl = event.target;
-    if (!this.activeDart || !this.physicsWorld) return;
-    const dart = this.activeDart;
-    this.activeDart = null;
-    const wPos = new THREE.Vector3(), wQuat = new THREE.Quaternion();
-    dart.getWorldPosition(wPos);
-    dart.getWorldQuaternion(wQuat);
-    ctrl.remove(dart);
-    dart.position.copy(wPos);
-    dart.quaternion.copy(wQuat);
-    this.add(dart);
-    playWhooshSound();
-    const rb = this.physicsWorld.createRigidBody(this.RAPIER.RigidBodyDesc.dynamic().setTranslation(wPos.x, wPos.y, wPos.z).setRotation(wQuat).setGravityScale(DART_GRAVITY_SCALE).setCcdEnabled(true));
-    const col = this.physicsWorld.createCollider(this.RAPIER.ColliderDesc.capsule(0.1, 0.015).setActiveEvents(this.RAPIER.ActiveEvents.COLLISION_EVENTS).setSensor(true).setCollisionGroups(GROUP_DART), rb);
-    rb.setLinvel(new THREE.Vector3(0, 1, 0).applyQuaternion(wQuat).multiplyScalar(DART_SPEED), true);
-    this.darts.set(col.handle, {mesh: dart, rigidBody: rb, collider: col});
-  }
-
-  update(time, delta) {
-    if (this.physicsWorld) {
-      for (const [h, b] of this.balloons.entries()) { b.mesh.position.copy(b.rigidBody.translation()); b.mesh.quaternion.copy(b.rigidBody.rotation()); }
-      for (const [h, d] of this.darts.entries()) {
-        d.mesh.position.copy(d.rigidBody.translation());
-        d.mesh.quaternion.copy(d.rigidBody.rotation());
-        if (d.mesh.position.y < -5 || Math.abs(d.mesh.position.z) > 30) this.removeDart(h);
-      }
-    }
-    const dt = delta || 1 / 60;
-    for (let i = this.particles.length - 1; i >= 0; i--) {
-      const p = this.particles[i];
-      p.life -= dt;
-      if (p.life <= 0) { this.remove(p.mesh); this.particles.splice(i, 1); }
-      else { p.mesh.position.addScaledVector(p.velocity, dt); p.mesh.material.opacity = p.life / PARTICLE_LIFE; if (xb.core.camera) p.mesh.lookAt(xb.core.camera.position); }
-    }
-  }
-
-  physicsStep() {
-    if (!this.physics || !this.physicsWorld || !xb.core.camera) return;
-    const camPos = xb.core.camera.position;
-    const speedFactor = this.balloonSpeed / 10;
-    for (const [h, b] of this.balloons.entries()) {
-      const s = speedFactor;
-      b.rigidBody.addForce({x: (Math.random() - 0.5) * s, y: (Math.random() - 0.5) * (s * 0.5), z: (Math.random() - 0.5) * s}, true);
-      const p = b.rigidBody.translation();
-      const dx = p.x - camPos.x, dz = p.z - camPos.z;
-      const dist = Math.sqrt(dx * dx + dz * dz);
-      if (dist > BOUNDARY_RADIUS) b.rigidBody.applyImpulse({x: (-dx / dist) * BOUNDARY_IMPULSE, y: 0, z: (-dz / dist) * BOUNDARY_IMPULSE}, true);
-      if (p.y > 5.0) b.rigidBody.applyImpulse({x: 0, y: -BOUNDARY_IMPULSE, z: 0}, true);
-      if (p.y < 0.5) b.rigidBody.applyImpulse({x: 0, y: BOUNDARY_IMPULSE, z: 0}, true);
-    }
-    this.physics.eventQueue.drainCollisionEvents((h1, h2, s) => {
-      if (!s) return;
-      if (this.darts.has(h1) && this.balloons.has(h2)) { this.popBalloon(h2); this.removeDart(h1); }
-      else if (this.darts.has(h2) && this.balloons.has(h1)) { this.popBalloon(h1); this.removeDart(h2); }
-    });
-  }
-
-  popBalloon(h) {
-    const b = this.balloons.get(h);
-    if (b) { this.spawnExplosion(b.mesh.position.clone(), b.color); playPopSound(); }
-    this.removeBalloon(h);
-    this.balloonsPopped++;
-    this.updateScoreDisplay();
-  }
-  removeBalloon(h) {
-    const b = this.balloons.get(h);
-    if (!b) return;
-    this.remove(b.mesh);
-    this.physicsWorld.removeCollider(b.collider, false);
-    this.physicsWorld.removeRigidBody(b.rigidBody);
-    this.balloons.delete(h);
-  }
-  removeDart(h) {
-    const d = this.darts.get(h);
-    if (!d) return;
-    this.remove(d.mesh);
-    this.physicsWorld.removeCollider(d.collider, false);
-    this.physicsWorld.removeRigidBody(d.rigidBody);
-    this.darts.delete(h);
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  const o = new xb.Options();
-  o.simulator.instructions.enabled = false;
-  o.enableUI();
-  o.physics.RAPIER = RAPIER;
-  o.physics.useEventQueue = true;
-  o.physics.worldStep = true;
-  o.hands.enabled = true;
-  o.simulator.defaultMode = xb.SimulatorMode.POSE;
-
-  o.depth.enabled = false;
-  if (o.depth.depthMesh) {
-    o.depth.depthMesh.enabled = true;
-    o.depth.depthMesh.physicsEnabled = true;
-    o.depth.depthMesh.collisionGroups = GROUP_WORLD;
-    o.depth.depthMesh.colliderUpdateFps = 5;
-  }
-
-  xb.add(new BalloonGame());
-  xb.init(o);
-});
-
-</script>
-  </body>
-</html>