mudra-skills 3.0.2 → 3.0.4

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

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