kinect2/examples/electron/renderer/demos/point-cloud-color.html at master · wouterverweirder/kinect2 · GitHub

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
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Kinect2 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 (Color)</h1>
      <button onclick="require('electron').remote.getCurrentWebContents().openDevTools()">open dev tools</button>
    </div>
    <p>
      This demo shows the colored 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 Kinect2 = require('kinect2');
        const kinect = new Kinect2();

        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({
          vertexColors: THREE.VertexColors
        });

        const DEPTH_WIDTH = 512;
        const DEPTH_HEIGHT = 424;
        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 color = new THREE.Color(0x000000);
          geom.colors.push(color);
        }

        const cloud = new THREE.Points(geom, material);
        scene.add(cloud);

        if(kinect.open()) {
          kinect.on('multiSourceFrame', (frame) => {
            if (!frame.rawDepth || !frame.rawDepth.buffer || !frame.depthColor || !frame.depthColor.buffer) {
              return;
            }
            const depthBuffer = frame.rawDepth.buffer;
            const depthColorBuffer = frame.depthColor.buffer;
            statsKinect.update();
            const nDepthMinReliableDistance = 500;
            const nDepthMaxDistance = 4500;
            const mapDepthToByte = nDepthMaxDistance / 256;
            let j = 0, k = 0;
            for(let i = 0; i < depthBuffer.length; i+=2) {
              let depth = (depthBuffer[i+1] << 8) + depthBuffer[i]; //get uint16 data from buffer
              if (depth <= nDepthMinReliableDistance || depth >= nDepthMaxDistance) depth = Number.MAX_VALUE; //push them far far away so we don't see them
              geom.vertices[j].z = (nDepthMaxDistance - depth) - 2000;
              const r = depthColorBuffer[k + 0];
              const g = depthColorBuffer[k + 1];
              const b = depthColorBuffer[k + 2];
              geom.colors[j].setRGB(r/255, g/255, b/255);
              j++;
              k+= 4;
            }
            geom.verticesNeedUpdate = true;
            geom.colorsNeedUpdate = true;
          });

          kinect.openMultiSourceReader({
            frameTypes: Kinect2.FrameType.rawDepth | Kinect2.FrameType.depthColor
          });
        }

        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>