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/rain.html ADDED Viewed

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