mudra-skills 3.0.2 → 3.0.4

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

@@ -1,498 +0,0 @@
-<!doctype html>
-<!-- reference: demos/rain -->
-<html lang="en">
-  <head>
-    <title>Rain</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>
-    <div
-      class="background-image"
-      style="background-image: url('textures/background.webp')"
-    ></div>
-
-    <div
-      id="startButton"
-      style="
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: black;
-        color: white;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        z-index: 1000;
-      "
-    >
-      <p style="font-size: 24px">Click to Start Rain Experience</p>
-    </div>
-
-    <script type="module">
-import 'xrblocks/addons/simulator/SimulatorAddons.js';
-
-import * as THREE from 'three';
-import * as xb from 'xrblocks';
-import {VolumetricCloud} from 'xrblocks/addons/volumes/VolumetricCloud.js';
-
-// --- RainParticles inlined ---
-const kMaxAnimationFrames = 15;
-const kAnimationSpeed = 2.0;
-const DEBUG_SINGLE = false;
-
-function clamp(x, a, b) {
-  return Math.min(Math.max(x, a), b);
-}
-
-class RainParticles extends THREE.Object3D {
-  constructor() {
-    super();
-    this.particleCount = DEBUG_SINGLE ? 1 : 200;
-    this.RANGE = 4;
-    this.raycaster = new THREE.Raycaster();
-
-    this.velocities = new Float32Array(this.particleCount);
-    this.particleWeights = new Float32Array(this.particleCount);
-    this.particleVisibility = new Float32Array(this.particleCount);
-
-    this.raindropMesh = null;
-  }
-
-  init() {
-    const textureLoader = new THREE.TextureLoader();
-    textureLoader.load('textures/rain_sprite_sheet.png', (raindropTexture) => {
-      const raindropMaterial = this.createRaindropMaterial(raindropTexture);
-      const raindropGeometry = new THREE.PlaneGeometry(0.1, 0.1);
-
-      this.raindropMesh = new THREE.InstancedMesh(
-        raindropGeometry,
-        raindropMaterial,
-        this.particleCount
-      );
-
-      this.initializeParticles();
-
-      this.raindropMesh.geometry.setAttribute(
-        'aWeight',
-        new THREE.InstancedBufferAttribute(this.particleWeights, 1).setUsage(
-          THREE.DynamicDrawUsage
-        )
-      );
-      this.raindropMesh.geometry.setAttribute(
-        'aVisibility',
-        new THREE.InstancedBufferAttribute(this.particleVisibility, 1).setUsage(
-          THREE.DynamicDrawUsage
-        )
-      );
-
-      this.raindropMesh.instanceMatrix.needsUpdate = true;
-      this.add(this.raindropMesh);
-    });
-  }
-
-  createRaindropMaterial(texture) {
-    return new THREE.ShaderMaterial({
-      uniforms: {
-        uTexture: {value: texture},
-        uCameraPosition: {value: new THREE.Vector3()},
-        uCameraRotationMatrix: {value: new THREE.Matrix4()},
-      },
-      vertexShader: `
-        attribute float aWeight;
-        attribute float aVisibility;
-        varying float vWeight;
-        varying float vVisibility;
-        varying vec2 vUv;
-        uniform vec3 uCameraPosition;
-        uniform mat4 uCameraRotationMatrix;
-
-        const float PI = 3.14159265359;
-
-
-        void main() {
-          vUv = uv;
-          vWeight = aWeight;
-          vVisibility = aVisibility;
-
-          // Get the world position of the instance
-          vec4 worldPosition = instanceMatrix * vec4(0.0, 0.0, 0.0, 1.0);
-
-          vec3 rotatedPosition;
-
-          if (vWeight < 1.5) {
-            // Compute vector from particle to camera, projected onto XZ plane
-            vec3 toCamera = uCameraPosition - worldPosition.xyz;
-            toCamera.y = 0.0; // Ignore vertical component
-            toCamera = normalize(toCamera);
-
-            // Compute the angle to rotate around Y-axis
-            float angle = atan(toCamera.x, toCamera.z);
-
-            // Create rotation matrix around Y-axis
-            mat3 rotationMatrix = mat3(
-              cos(angle), 0.0, -sin(angle),
-              0.0,        1.0,  0.0,
-              sin(angle), 0.0,  cos(angle)
-            );
-
-            // Apply rotation to vertex position
-            rotatedPosition = rotationMatrix * position;
-          } else {
-            // Rotate the particle to face positive Y-axis
-            // This is a rotation of -90 degrees around X-axis
-            float angle = 0.5 * PI; // -90 degrees in radians
-
-            // Create rotation matrix around X-axis
-            mat3 rotationMatrix = mat3(
-              1.0,       0.0,        0.0,
-              0.0, cos(angle), -sin(angle),
-              0.0, sin(angle),  cos(angle)
-            );
-
-            // Apply rotation to vertex position
-            rotatedPosition = rotationMatrix * position;
-          }
-
-          // Apply instance transformations
-          vec4 finalPosition = instanceMatrix * vec4(rotatedPosition, 1.0);
-
-          // Transform to clip space
-          gl_Position = projectionMatrix * viewMatrix * finalPosition;
-        }
-
-      `,
-      fragmentShader: `
-        uniform sampler2D uTexture;
-        varying vec2 vUv;
-        varying float vWeight;
-        varying float vVisibility;
-
-        void main() {
-          const float kAnimationSpeed = 2.0;
-          vec2 uv = vUv * 0.25;  // Assumes a 4x4 texture grid.
-          float frame = floor(vWeight / kAnimationSpeed);
-          float xIndex = mod(frame, 4.0);
-          float yIndex = floor(frame / 4.0);
-          uv += vec2(xIndex, 3.0 - yIndex) * 0.25;  // Maps frame index to UV coordinates.
-          vec4 texColor = texture2D(uTexture, uv);
-          gl_FragColor = vec4(pow(texColor.rgb, vec3(0.5)), texColor.a * vVisibility * 0.8 - step(vWeight, 0.5) * 0.2);  // Applies visibility factor.
-        }
-      `,
-      transparent: true,
-    });
-  }
-
-  initializeParticles() {
-    const dummy = new THREE.Object3D();
-    for (let i = 0; i < this.particleCount; i++) {
-      dummy.position.set(
-        Math.random() * this.RANGE * 2 - this.RANGE,
-        Math.random() * this.RANGE * 2,
-        Math.random() * this.RANGE * 2 - this.RANGE
-      );
-
-      if (DEBUG_SINGLE) {
-        dummy.position.set(0, 1.2, -1);
-      }
-
-      dummy.updateMatrix();
-      this.raindropMesh.setMatrixAt(i, dummy.matrix);
-
-      this.velocities[i] = Math.random() * 0.05 + 0.2;
-      this.particleWeights[i] = 0;
-      this.particleVisibility[i] = 1;
-    }
-  }
-
-  update(camera, xrDepth) {
-    if (!this.raindropMesh) return;
-    const depthMesh = xrDepth.depthMesh;
-
-    const dummy = new THREE.Object3D();
-    const particleWeightsAttribute =
-      this.raindropMesh.geometry.attributes.aWeight;
-    const particleVisibilityAttribute =
-      this.raindropMesh.geometry.attributes.aVisibility;
-
-    const cameraEuler = new THREE.Euler().setFromQuaternion(
-      camera.quaternion,
-      'YXZ'
-    );
-    const cameraEulerNoYaw = new THREE.Euler(
-      cameraEuler.x,
-      0,
-      cameraEuler.z,
-      'YXZ'
-    );
-    const cameraRotationMatrix = new THREE.Matrix4().makeRotationFromEuler(
-      cameraEulerNoYaw
-    );
-    const inverseCameraRotationMatrix = cameraRotationMatrix.clone().invert();
-
-    this.raindropMesh.material.uniforms.uCameraRotationMatrix.value.copy(
-      inverseCameraRotationMatrix
-    );
-
-    for (let i = 0; i < this.raindropMesh.count; ++i) {
-      this.raindropMesh.getMatrixAt(i, dummy.matrix);
-      dummy.matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);
-
-      if (this.particleWeights[i] < 0.5) {
-        dummy.position.y -= this.velocities[i];
-      }
-
-      const screenPos = dummy.position.clone().project(camera);
-
-      const isWithinFoV =
-        screenPos.x >= -0.8 &&
-        screenPos.x <= 0.6 &&
-        screenPos.y >= -1.0 &&
-        screenPos.y <= 1.0 &&
-        screenPos.z >= 0 &&
-        screenPos.z <= 1;
-
-      let isOccluded = false;
-      let maxVisibility = 1.0;
-      let deltaDepth = 0.0;
-
-      const isHigh = dummy.position.y > 2.0;
-
-      if (isWithinFoV) {
-        const depth = xrDepth.getDepth(
-          (screenPos.x + 1) / 2,
-          (screenPos.y + 1) / 2
-        );
-
-        const pointInCameraSpace = dummy.position
-          .clone()
-          .applyMatrix4(camera.matrixWorldInverse);
-
-        const distanceToCameraPlane = -pointInCameraSpace.z;
-
-        isOccluded = depth == 0 || depth < distanceToCameraPlane;
-        deltaDepth = Math.abs(distanceToCameraPlane - depth);
-
-        if (
-          this.particleWeights[i] == 0 &&
-          this.particleVisibility[i] > 0.5 &&
-          isOccluded &&
-          !isHigh
-        ) {
-          this.particleWeights[i] = 1;
-
-          if (depth < 0.3) {
-            maxVisibility = 0.0;
-          } else if (depth > 2.0) {
-            maxVisibility *= 0.5 + (4.0 - depth) / 4.0;
-          }
-        }
-      }
-
-      if (isWithinFoV) {
-        this.particleVisibility[i] =
-          isOccluded && !isHigh
-            ? clamp(0.6 - deltaDepth, 0.0, 0.6)
-            : maxVisibility;
-      } else {
-        this.particleVisibility[i] = 0.0;
-      }
-
-      if (dummy.position.y < 0) {
-        dummy.position.y = 0;
-        if (this.particleWeights[i] < 0.5) {
-          this.particleWeights[i] = 1;
-        }
-
-        this.particleVisibility[i] =
-          isOccluded && !isHigh ? 0.0 : maxVisibility;
-      }
-
-      if (this.particleWeights[i] > 0) {
-        this.particleWeights[i] += 1;
-      }
-
-      if (depthMesh.minDepth < 0.1) {
-        this.particleVisibility[i] = 0.0;
-      }
-
-      if (this.particleWeights[i] > kMaxAnimationFrames * kAnimationSpeed) {
-        this.respawnPrticle(dummy, i, camera, depthMesh);
-      }
-
-      particleVisibilityAttribute.setX(i, this.particleVisibility[i]);
-      particleWeightsAttribute.setX(i, this.particleWeights[i]);
-      dummy.updateMatrix();
-      this.raindropMesh.setMatrixAt(i, dummy.matrix);
-    }
-
-    this.raindropMesh.instanceMatrix.needsUpdate = true;
-    particleWeightsAttribute.needsUpdate = true;
-    particleVisibilityAttribute.needsUpdate = true;
-    this.raindropMesh.material.uniforms.uCameraPosition.value.copy(
-      camera.position
-    );
-  }
-
-  respawnPrticle(dummy, index, camera, depthMesh) {
-    let u = Math.random();
-    let v = Math.random();
-    const half = Math.random();
-    let vertex;
-    let inited = false;
-    let threshold = 0.05;
-    if (depthMesh.minDepth < 0.16) {
-      threshold = depthMesh.minDepth * 0.01;
-    }
-
-    threshold = 0.1;
-
-    if (Math.random() < threshold) {
-      u = u * 0.8 + 0.1;
-      v = v * 0.8 + 0.1;
-      this.raycaster.setFromCamera(
-        {x: u * 2.0 - 1.0, y: v * 2.0 - 1.0},
-        camera
-      );
-      const intersections = this.raycaster.intersectObject(depthMesh);
-      if (intersections.length > 0) {
-        vertex = intersections[0].point;
-        inited = true;
-      }
-    }
-
-    if (!inited) {
-      const theta = u * 2 * Math.PI;
-      let radius = Math.sqrt(v) * this.RANGE + 0.2;
-      if (half < 0.5) {
-        radius = Math.sqrt(v) * 0.7 + 0.3;
-      } else if (half < 0.7) {
-        radius = Math.sqrt(v) * 1.5 + 0.3;
-      }
-
-      vertex = {
-        x: radius * Math.cos(theta),
-        z: radius * Math.sin(theta),
-        y: 4.0,
-      };
-    }
-
-    vertex = DEBUG_SINGLE ? new THREE.Vector3(-1, 4, -1) : vertex;
-
-    dummy.position.set(vertex.x, vertex.y, vertex.z);
-    dummy.rotation.set(0, 0, 0);
-    this.particleWeights[index] = inited ? 1.0 : 0.0;
-  }
-}
-
-// --- RainScene inlined ---
-const ASSETS_PATH = 'https://cdn.jsdelivr.net/gh/xrblocks/assets@main/';
-
-class RainScene extends xb.Script {
-  rainParticles = new RainParticles();
-  cloud = new VolumetricCloud();
-
-  listener = null;
-  rainSound = null;
-
-  init() {
-    this.add(this.rainParticles);
-    this.rainParticles.init();
-    this.add(this.cloud);
-
-    this.listener = new THREE.AudioListener();
-    xb.core.camera.add(this.listener);
-
-    this.rainSound = new THREE.Audio(this.listener);
-    const audioLoader = new THREE.AudioLoader();
-    audioLoader.load(ASSETS_PATH + 'demos/rain/rain.opus', (buffer) => {
-      this.rainSound.setBuffer(buffer);
-      this.rainSound.setLoop(true);
-      this.rainSound.setVolume(0.5);
-      this.rainSound.play();
-      console.log('Rain audio loaded and playing.');
-    });
-
-    const startButton = document.getElementById('startButton');
-    if (startButton) {
-      startButton.addEventListener('click', () => {
-        this.startAudio();
-        startButton.remove();
-      });
-    }
-  }
-
-  startAudio() {
-    if (this.listener.context.state === 'suspended') {
-      this.listener.context.resume();
-    }
-
-    if (this.rainSound.buffer) {
-      this.rainSound.play();
-      console.log('Rain audio started by user gesture.');
-    }
-  }
-
-  update() {
-    const leftCamera = xb.getXrCameraLeft() || xb.core.camera;
-    this.rainParticles.update(leftCamera, xb.core.depth);
-    this.cloud.update(xb.core.camera, xb.core.depth);
-  }
-}
-
-const depthMeshColliderUpdateFps = xb.getUrlParamFloat(
-  'depthMeshColliderUpdateFps',
-  30
-);
-
-const options = new xb.Options();
-options.simulator.instructions.enabled = false;
-options.reticles.enabled = false;
-options.depth = new xb.DepthOptions(xb.xrDepthMeshPhysicsOptions);
-options.depth.depthMesh.colliderUpdateFps = depthMeshColliderUpdateFps;
-options.xrButton.startText = '<i id="xrlogo"></i> LET IT RAIN';
-options.xrButton.endText = '<i id="xrlogo"></i> MISSION COMPLETE';
-
-async function start() {
-  const rainScene = new RainScene();
-  xb.add(rainScene);
-  await xb.init(options);
-}
-
-document.addEventListener('DOMContentLoaded', function () {
-  start();
-});
-
-</script>
-  </body>
-</html>