forked from wouterverweirder/kinect-azure
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpoint-cloud-greyscale.html
114 lines (100 loc) · 4.37 KB
/
point-cloud-greyscale.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Kinect Azure Example</title>
<link rel="stylesheet" href="../assets/vendors/bootstrap-4.3.1-dist/css/bootstrap.css">
<link rel="stylesheet" href="../assets/vendors/bootstrap-4.3.1-dist/css/docs.min.css">
</head>
<body class="container-fluid py-3">
<div class="d-flex align-items-baseline justify-content-between">
<h1 class="bd-title">Point Cloud (Greyscale)</h1>
<button onclick="require('electron').remote.getCurrentWebContents().openDevTools()">open dev tools</button>
</div>
<p>
This demo shows the greyscale point cloud in a three.js 3D environment.
</p>
<div class="embed-responsive embed-responsive-16by9 mb-3">
<canvas class="embed-responsive-item" id="outputCanvas"></canvas>
</div>
<div class="row">
<div class="col col-auto">Renderer: <div id="statsRenderer"></div></div>
<div class="col col-auto">Kinect: <div id="statsKinect"></div></div>
</div>
<script src="../assets/vendors/stats.min.js"></script>
<script src="../assets/vendors/three.js/build/three.js"></script>
<script src="../assets/vendors/three.js/examples/js/controls/OrbitControls.js"></script>
<script>
{
const statsRenderer = new Stats();
statsRenderer.dom.style.cssText = '';
document.getElementById('statsRenderer').appendChild( statsRenderer.dom );
const statsKinect = new Stats();
statsKinect.dom.style.cssText = '';
document.getElementById('statsKinect').appendChild( statsKinect.dom );
const KinectAzure = require('kinect-azure');
const kinect = new KinectAzure();
const canvas = document.getElementById('outputCanvas');
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
const renderer = new THREE.WebGLRenderer({
canvas
});
renderer.setPixelRatio(window.devicePixelRatio);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 30, canvas.clientWidth / canvas.clientHeight, 1, 10000 );
camera.position.set(0, 0, 2000);
camera.lookAt(0, 0, 0);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
const geom = new THREE.Geometry();
const material = new THREE.PointsMaterial();
const DEPTH_WIDTH = 640;
const DEPTH_HEIGHT = 576;
const numPoints = DEPTH_WIDTH * DEPTH_HEIGHT;
for (var i = 0; i < numPoints; i++) {
const x = (i % DEPTH_WIDTH) - DEPTH_WIDTH * 0.5;
const y = DEPTH_HEIGHT / 2 - Math.floor(i / DEPTH_WIDTH);
const particle = new THREE.Vector3(x, y, 0);
geom.vertices.push(particle);
}
const cloud = new THREE.Points(geom, material);
scene.add(cloud);
const depthModeRange = kinect.getDepthModeRange(KinectAzure.K4A_DEPTH_MODE_NFOV_UNBINNED);
if(kinect.open()) {
kinect.startCameras({
depth_mode: KinectAzure.K4A_DEPTH_MODE_NFOV_UNBINNED
});
kinect.startListening((data) => {
statsKinect.update();
const newDepthData = Buffer.from(data.depthImageFrame.imageData);
let pointIndex = 0;
for (let i = 0; i < newDepthData.length; i+=2) {
const depthValue = newDepthData[i+1] << 8 | newDepthData[i];
if (depthValue > depthModeRange.min && depthValue < depthModeRange.max) {
geom.vertices[pointIndex].z = depthValue;
} else {
geom.vertices[pointIndex].z = Number.MAX_VALUE;
}
pointIndex++;
}
geom.verticesNeedUpdate = true;
});
}
const resize = () => {
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
};
window.addEventListener('resize', resize);
const animate = () => {
statsRenderer.update();
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
// expose the kinect instance to the window object in this demo app to allow the parent window to close it between sessions
window.kinect = kinect;
animate();
}
</script>
</body>
</html>