master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_video_kinect.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D - kinect</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>
  <body>

    <video id="video" loop muted crossOrigin="anonymous" playsinline style="display:none">
      <source src="textures/kinect.webm">
      <source src="textures/kinect.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 zOffset;

      varying vec2 vUv;

      const float XtoZ = 1.11146; // tan(1.0144686 / 2.0) * 2.0;
      const float YtoZ = 0.83359; // tan(0.7898090 / 2.0) * 2.0;

      void main() {

        vUv = vec2(position.x / width, position.y / height);

        vec4 color = texture2D(map, vUv);
        float depth = (color.r + color.g + color.b) / 3.0;

        // Projection code by @kcmic

        float z = (1.0 - depth) * (farClipping - nearClipping) + nearClipping;

        vec4 pos = vec4(
          (position.x / width - 0.5) * z * XtoZ,
          (position.y / height - 0.5) * z * YtoZ,
          - z + zOffset,
          1.0);

        gl_PointSize = pointSize;
        gl_Position = projectionMatrix * modelViewMatrix * pos;

      }

    </script>

    <script id="fs" type="x-shader/x-fragment">

      uniform sampler2D map;

      varying vec2 vUv;

      void main() {

        vec4 color = texture2D(map, vUv);
        gl_FragColor = vec4(color.r, color.g, color.b, 0.2);

      }

    </script>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      import { GUI } from './jsm/libs/dat.gui.module.js';

      let scene, camera, renderer;
      let geometry, mesh, material;
      let mouse, center;

      init();
      animate();

      function init() {

        const container = document.createElement('div');
        document.body.appendChild(container);

        const info = document.createElement('div');
        info.id = 'info';
        info.innerHTML = '<a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - kinect';
        document.body.appendChild(info);

        camera = new v3d.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.set(0, 0, 500);

        scene = new v3d.Scene();
        center = new v3d.Vector3();
        center.z = - 1000;

        const video = document.getElementById('video');

        const texture = new v3d.VideoTexture(video);
        texture.minFilter = v3d.NearestFilter;

        const width = 640, height = 480;
        const nearClipping = 850, farClipping = 4000;

        geometry = new v3d.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 v3d.BufferAttribute(vertices, 3));

        material = new v3d.ShaderMaterial({

          uniforms: {

            "map": { value: texture },
            "width": { value: width },
            "height": { value: height },
            "nearClipping": { value: nearClipping },
            "farClipping": { value: farClipping },

            "pointSize": { value: 2 },
            "zOffset": { value: 1000 }

          },
          vertexShader: document.getElementById('vs').textContent,
          fragmentShader: document.getElementById('fs').textContent,
          blending: v3d.AdditiveBlending,
          depthTest: false, depthWrite: false,
          transparent: true

        });

        mesh = new v3d.Points(geometry, material);
        scene.add(mesh);

        const gui = new GUI();
        gui.add(material.uniforms.nearClipping, 'value', 1, 10000, 1.0).name('nearClipping');
        gui.add(material.uniforms.farClipping, 'value', 1, 10000, 1.0).name('farClipping');
        gui.add(material.uniforms.pointSize, 'value', 1, 10, 1.0).name('pointSize');
        gui.add(material.uniforms.zOffset, 'value', 0, 4000, 1.0).name('zOffset');

        video.play();

        //

        renderer = new v3d.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        mouse = new v3d.Vector3(0, 0, 1);

        document.addEventListener('mousemove', onDocumentMouseMove, false);

        //

        window.addEventListener('resize', onWindowResize, false);

      }

      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) * 8;
        mouse.y = (event.clientY - window.innerHeight / 2) * 8;

      }

      function animate() {

        requestAnimationFrame(animate);

        render();

      }

      function render() {

        camera.position.x += (mouse.x - camera.position.x) * 0.05;
        camera.position.y += (- mouse.y - camera.position.y) * 0.05;
        camera.lookAt(center);

        renderer.render(scene, camera);

      }

    </script>
  </body>
</html>