From adcd73f1eb6b39e6a7339b73eafb531d2638c4d8 Mon Sep 17 00:00:00 2001
From: buncccc <ropebunnyvj@gmail.com>
Date: Sat, 5 Apr 2025 10:30:41 +1300
Subject: [PATCH] Add index.html from glitch.me

---
 Assets/Website/index.html | 269 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 269 insertions(+)
 create mode 100644 Assets/Website/index.html
diff --git a/Assets/Website/index.html b/Assets/Website/index.html
new file mode 100644
index 0000000..6c5da64
--- /dev/null
+++ b/Assets/Website/index.html
@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>three.js - kinect</title>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
+    />
+  </head>
+  <body>
+    <video
+      id="video"
+      loop
+      muted
+      crossorigin="anonymous"
+      playsinline
+      style="display: none"
+    >
+      <!--       <source
+        src="https://cdn.glitch.global/5bef24a3-b00f-440a-b7ad-33368d47b340/2022-07-12%2017-20-08.mp4?v=1737668838585"
+        type="video/mp4"
+      /> -->
+      <source
+        src="https://stream.vrcdn.live/live/ropebunny.live.mp4"
+        type="video/mp4"
+      />
+    </video>
+
+    <script id="vs" type="x-shader/x-vertex">
+
+      uniform sampler2D map;
+
+      uniform float width;
+      uniform float height;
+      uniform float nearClipping, farClipping;
+
+      uniform float pointSize;
+      uniform float boxSize;
+      uniform int numCameras;
+
+      varying vec2 vUv;
+      
+      void main() {
+
+      	vUv = vec2( position.x / width, position.y / height );
+
+      	vec4 color = texture2D( map, vUv*vec2(0.5,0.333)+vec2(0,0.333));
+      	float depth = ( color.r + color.g + color.b ) / 3.0;
+
+      	// Projection code by @kcmic
+
+      	float z = depth * (farClipping-nearClipping) + nearClipping;
+
+      	vec4 pos = vec4(
+      		( position.x / width - 0.5 )*boxSize,
+      		( position.y / height - 0.5 )*boxSize,
+      		z*boxSize*0.5,
+      		1.0);
+
+      	gl_PointSize = pointSize;
+      	gl_Position = projectionMatrix * modelViewMatrix * pos;
+
+      }
+    </script>
+
+    <script id="fs" type="x-shader/x-fragment">
+      uniform sampler2D map;
+      uniform int numCameras;
+      
+      varying vec2 vUv;
+
+      void main() {
+        if (numCameras == 2) {
+            gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0);
+        }
+        else {      
+          vec4 color = texture2D( map, vUv*vec2(0.5,0.333)+vec2(0.0,0.666) );
+          gl_FragColor = vec4( color.r, color.g, color.b, 1.0);
+        }
+      }
+    </script>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "https://threejs.org/build/three.module.js",
+          "three/addons/": "https://threejs.org/examples/jsm/"
+        }
+      }
+    </script>
+    <script type="module">
+      import * as THREE from "three";
+
+      import { GUI } from "three/addons/libs/lil-gui.module.min.js";
+
+      let scene, camera, renderer;
+      let geometry, mesh, material;
+      let mouse, center;
+      
+      let numCameras;
+      
+      const cameraFloats = [];
+
+      
+      init();
+
+      function pixelArrayToUint32(imageData, canvasWidth, rowNumber) {
+
+        let buffer = imageData;
+        let result = 0;
+        
+        for (let i = 0; i < 32; i++) {
+          let thisBit = (buffer[(i*4) + (rowNumber*(canvasWidth*4))] > 128) & 1;
+          result |= (thisBit << (31-i));
+
+          
+        }
+        return result;
+      }
+      
+      // convert unsigned integer 32 to float
+      function decodeUint32ToFloat(theInteger) {
+        const buffer = new ArrayBuffer(4);
+        const view = new DataView(buffer);
+        view.setUint32(0, theInteger); // "at address 0, write theInteger to the stack as a 32 bit integer"
+        // console.log(view.getFloat32(0)); // "at address 0, read the stack as a Float32"
+        return view.getFloat32(0);
+      }
+
+      function init() {
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+
+        const info = document.createElement("div");
+        info.id = "info";
+        info.innerHTML =
+          '<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - kinect';
+        document.body.appendChild(info);
+
+        camera = new THREE.PerspectiveCamera(
+          50,
+          window.innerWidth / window.innerHeight,
+          1,
+          10000
+        );
+        camera.position.set(0, 0, 1000);
+
+        scene = new THREE.Scene();
+        center = new THREE.Vector3();
+        center.z = 0;
+
+        const video = document.getElementById("video");
+
+        const texture = new THREE.VideoTexture(video);
+        texture.minFilter = THREE.NearestFilter;
+        texture.generateMipmaps = false;
+
+        const width = 640,
+          height = 480;
+        const nearClipping = 0,
+          farClipping = 5,
+          pointSize = 5,
+          boxSize = 500;
+
+
+        geometry = new THREE.BufferGeometry();
+
+        const vertices = new Float32Array(width * height * 3);
+
+        for (let i = 0, j = 0, l = vertices.length; i < l; i += 3, j++) {
+          vertices[i] = j % width;
+          vertices[i + 1] = Math.floor(j / width);
+        }
+
+        geometry.setAttribute(
+          "position",
+          new THREE.BufferAttribute(vertices, 3)
+        );
+
+        material = new THREE.ShaderMaterial({
+          uniforms: {
+            map: { value: texture },
+            width: { value: width },
+            height: { value: height },
+            nearClipping: { value: nearClipping },
+            farClipping: { value: farClipping },
+            boxSize: { value: boxSize },
+            pointSize: { value: pointSize },
+            numCameras: { value: numCameras },
+          },
+          vertexShader: document.getElementById("vs").textContent,
+          fragmentShader: document.getElementById("fs").textContent,
+          blending: THREE.NormalBlending,
+          depthTest: true,
+          depthWrite: true,
+          transparent: true,
+        });
+
+        mesh = new THREE.Points(geometry, material);
+        scene.add(mesh);
+
+        const gui = new GUI();
+        gui
+          .add(material.uniforms.nearClipping, "value", 0, 1, nearClipping)
+          .name("nearClipping");
+        gui
+          .add(material.uniforms.farClipping, "value", 1, 10, farClipping)
+          .name("farClipping");
+        gui
+          .add(material.uniforms.pointSize, "value", 1, 10, pointSize)
+          .name("pointSize");
+        gui
+          .add(material.uniforms.boxSize, "value", 1, 1000, boxSize)
+          .name("boxSize");
+
+        video.play();
+
+        //
+        function animate() {
+          camera.position.x = -mouse.x;
+          camera.position.y = mouse.y;
+          camera.lookAt(center);
+                    
+          let c = document.getElementById("debugCanvas");
+
+          let cont = c.getContext("2d");
+          cont.drawImage(texture.image, 0,0);
+          let d = cont.getImageData(0,0,c.width,c.height);
+          
+          material.uniforms.numCameras.value = decodeUint32ToFloat(pixelArrayToUint32(d.data, c.width, 0)) // obtains numCameras
+          for(let rowNr = 1; rowNr < 17; rowNr++) {
+            cameraFloats[rowNr-1] = decodeUint32ToFloat(pixelArrayToUint32(d.data, c.width, rowNr))
+          }
+
+          renderer.render(scene, camera);
+        }
+        renderer = new THREE.WebGLRenderer();
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setAnimationLoop(animate);
+        container.appendChild(renderer.domElement);
+
+        mouse = new THREE.Vector3(0, 0, 1);
+
+        document.addEventListener("mousemove", onDocumentMouseMove);
+
+        //
+
+        window.addEventListener("resize", onWindowResize);
+      }
+
+      function onWindowResize() {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+
+        renderer.setSize(window.innerWidth, window.innerHeight);
+      }
+
+      function onDocumentMouseMove(event) {
+        mouse.x = event.clientX - window.innerWidth / 2;
+        mouse.y = event.clientY - window.innerHeight / 2;
+      }
+
+
+    </script>
+    <canvas id="debugCanvas" width="256" height="256" />
+  </body>
+</html>
