Add index.html from glitch.me
This commit is contained in:
parent
54957ac5f0
commit
adcd73f1eb
269
Assets/Website/index.html
Normal file
269
Assets/Website/index.html
Normal file
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user