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

@@ -0,0 +1,432 @@
+<!doctype html>
+<!-- reference: demos/screenwiper -->
+<html lang="en">
+  <head>
+    <title>Screen Wiper</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>
+    <audio loop id="music" preload="auto" style="display: none">
+      <source
+        src="https://cdn.jsdelivr.net/gh/xrblocks/assets@main/musicLibrary/BackgroundMusic4.mp3"
+        type="audio/mpeg"
+      />
+    </audio>
+    <script type="module">
+import 'xrblocks/addons/simulator/SimulatorAddons.js';
+import * as THREE from 'three';
+import {ShaderPass} from 'three/addons/postprocessing/ShaderPass.js';
+import * as xb from 'xrblocks';
+// --- AlphaShader inlined ---
+const AlphaShader = {
+  name: 'AlphaShader',
+  defines: {
+    DEG_TO_RAD: 3.14159265359 / 180.0,
+  },
+  uniforms: {
+    tDiffuse: {value: null},
+    uWiperDegrees: {value: 10.0},
+    uLeftWiperActive: {value: false},
+    uLeftHandCartesianCoordinate: {value: new THREE.Vector3(0.0, -1.0, 0.0)},
+    uRightWiperActive: {value: false},
+    uRightHandCartesianCoordinate: {value: new THREE.Vector3(0.0, -1.0, 0.0)},
+    uReturnSpeed: {value: 0.005},
+  },
+  vertexShader: /* glsl */ `
+          varying vec2 vUv;
+          void main() {
+              vUv = uv;
+              gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+          }`,
+  fragmentShader: /* glsl */ `
+          #include <common>
+          varying vec2 vUv;
+          uniform sampler2D tDiffuse;
+          uniform float uWiperDegrees;
+          uniform bool uLeftWiperActive;
+          uniform vec3 uLeftHandCartesianCoordinate;
+          uniform bool uRightWiperActive;
+          uniform vec3 uRightHandCartesianCoordinate;
+          uniform float uReturnSpeed;
+          vec3 sphericalToCartesian(vec3 spherical) {
+            float x = spherical.x * cos(spherical.y) * sin(spherical.z);
+            float y = spherical.x * cos(spherical.z);
+            float z = spherical.x * sin(spherical.y) * sin(spherical.z);
+            return vec3(x, y, z);
+          }
+          float getWiperValue(bool wiperActive, vec3 handCartesianCoordinate) {
+            if (!wiperActive) return 1.0;
+            vec3 cartesianCoordinate = sphericalToCartesian(vec3(1.0, PI - vUv.x * 2.0 * PI, PI - vUv.y * PI));
+            float cosineSimilarity = dot(handCartesianCoordinate, cartesianCoordinate);
+            float wiperValue = 1.0 - smoothstep(cos(uWiperDegrees * DEG_TO_RAD), 1.0, cosineSimilarity);
+            wiperValue = 0.95 + 0.05 * wiperValue;
+            return wiperValue;
+          }
+          void main() {
+              float prevFrameValue = texture(tDiffuse, vUv).g;
+              float newFrameValue = prevFrameValue + uReturnSpeed * (uLeftWiperActive || uRightWiperActive ? 0.0 : 1.0);
+              newFrameValue *= getWiperValue(uLeftWiperActive, uLeftHandCartesianCoordinate);
+              newFrameValue *= getWiperValue(uRightWiperActive, uRightHandCartesianCoordinate);
+              gl_FragColor = vec4(vec3(newFrameValue), 1.0);
+          }`,
+};
+// --- ClearShader inlined ---
+const ClearShader = {
+  name: 'ClearShader',
+  defines: {
+    DEG_TO_RAD: 3.14159265359 / 180.0,
+  },
+  uniforms: {
+    uClearColor: {
+      value: new THREE.Vector4(1.0, 1.0, 1.0, 1.0),
+    },
+  },
+  vertexShader: /* glsl */ `
+          varying vec2 vUv;
+          void main() {
+              vUv = uv;
+              gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+          }`,
+  fragmentShader: /* glsl */ `
+          #include <common>
+          varying vec2 vUv;
+          uniform vec4 uClearColor;
+          void main() {
+            gl_FragColor = uClearColor;
+          }`,
+};
+// --- ScreenWiperShader inlined ---
+const noise_texture = new THREE.TextureLoader().load(
+  'screenwiper_assets/Noise.png'
+);
+noise_texture.wrapS = THREE.RepeatWrapping;
+noise_texture.wrapT = THREE.RepeatWrapping;
+const color_map = new THREE.TextureLoader().load(
+  'screenwiper_assets/ColorMap.png'
+);
+color_map.wrapS = THREE.RepeatWrapping;
+const ScreenWiperShader = {
+  name: 'ScreenWiperShader',
+  defines: {
+    DEG_TO_RAD: 3.14159265359 / 180.0,
+  },
+  uniforms: {
+    uTexture: {value: noise_texture},
+    uMask: {value: null},
+    uColorMap: {value: color_map},
+    uTime: {value: new THREE.Vector4(0.0, 0.0, 0.0, 0.0)},
+    uMoveSpeed: {value: 0.1},
+    uColorSpeed: {value: 0.2},
+    uPulseSpeed: {value: 4.0},
+    uPulseAmount: {value: 0.025},
+    uHoleColor: {
+      value: new THREE.Vector4(
+        49.0 / 255,
+        103.0 / 255,
+        154.0 / 255,
+        64.0 / 255
+      ),
+    },
+  },
+  vertexShader: /* glsl */ `
+          varying vec2 vUv;
+          void main() {
+              vUv = uv;
+              gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+          }`,
+  fragmentShader: /* glsl */ `
+          #include <common>
+          varying vec2 vUv;
+          uniform sampler2D uTexture;
+          uniform sampler2D uMask;
+          uniform sampler2D uColorMap;
+          uniform vec4 uTime;
+          uniform float uColorSpeed;
+          uniform float uMoveSpeed;
+          uniform float uPulseSpeed;
+          uniform float uPulseAmount;
+          uniform vec4 uHoleColor;
+          void main() {
+            // Sample at uv scale 1.
+            vec2 uv1 = vUv;
+            uv1.x += sin(uTime.x * 4.89 * uMoveSpeed);
+            uv1.y += uTime.y * .123 * uMoveSpeed;
+            vec4 tex1 = texture(uTexture, 2.0 * uv1);
+            // Sample at uv scale 2.
+            vec2 uv2 = vUv * 2.0;
+            uv2.x += uTime.y * 0.277 * uMoveSpeed;
+            uv2.y += sin(uTime.x * 6.231 * uMoveSpeed);
+            vec4 tex2 = texture(uTexture, 2.0 * uv2);
+            float totalValue = (tex1.r * 0.75) + (tex2.r * 0.25);
+            vec4 mapColor = texture(uColorMap, vec2(totalValue + uTime.x * uColorSpeed, 0.5));
+            vec4 col = saturate(mapColor);
+            col.a = 1.0;
+            // Mask.
+            float pulseInside = sin(uTime.y * uPulseSpeed + vUv.x * 150.0) * uPulseAmount;
+            float pulseOutside = cos(uTime.y * uPulseSpeed + vUv.x * 150.0) * uPulseAmount;
+            vec4 mask = texture(uMask, vUv);
+            vec4 tintedCol = mix(col, uHoleColor, 0.5);
+            col = mix(tintedCol, col, step(0.8 + pulseOutside, mask.r));
+            col.a = mix(0.0, max(col.a, tintedCol.a), step(0.5 + pulseInside, mask.r));
+            gl_FragColor = col;
+          }`,
+};
+// --- ScreenWiper inlined ---
+const raycaster = new THREE.Raycaster();
+const clearpass = new ShaderPass(ClearShader);
+clearpass.renderToScreen = false;
+class ScreenWiper extends THREE.Mesh {
+  activeControllers = [];
+  constructor() {
+    const NATIVE_RESOLUTION = 1024;
+    const RESOLUTION_MULTIPLIER = 4;
+    const RESOLUTION = NATIVE_RESOLUTION * RESOLUTION_MULTIPLIER;
+    const renderTargetA = new THREE.WebGLRenderTarget(RESOLUTION, RESOLUTION);
+    const renderTargetB = new THREE.WebGLRenderTarget(RESOLUTION, RESOLUTION);
+    const geometry = new THREE.SphereGeometry(15, 32, 16);
+    const material = new THREE.ShaderMaterial({
+      name: 'ScreenWiperShader',
+      defines: Object.assign({}, ScreenWiperShader.defines),
+      uniforms: THREE.UniformsUtils.clone(ScreenWiperShader.uniforms),
+      vertexShader: ScreenWiperShader.vertexShader,
+      fragmentShader: ScreenWiperShader.fragmentShader,
+      transparent: true,
+      side: THREE.DoubleSide,
+    });
+    super(geometry, material);
+    this.renderTargetA = renderTargetA;
+    this.renderTargetB = renderTargetB;
+    this.shaderpass = new ShaderPass(AlphaShader);
+    this.controllerActiveUniforms = [
+      this.shaderpass.material.uniforms.uLeftWiperActive,
+      this.shaderpass.material.uniforms.uRightWiperActive,
+    ];
+    this.controllerCartesianCoordinateUniforms = [
+      this.shaderpass.material.uniforms.uLeftHandCartesianCoordinate,
+      this.shaderpass.material.uniforms.uRightHandCartesianCoordinate,
+    ];
+    this.worldPosition = new THREE.Vector3();
+    this.starttime = Date.now();
+  }
+  clear(renderer) {
+    const xrEnabled = renderer.xr.enabled;
+    const xrTarget = renderer.getRenderTarget();
+    renderer.xr.enabled = false;
+    clearpass.render(renderer, this.renderTargetA, null);
+    clearpass.render(renderer, this.renderTargetB, null);
+    this.material.uniforms.uMask.value = this.renderTargetB.texture;
+    renderer.xr.enabled = xrEnabled;
+    renderer.setRenderTarget(xrTarget);
+  }
+  update(renderer) {
+    const camera = renderer.xr.getCamera().cameras[0];
+    if (camera != null) {
+      this.position.copy(camera.position);
+    }
+    this.getWorldPosition(this.worldPosition);
+    for (let i = 0; i < 2; i++) {
+      if (i < this.activeControllers.length) {
+        this.controllerActiveUniforms[i].value = true;
+        const controller = this.activeControllers[i];
+        raycaster.setFromXRController(controller);
+        const intersects = raycaster.intersectObject(this);
+        if (intersects.length > 0) {
+          this.controllerCartesianCoordinateUniforms[i].value
+            .copy(intersects[0].point)
+            .sub(this.worldPosition)
+            .normalize();
+        }
+      } else {
+        this.controllerActiveUniforms[i].value = false;
+      }
+    }
+    const elapsedTime = (Date.now() - this.starttime) / 1000;
+    if (this.material.uniforms.uTime) {
+      this.material.uniforms.uTime.value.set(
+        elapsedTime / 20,
+        elapsedTime,
+        elapsedTime * 2,
+        elapsedTime * 3
+      );
+    }
+    const xrEnabled = renderer.xr.enabled;
+    const xrTarget = renderer.getRenderTarget();
+    renderer.xr.enabled = false;
+    [this.renderTargetA, this.renderTargetB] = [
+      this.renderTargetB,
+      this.renderTargetA,
+    ];
+    this.shaderpass.renderToScreen = false;
+    this.shaderpass.render(renderer, this.renderTargetB, this.renderTargetA);
+    this.material.uniforms.uMask.value = this.renderTargetB.texture;
+    renderer.xr.enabled = xrEnabled;
+    renderer.setRenderTarget(xrTarget);
+  }
+  addActiveController(controller) {
+    this.activeControllers.push(controller);
+  }
+  removeActiveController(controller) {
+    const index = this.activeControllers.indexOf(controller);
+    if (index != -1) {
+      this.activeControllers.splice(index, 1);
+    }
+  }
+  dispose() {
+    this.renderTargetA.dispose();
+    this.renderTargetB.dispose();
+    this.shaderpass.dispose();
+    this.material.dispose();
+  }
+  startTransition(passthrough) {
+    this.shaderpass.material.uniforms.uReturnSpeed.value = passthrough
+      ? -0.005
+      : 0.005;
+  }
+}
+// --- ScreenWiperScene inlined ---
+class ScreenWiperScene extends xb.Script {
+  screenWiper = new ScreenWiper({
+    width: 1.0,
+    height: 1.0,
+    color: new THREE.Color(0x000000),
+    speed: 0.5,
+    direction: 'right',
+    start: 0.0,
+    end: 1.0,
+  });
+  constructor(opts) {
+    super(opts);
+    this.add(this.screenWiper);
+  }
+  init() {
+    this.screenWiper.clear(xb.core.renderer);
+  }
+  onSelectStart(event) {
+    this.screenWiper.addActiveController(event.target);
+  }
+  onSelectEnd(event) {
+    this.screenWiper.removeActiveController(event.target);
+  }
+  update() {
+    this.screenWiper.update(xb.core.renderer);
+  }
+}
+const options = new xb.Options();
+options.simulator.instructions.enabled = false;
+options.antialias = true;
+options.reticles.enabled = true;
+options.visualizeRays = true;
+function start() {
+  xb.add(new ScreenWiperScene());
+  xb.init(options);
+}
+document.addEventListener('DOMContentLoaded', function () {
+  start();
+});
+</script>
+  </body>
+</html>