gesture/index.html

<!DOCTYPE html>
<html>
<head>
  <title>Depth Capture Based Hand Interaction Demo</title>
  <script src="../libs/ammo.js/ammo.js"></script>
  <script src="../libs/gl-matrix.js"></script>
  <script src="../libs/picogl.js/picogl.js"></script>
  <script src="../libs/picogl.js/utils.js"></script>
  <script src="../depth-camera.js"></script>
  <script src="depth_and_segments.js"></script>
</head>
<style>
html {
  overflow: hidden;
}
body {
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', 'Noto', sans-serif;
  line-height: 1.5;
  background-color: #fbfbfb;
  margin: 0;
  text-align:center;
}
.info {
  position: absolute;
  top: 0px; width: 100%;
  padding: 5px;
  color: gray;
}
#timer {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
}
#rotate-control {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: black;
  visibility: hidden; /*it isn't that usable*/
}
</style>
<body>
  <div class="info">
    Hand physics - depth camera capture demo.
    <div>
      <a href="https://github.com/intel/depth-camera-web-demo">Source code on GitHub</a>
    </div>
    <div id="console" style="color: red; font-size: x-large;"></div>

  </div>
  <div id="rotate-control">
    Rotate - head mounted camera: <input id="rotate-toggle" type="checkbox" checked>
  </div>  
  <canvas id="gl-canvas"></canvas>
  <script id="shadow-vs" type="x-vertex-shader">
    #version 300 es

    layout(location=0) in vec4 aPosition;

    uniform mat4 uMVP;
    void main() {
      gl_Position = uMVP * aPosition;
    }
  </script>
  <script id="shadow-fs" type="x-fragment-shader">
    #version 300 es
    precision highp float;

    void main() {
    
    }
  </script> 
  <script id="main-vs" type="x-vertex-shader">
    #version 300 es

    layout(location=0) in vec4 aPosition;
    layout(location=1) in vec3 aNormal;
    layout(location=2) in vec2 aTexCoord;

    uniform mat4 uModelMatrix;
    uniform mat4 uMVP;
    uniform mat4 uMVPFromLight;
    
    out vec3 vPosition;
    out vec3 vNormal;
    out vec2 vTexCoord;
    out vec4 vPositionFromLight;
    out vec3 vModelPosition;
    void main() {
      gl_Position = uMVP * aPosition;

      vModelPosition = vec3(aPosition);
      vPosition = vec3(uModelMatrix * aPosition);
      vNormal = vec3(uModelMatrix * vec4(aNormal, 0.0));
      vTexCoord = aTexCoord;

      vPositionFromLight = uMVPFromLight * aPosition;
    }
  </script>
  <script id="main-fs" type="x-fragment-shader">
    #version 300 es
    precision highp float;
    precision highp sampler2DShadow;

    uniform vec3 uLightPosition;
    uniform vec3 uEyePosition;
    uniform float opacity;
    uniform sampler2D uTextureMap;
    uniform sampler2DShadow uShadowMap;
    uniform float uWithLighting;

    in vec3 vPosition;
    in vec3 vNormal;
    in vec2 vTexCoord;
    in vec4 vPositionFromLight;
    in vec3 vModelPosition;

    out vec4 fragColor;
    void main() {
      vec3 shadowCoord = (vPositionFromLight.xyz / vPositionFromLight.w) / 2.0 + 0.5;
      shadowCoord.z -= 0.0015;
      float shadow = texture(uShadowMap, shadowCoord);

      vec4 baseColor = texture(uTextureMap, vTexCoord) * uWithLighting;
      baseColor.a = opacity;

      vec3 normal = normalize(vNormal);
      vec3 eyeDirection = normalize(uEyePosition - vPosition);
      vec3 lightDirection = normalize(uLightPosition - vPosition);
      vec3 reflectionDirection = reflect(-lightDirection, normal);
      float diffuse = shadow * max(dot(lightDirection, normal), 0.0) * 0.7;
      float ambient = 0.3;
      float specular = shadow * pow(max(dot(reflectionDirection, eyeDirection), 0.0), 20.0) * 0.7;

      fragColor = vec4((ambient + diffuse + specular) * baseColor.rgb, baseColor.a);
    }
  </script> 
  <script type="text/javascript">
    "use strict";
    let error = window.console.error;
    window.console.error = (message, ...rest) => {
      let target = document.querySelector('#console');
      error.call(window.console, message, ...rest);

      if (message instanceof Error) {
        message = `${message.name}: ${message.message}`;
      }

      target.innerHTML += `${message}<br>`;
    }

    utils.addTimerElement();

    var canvas = document.getElementById("gl-canvas");
    if (!utils.testWebGL2()) {
      console.error("WebGL 2 not available");
      document.body.innerHTML = "This example requires WebGL 2 which is unavailable on this system."
    }

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    var app = PicoGL.createApp(canvas, {alpha: true})
    .clearColor(0.0, 0.0, 0.0, 1.0)
    .depthTest()
    .cullBackfaces();

    let physics;
    let depthseg = new DepthAndSegments(app.gl);
    const DEBUG_DRAW_BONES = false;

    document.getElementById("rotate-toggle").addEventListener("change", function() {
      depthseg.setXZFlip(this.checked);
    });

    var timer = app.createTimer();

    // SET UP SHADOW PROGRAM
    var shadowVsSource =  document.getElementById("shadow-vs").text.trim();
    var shadowFsSource =  document.getElementById("shadow-fs").text.trim();
    var shadowProgram = app.createProgram(shadowVsSource, shadowFsSource);
    var shadowBuffer = app.createFramebuffer().depthTarget({compareMode: PicoGL.COMPARE_REF_TO_TEXTURE,
                                                            minFilter: app.gl.LINEAR,
                                                            magFilter: app.gl.NEAREST_MIPMAP_LINEAR});

    // SET UP MAIN PROGRAM
    var vsSource =  document.getElementById("main-vs").text.trim();
    var fsSource =  document.getElementById("main-fs").text.trim();
    var mainProgram = app.createProgram(vsSource, fsSource);

    // GEOMETRY
    var box = utils.createBox({dimensions: [1.0, 1.0, 1.0]})
    var positions = app.createVertexBuffer(PicoGL.FLOAT, 3, box.positions);
    var normals = app.createVertexBuffer(PicoGL.FLOAT, 3, box.normals);
    var uv = app.createVertexBuffer(PicoGL.FLOAT, 2, box.uvs);

    var boxArray = app.createVertexArray()
        .vertexAttributeBuffer(0, positions)
        .vertexAttributeBuffer(1, normals)
        .vertexAttributeBuffer(2, uv);

    const sphere = utils.createSphere({longBands: 8, latBands: 8});
    const spositions = app.createVertexBuffer(PicoGL.FLOAT, 3, sphere.positions);
    const snormals = app.createVertexBuffer(PicoGL.FLOAT, 3, sphere.normals);
    const suv = app.createVertexBuffer(PicoGL.FLOAT, 2, sphere.uvs);
    const sindices = app.createIndexBuffer(PicoGL.UNSIGNED_SHORT, 3, sphere.indices);

    const sphereArray = app.createVertexArray()
        .vertexAttributeBuffer(0, spositions)
        .vertexAttributeBuffer(1, snormals)
        .vertexAttributeBuffer(2, suv)
        .indexBuffer(sindices);    

    const plane_uvs = box.uvs.slice(0);
    // Tile them for ground tile.
    for (let i = 0; i < plane_uvs.length; i++)
      plane_uvs[i] = plane_uvs[i] * 12;
    const plane_uv = app.createVertexBuffer(PicoGL.FLOAT, 2, plane_uvs);
    const planeArray = app.createVertexArray()
        .vertexAttributeBuffer(0, positions)
        .vertexAttributeBuffer(1, normals)
        .vertexAttributeBuffer(2, plane_uv);

    // UNIFORMS
    var projMatrix = mat4.create();
    var viewMatrix = mat4.create();
    var eyePosition = vec3.fromValues(0, 0.5, 0.3);
    mat4.lookAt(viewMatrix, eyePosition, vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0));

    var viewProjMatrix = mat4.create();
    let inverseViewProjMatrix = mat4.create();
    let depth_mvp = depthseg.getMVPMatrix();
    const depth_to_world_transform = mat4.create();
    const world_to_depth_transform = mat4.create();

    var lightPosition = vec3.fromValues(0.6, 0.5, 0.1);
    var lightViewMatrix = mat4.create();
    var lightViewProjMatrix = mat4.create();
    const light_position_depth = vec3.create();
    mat4.lookAt(lightViewMatrix, lightPosition, vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0));
    updateMatrices();    

    function updateMatrices() {
      mat4.perspective(projMatrix, Math.PI / 2, app.width / app.height, 0.1, 10.0);
      mat4.multiply(viewProjMatrix, projMatrix, viewMatrix);
      mat4.multiply(lightViewProjMatrix, projMatrix, lightViewMatrix);
      mat4.invert(inverseViewProjMatrix, viewProjMatrix);
      depth_mvp = depthseg.getMVPMatrix();
      mat4.multiply(depth_to_world_transform, inverseViewProjMatrix, depth_mvp);
      mat4.invert(world_to_depth_transform, depth_to_world_transform);
      vec3.transformMat4(light_position_depth, lightPosition, world_to_depth_transform);
    }

    // OBJECT DESCRIPTIONS
    var boxes = [
      {
        translate: [0, 0, 0],
        quat: [0, 0, 0, 1],
        scale: [3, 0.05, 3],
        mvpMatrix: mat4.create(),
        modelMatrix: mat4.create(),
        lightMvpMatrix: mat4.create(),
        mainDrawCall: null,
        shadowDrawCall: null,
        array: planeArray,
        mass: 0, // ground
        visible: true,
        ground: 1,
        opacity: 0.7
      },
      { // wall
        translate: [0, 0, -0.4],
        quat: [-0.1, 0, 0, 1],
        scale: [3, 1, 0.05],
        mvpMatrix: mat4.create(),
        modelMatrix: mat4.create(),
        lightMvpMatrix: mat4.create(),
        mainDrawCall: null,
        shadowDrawCall: null,
        array: planeArray,
        mass: 0, // ground
        visible: true,
        ground: 1,
        opacity: 1
      },
      { // nearest wall
        translate: [0, 0, 0.4],
        quat: [0, 0, 0, 1],
        scale: [3, 1, 0.05],
        mvpMatrix: mat4.create(),
        modelMatrix: mat4.create(),
        lightMvpMatrix: mat4.create(),
        mainDrawCall: null,
        shadowDrawCall: null,
        array: planeArray,
        mass: 0, // ground
        visible: true,
        ground: 1,
        opacity: 0.2
      },
      { // wall to the right, not visible to let the light in.
        translate: [0.5, 0, 0],
        quat: [0, -0.2, 0, 1],
        scale: [0.05, 1, 3],
        mvpMatrix: mat4.create(),
        modelMatrix: mat4.create(),
        lightMvpMatrix: mat4.create(),
        mainDrawCall: null,
        shadowDrawCall: null,
        array: planeArray,
        mass: 0, // ground
        visible: false,
        ground: 1,
        opacity: 0.2
      },
      { // wall on the left.
        translate: [-0.5, 0, 0],
        quat: [0, 0.2, 0, 1],
        scale: [0.05, 1, 3],
        mvpMatrix: mat4.create(),
        modelMatrix: mat4.create(),
        lightMvpMatrix: mat4.create(),
        mainDrawCall: null,
        shadowDrawCall: null,
        array: planeArray,
        mass: 0, // ground
        visible: true,
        ground: 1,
        opacity: 1
      },
      {
        translate: [0.1, 0.075, 0],
        quat: [0, 0, 0, 1],
        scale: [0.1, 0.1, 0.1],
        mvpMatrix: mat4.create(),
        modelMatrix: mat4.create(),
        lightMvpMatrix: mat4.create(),
        mainDrawCall: null,
        shadowDrawCall: null,
        array: boxArray,
        mass: 0.5,
        visible: true,
      },
      {
        translate: [0.3, 0.175, 0],
        quat: [0, 0, 0, 1],
        scale: [0.1, 0.1, 0.1],
        mvpMatrix: mat4.create(),
        modelMatrix: mat4.create(),
        lightMvpMatrix: mat4.create(),
        mainDrawCall: null,
        shadowDrawCall: null,
        array: boxArray,
        mass: 0.5,
        visible: true,
      },
      {
        translate: [-0.1, 0.275, 0],
        quat: [0, 0, 0, 1],
        scale: [0.1, 0.1, 0.1],
        mvpMatrix: mat4.create(),
        modelMatrix: mat4.create(),
        lightMvpMatrix: mat4.create(),
        mainDrawCall: null,
        shadowDrawCall: null,
        array: boxArray,
        mass: 0.5,
        visible: true
      },
    ];

    // Finger bones pool. Instantiate pool and hide them.
    const POOL_OFFSET = boxes.length;
    const box_pool = {};

    const SPOOL_OFFSET = 2;
    var spheres = [];
    var netspheres = [];

    window.onresize = function() {
      app.resize(window.innerWidth, window.innerHeight);
      shadowBuffer.resize();
      updateMatrices();
    };

    let images = [];
    let images_loaded = 0;
    function image_onload() {
      images_loaded++;
      if (images_loaded < images.length)
        return; // and wait for all to load.
      allImagesLoaded();
    }

    function allImagesLoaded() {
      let texture = app.createTexture2D(images[0], { flipY: true });
      let grid = app.createTexture2D(images[1], {});
      let bone = app.createTexture2D(images[2], {});
      let redtex = app.createTexture2D(null, 1, 1, {});
      redtex.data(Uint8Array.from([255, 0, 0, 255]));

      function setupDraw(box) {
        box.shadowDrawCall = app.createDrawCall(shadowProgram, box.array);
        box.mainDrawCall = app.createDrawCall(mainProgram, box.array)
        .uniform("uLightPosition", lightPosition)
        .uniform("uEyePosition", eyePosition)
        .uniform("opacity", box.opacity || 1.0)
        .texture("uTextureMap", box.hasOwnProperty("frameid") ? bone :
                                box.hasOwnProperty("ground") ? grid : texture)
        .texture("uShadowMap", shadowBuffer.depthTexture);
      }

      // DRAW CALLS
      for (var i = 0, len = boxes.length; i < len; ++i) {
        setupDraw(boxes[i]);
      }

      function addNewSphere(spheres) {
        const sphere = {
          translate: [0, 0, 0],
          quat: [0, 0, 0, 1],
          scale: [0.02, 0.02, 0.02],
          mvpMatrix: mat4.create(),
          modelMatrix: mat4.create(),
          lightMvpMatrix: mat4.create(),
          mainDrawCall: null,
          shadowDrawCall: null,
          array: sphereArray,
          mass: 0,
          visible: false,
          frameid: 0
        };
        spheres.push(sphere);
        return sphere;
      };
      
      // SPOOL_OFFSET = 2 scene spheres.
      for (let i = 0; i < SPOOL_OFFSET; ++i) {
        const sphere = addNewSphere(spheres);
        sphere.translate = [0.2 + i * 0.07, 0.08, 0.1 + i * 0.07];
        sphere.scale = [0.04, 0.04, 0.04];
        sphere.mass = 0.5;
        sphere.visible = true;
        delete sphere.frameid; // frame id is used for bones.
        setupDraw(sphere);
      }

      for (let i = 0; i < 50; i++) {
        setupDraw(addNewSphere(spheres));
      }

      // Physics setup
      var collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();
      var dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);
      var pairCache = new Ammo.btDbvtBroadphase();
      var solver = new Ammo.btSequentialImpulseConstraintSolver();
      physics = new Ammo.btDiscreteDynamicsWorld(dispatcher, pairCache, solver,collisionConfiguration);
      const gravity = new Ammo.btVector3(0, -9.81, 0);
      physics.setGravity(gravity);
      const bt_zero_vec3 = new Ammo.btVector3(0, 0, 0);
      const bt_inertia = new Ammo.btVector3(0, 0, 0);
      const btvec = new Ammo.btVector3(0, 0, 0);
      const btquaternion = new Ammo.btQuaternion(0, 0, 0, 0);

      let transform = new Ammo.btTransform();
      let transform1 = new Ammo.btTransform();

      // btCollisionObjects.h constants.
      const ACTIVE_TAG = 1;
      const DISABLE_DEACTIVATION = 4;
      const WANTS_DEACTIVATION = 3;
      const CF_KINEMATIC_OBJECT = 2;
      const DISABLE_SIMULATION = 5;
      const CF_STATIC_OBJECT = 1;
      const CF_NO_CONTACT_RESPONSE = 4;
      const CF_CUSTOM_MATERIAL_CALLBACK = 8;
      const CF_CHARACTER_OBJECT = 16;
      let frameid = 1;
      let previous_frameid = 1;
      const SPHERES_OFFSET = 1000; // range of sphares used for bones offset.
      const NETSPHERES_OFFSET = 10000; // index mark the beginning of the offset
      // of an index of sphere used for large areas, e.g. arm, physics modeling.

      function createRigidBody(index) {
        const box = boxes[index];
        let shape = new Ammo.btBoxShape(new Ammo.btVector3(box.scale[0] * 0.5, box.scale[1] * 0.5, box.scale[2] * 0.5));
        transform.setIdentity();
        transform.setOrigin(new Ammo.btVector3(box.translate[0], box.translate[1], box.translate[2]));
        transform.setRotation(new Ammo.btQuaternion(box.quat[0], box.quat[1], box.quat[2], box.quat[3]));
        let motionState = new Ammo.btDefaultMotionState(transform);

        let localInertia = new Ammo.btVector3(0, 0, 0);
        shape.calculateLocalInertia(box.mass, localInertia);

        let info = new Ammo.btRigidBodyConstructionInfo(box.mass, motionState, shape, localInertia);
        const is_finger = box.hasOwnProperty("frameid");
        if (is_finger) 
          info.m_friction = 10.0; // high friction for hands.
        let body = new Ammo.btRigidBody(info);
        // if (box.hasOwnProperty("frameid"))
        //   body.setCollisionFlags(body.getCollisionFlags() | CF_KINEMATIC_OBJECT);
        box.physics_body = body;
        body.setUserPointer(box);
        body.setUserIndex(index);
        box.constraints = [];
        box.holding_vector = null;
        if (!box.visible)
          body.forceActivationState(DISABLE_SIMULATION);
        if (box.mass > 0) {
          body.setActivationState(DISABLE_DEACTIVATION);
        } else if (is_finger) {
          body.setCollisionFlags(CF_NO_CONTACT_RESPONSE | CF_STATIC_OBJECT);
          // body.setSleepingThresholds(0.2, 0.2);
          // body.setAngularFactor(0.0);
        }
        physics.addRigidBody(body);
      }

      function createRigidBodySphere(sp, index) {
        let shape = new Ammo.btSphereShape(sp.scale[0]);
        transform.setIdentity();
        btvec.setValue(sp.translate[0], sp.translate[1], sp.translate[2]);
        btquaternion.setValue(sp.quat[0], sp.quat[1], sp.quat[2], sp.quat[3]);
        transform.setOrigin(btvec);
        transform.setRotation(btquaternion);
        let motionState = new Ammo.btDefaultMotionState(transform);

        bt_inertia.setValue(0, 0, 0);
        shape.calculateLocalInertia(sp.mass, bt_inertia);

        let info = new Ammo.btRigidBodyConstructionInfo(sp.mass, motionState, shape, bt_inertia);
        info.m_friction = 10.0; // high friction for hands.
        let body = new Ammo.btRigidBody(info);
        sp.physics_body = body;
        body.setUserPointer(sp);
        body.setUserIndex(index);
        if (!sp.visible)
          body.forceActivationState(DISABLE_SIMULATION);
        sp.constraints = [];
        if (sp.mass > 0) {
          body.setActivationState(DISABLE_DEACTIVATION);
        } else if (sp.hasOwnProperty("frameid")) {
          body.setCollisionFlags(CF_NO_CONTACT_RESPONSE | CF_STATIC_OBJECT);
        }
        physics.addRigidBody(body);
      }

      function btToScene(s) {
        let state = s.physics_body.getMotionState();
        if (!state)
          return;
        state.getWorldTransform(transform);
        let t = transform.getOrigin();
        let q = transform.getRotation();
        s.translate[0] = t.x();
        s.translate[1] = t.y();
        s.translate[2] = t.z();
        s.quat[0] = q.x();
        s.quat[1] = q.y();
        s.quat[2] = q.z();
        s.quat[3] = q.w();
      }

      function updatePhysics(time_delta) {
        if ((boxes[1].constraints.length & 1) != 0 ||
            (boxes[2].constraints.length & 1) != 0 ||
            (boxes[3].constraints.length & 1) != 0)
          console.error("expected even number of constraints");
        physics.stepSimulation(time_delta, 10);
        for (let i = 1; i < boxes.length; i++)
          btToScene(boxes[i]);
        for (let i = 0; i < SPOOL_OFFSET; i++)
          btToScene(spheres[i]);
        addConnectionsForContacts();
      }

      const tip = new glMatrix.ARRAY_TYPE(3);
      const base = new glMatrix.ARRAY_TYPE(3);
      const subtract = new glMatrix.ARRAY_TYPE(3);
      const quaternion = new glMatrix.ARRAY_TYPE(4);
      const draw_transform = mat4.create();
      const yUnitVec3 = vec3.fromValues(0,1,0);
      const far_away = new Ammo.btTransform();
      far_away.setOrigin(new Ammo.btVector3(-200, -200, -200));
      const temp = new glMatrix.ARRAY_TYPE(3);
      const temp1 = new glMatrix.ARRAY_TYPE(3);

      function isAngleObtuse(a, b, c) {
        vec3.subtract(temp, a, b);
        vec3.subtract(temp1, c, b);
        return (vec3.dot(temp, temp1) < 0);
      }

      const segbuffer = [];
      function getSegBuffer(i) {
        while(segbuffer.length <= i) {
          segbuffer.push({world_tip: new glMatrix.ARRAY_TYPE(3), sp1: null,
                          world_base: new glMatrix.ARRAY_TYPE(3), sp2: null,
                          sp1_square: Number.MAX_VALUE,
                          sp2_square: Number.MAX_VALUE});
        }
        return segbuffer[i];
      }

      // keep track of sphere ids that are touching the scene objects.
      const contact_spheres = new Set();

      function getBoxFromPool(length) {
        const k = Math.max(20, Math.min((length * 1000) | 0, 69));
        for (let i = k; i >= 20; i--) {
          if (box_pool[i].frameid == frameid)
            continue;
          return box_pool[i];
        }
        for (let i = k + 1; i < 70; i++) {
          if (box_pool[i].frameid == frameid)
            continue;
          return box_pool[i];
        }
        console.error("TODO: add boxes when not in pool");
      }

      function getSphereFromPool() {
        for (let i = SPOOL_OFFSET; i < spheres.length; i++) {
          if (spheres[i].frameid == frameid)
            continue;
          return spheres[i];
        }
        const sphere = addNewSphere(spheres);
        setupDraw(sphere);
        createRigidBodySphere(sphere, SPHERES_OFFSET + spheres.length - 1);
        return sphere;
      }

      // Convert scanned point values |p| to 3D |v|. For all of the points we
      // assign spheres of radius 0.02 - this is the reason the offset is 0.014
      // as the sphere center should be behind the surface.
      function convertTo3D(v, x, y, d) {
        const depth = depthseg.depth_scale * d + 0.014;
        v[0] = depth * (x - depthseg.depth_offset[0]) * depthseg.depth_focal_inv[0];
        v[1] = depth * (y - depthseg.depth_offset[1]) * depthseg.depth_focal_inv[1];          
        v[2] = depth;
      };

      function initSegBuffer(seg, buffer) {
        // TODO: fix horizontal orientation
        // Convert segment endpoints to 3D world coordinates.
        const p1 = seg;
        const p2 = depthseg.getSegmentEnd(seg);         

        convertTo3D(tip, p1.x, p1.y, p1.depth); 
        vec3.transformMat4(buffer.world_tip, tip, depth_to_world_transform);
        convertTo3D(base, p2.x, p2.y, p2.depth); 
        vec3.transformMat4(buffer.world_base, base, depth_to_world_transform);

        buffer.sp1 = null;
        buffer.sp2 = null;
        buffer.sp1_square = Number.MAX_VALUE;
        buffer.sp2_square = Number.MAX_VALUE;
        buffer.endpoint_base = !p2.hasOwnProperty("joint");
        buffer.endpoint_tip = !p1.hasOwnProperty("joint");                   
      };

      const viewscale = 1;
      const MATCH_SPHERE_LIMIT = 0.0004 * viewscale * viewscale; // 2cm
      function getMatchingPreviousFrameSphere(world_center) {
        let nearest = Number.MAX_VALUE;
        let nearest_s = null;
        for (let i = SPOOL_OFFSET, len = spheres.length; i < len; ++i) {
          const s = spheres[i];
          // If it wasn't used in previous frame or already allocated to
          // other point, move to next.
          if (s.frameid != previous_frameid || s.segment || s.contact == false)
            continue;
          const squared_distance = vec3.squaredDistance(s.translate, world_center);
          if (squared_distance < nearest) {
            nearest = squared_distance;
            nearest_s = s;
          }
        }
        if (nearest < MATCH_SPHERE_LIMIT)
          return nearest_s;
        return null;
      }

      // |force| is true for previous frame contact spheres - spheres that were
      // holding the box. We map them to the nearest, so that the picked object
      // wouldn't jump around.
      // Except the potential contact points, the rest of depth segments
      // endpoints are not mapped to previous frame's spheres, but always to
      // a sphere not used in previous frame - cleaned history sphere from the
      // pool is assigned for the depth point. 
      function assignContactSphereToSegmentEndPoint(buffer, spkey, segment, force) {
        const sp = buffer[spkey];
        if (sp == null)
          return;
        const c = (sp == buffer.sp1) ? buffer.world_tip : buffer.world_base;
        sp.segment = segment;
        sp.visible = DEBUG_DRAW_BONES;
        // reposition the physics body
        vec3.copy(sp.translate, c);
        const body = sp.physics_body;
        transform.setIdentity();
        btvec.setValue(c[0], c[1], c[2]);
        transform.setOrigin(btvec);
        body.setWorldTransform(transform);
        body.getMotionState().setWorldTransform(transform);
        // if (sp.frameid == 0 || !contact) {
          body.setLinearVelocity(bt_zero_vec3);
          body.setAngularVelocity(bt_zero_vec3);
          body.forceActivationState(ACTIVE_TAG);
          body.setCollisionFlags(CF_STATIC_OBJECT);
          body.updateInertiaTensor();
        // }
        // if contact is not forced, make it so that it happens only when fingers
        // are well distinguished.
        sp.contact = force || (((segment.far_left.distance2D | 0) +
                                (segment.far_right.distance2D | 0) > 4) &&
                               (segment.count_left + segment.count_right > 8));
        sp.segment_id = segment.index; // debugging purpose only.
        sp.frameid = frameid;
        sp.buffer = buffer;
      }

      function dropObjectsHeldBySphere(sp, index) {
        if (sp.constraints.length > 0)
          contact_spheres.delete(index);
        for (let j = 0; j < sp.constraints.length; j++) {
          const constraint = sp.constraints[j];
          // remove constraints holding the world object.
          const wbox = boxes[constraint.world_item];
          // TODO: remove constraints from other item.
          const finger0 = wbox.constraints[0].finger_item;
          const finger1 = wbox.constraints[1].finger_item;
          
          if (finger0 != index) {
            const s0cons = spheres[finger0].constraints;
            s0cons.splice(s0cons.indexOf(wbox.constraints[0]), 1);
            if (s0cons.length == 0)
              contact_spheres.delete(finger0);           
          } else if (finger1 != index) {
            const s0cons = spheres[finger1].constraints;
            s0cons.splice(s0cons.indexOf(wbox.constraints[1]), 1);           
            if (s0cons.length == 0)
              contact_spheres.delete(finger1);           
          }

          if(wbox.constraints.indexOf(constraint) == -1)
            console.error("wboxcindex == -1");

          wbox.physics_body.getCollisionShape().calculateLocalInertia(wbox.mass, bt_inertia);   
          wbox.physics_body.setMassProps(wbox.mass, bt_inertia);
          wbox.holding_vector_recent = [];
           
          wbox.constraints.length = 0;

        }
        sp.constraints.length = 0;
      }

      function filterOutNoise(v, list) {
        // Filter position noise.
        const p = list.length > 6 ? list.shift() : new glMatrix.ARRAY_TYPE(3);
        vec3.copy(p, v);
        list.push(p);

        if (list.length < 5)
          return;

        vec3.copy(temp, v);
        for (let i = 0; i < list.length - 1; i++)
          vec3.add(temp, temp, list[i]);
        vec3.normalize(temp1, temp);
        
        let maxdiffindex = 0;
        let maxdiff = vec3.squaredDistance(temp1, list[0]);
        for (let i = 1; i < list.length; i++) {
          const diff = vec3.squaredDistance(temp1, list[i]);
          if (diff > maxdiff) {
            maxdiffindex = i;
            maxdiff = diff;
          }
        }
        // remove max diff from computation
        vec3.subtract(temp, temp, list[maxdiffindex]);
        vec3.normalize(v, temp);
      }

      function assignSphereToPoint(sp, x, y, d) {
        const body = sp.physics_body;
        convertTo3D(temp, x, y, d); 
        const c = sp.translate;
        vec3.transformMat4(c, temp, depth_to_world_transform);
        
        sp.visible = DEBUG_DRAW_BONES;
        // reposition the physics body
        transform.setIdentity();
        btvec.setValue(c[0], c[1], c[2]);
        transform.setOrigin(btvec);
        body.setWorldTransform(transform);
        body.getMotionState().setWorldTransform(transform);
        // if (sp.frameid == 0 || !contact) {
          body.setLinearVelocity(bt_zero_vec3);
          body.setAngularVelocity(bt_zero_vec3);
          body.forceActivationState(ACTIVE_TAG);
          body.setCollisionFlags(CF_STATIC_OBJECT);
          body.updateInertiaTensor();
        // }
        sp.frameid = frameid;
        sp.contact = false;
      }

      function updateNet() {
        for (let i = netspheres.length; i < depthseg.out.net.length; i++) {
          const sp = addNewSphere(netspheres);
          setupDraw(sp);
          createRigidBodySphere(sp, i + NETSPHERES_OFFSET);
        }
        const width = out.netw;
        const height = out.neth;
        const d = depthseg.getDepthNonSkeleton;
        for (let j = 1; j < height - 1; j++) {
          for (let i = 1 + j * width, end = i + width - 2; i < end; i++) {
            const n = out.net[i];
            const sp = netspheres[i];            
            if (n == -1) {
              // hide visible and physics.
              sp.visible = false;
              const body = sp.physics_body;
              body.setLinearVelocity(bt_zero_vec3);
              body.setAngularVelocity(bt_zero_vec3);
              body.setCollisionFlags(CF_NO_CONTACT_RESPONSE | CF_STATIC_OBJECT);
              body.setActivationState(DISABLE_SIMULATION);
              continue;
            }
            const x = n >> 16, y = n & 0xFFFF;
            assignSphereToPoint(sp, x, y, d(x, y));
          }
        }        
      }        

      function updateFingerSegments() {        
        previous_frameid = frameid;
        frameid = ((frameid + 1) & 0xFFFFFFFF) || 1;

        // For all the segment endpoints calculate 3D values. We will use those
        // in several traversals below.
        const segment_data = depthseg.out.segment_data;
        let keys = Object.keys(depthseg.out.segment_data);
        for (let k = 0; k < keys.length; k++) {
          const segment = segment_data[keys[k]];
          const buffer = getSegBuffer(k);
          initSegBuffer(segment, buffer);
        }

        // Identify endpoints (remove the points where two segments touch).
        // We do this so there are less points that could cause tracking/mapping
        // problems.
        let endpoints = 0;
        for (let k = 0; k < keys.length; k++) {
          const buffer = getSegBuffer(k);
          endpoints += ((buffer.endpoint_base ? 1 : 0) +
                        (buffer.endpoint_tip ? 1 : 0));
        }

        // Start from previous frame contact points and get the closest points
        // the latest segments to the previous frame contact points.
        // Assign here means setting e.g. buffer.sp1.s(phere) and s.segment
        let to_assign = Math.min(contact_spheres.size, endpoints);
        while (to_assign > 0) {
          for (i of contact_spheres) {
            const s = spheres[i];
            if (s.segment != null)
              continue;
            // Get the closest current segment endpoint.
            let nearest = Number.MAX_VALUE;
            let nearest_k = -1;
            let nearest_key = "sp1";
            for (let k = 0; k < keys.length; k++) {
              const buffer = getSegBuffer(k);
              let squared_distance = buffer.endpoint_tip ?
                                     vec3.squaredDistance(s.translate, buffer.world_tip) :
                                     Number.MAX_VALUE;
              if (squared_distance < nearest && squared_distance < buffer.sp1_square) {
                nearest = squared_distance;
                nearest_k = k;
                nearest_key = "sp1";
              }
              squared_distance = buffer.endpoint_base ?
                                 vec3.squaredDistance(s.translate, buffer.world_base) :
                                 Number.MAX_VALUE;
              if (squared_distance < nearest && squared_distance < buffer.sp2_square) {
                nearest = squared_distance;
                nearest_k = k;
                nearest_key = "sp2";
              }
            }
            if (nearest_k == -1)
              continue; // This one doesn't get assigned.
            const buffer = getSegBuffer(nearest_k);
            if (buffer[nearest_key] != null) {
              // There is another sphere claiming it is the closest to the
              // segment endpoint. Invalidate it and do that sphere again.
              to_assign++;
              buffer[nearest_key].segment = null;
              buffer[nearest_key + "_square"] = Number.MAX_VALUE; 
            }
            buffer[nearest_key] = s;
            buffer[nearest_key + "_square"] = nearest; 
            to_assign--;
            s.segment = segment_data[keys[nearest_k]];
          }
        }

        // The final step in assigning previous joints - based on
        // buffer.spX.s(phere), 
        function bothHoldsValidAssignment(key, buffer) {
          // If both ends of one segment got assigned as contact points then
          // we have an erroneous situation: contact points should be on
          // different fingers, and previous frame fingertip is probably not
          // visible in this frame so it got reassigned to the closest but
          // wrong point. drop the box.
          if (buffer.sp2 && buffer.sp1)
            return false;
          return buffer[key + "_square"] < 0.01;
        }

        for (let k = 0; k < keys.length; k++) {
          const buffer = getSegBuffer(k);
          // We need another sub-step here: check the distances and accept
          // those that are the closest but not the ones that suddenly change
          // the orientation. The idea is to avoid sudden jumps when finger is
          // not visible. For now, drop the object as code bellow will not
          // assign the sphere.
          if (buffer.endpoint_tip && buffer.sp1 &&
              bothHoldsValidAssignment("sp1", buffer)) {
            assignContactSphereToSegmentEndPoint(buffer, "sp1", buffer.sp1.segment, true);
          }
          if (buffer.endpoint_base && buffer.sp2 &&
              bothHoldsValidAssignment("sp2", buffer)) {
            assignContactSphereToSegmentEndPoint(buffer, "sp2", buffer.sp2.segment, true);
          }
        }
        
        // Among other points, get the mapping to previous when they are nearby.
        for (let k = 0; k < keys.length; k++) {
          const segment = segment_data[keys[k]];
          const buffer = getSegBuffer(k);
          if (buffer.endpoint_tip && !buffer.sp1) {
            buffer.sp1 = getMatchingPreviousFrameSphere(buffer.world_tip);
            assignContactSphereToSegmentEndPoint(buffer, "sp1", segment);
          }
          if (buffer.endpoint_base && !buffer.sp2) {
            buffer.sp2 = getMatchingPreviousFrameSphere(buffer.world_base);
            assignContactSphereToSegmentEndPoint(buffer, "sp2", segment);
          }
        }

        for (let k = 0; k < keys.length; k++) {
          const segment = segment_data[keys[k]];
          const buffer = getSegBuffer(k);
          if (buffer.endpoint_tip && !buffer.sp1) {
            // Get from the pool.
            buffer.sp1 = getSphereFromPool();
            assignContactSphereToSegmentEndPoint(buffer, "sp1", segment);
          }
          if (buffer.endpoint_base && !buffer.sp2) {
            buffer.sp2 = getSphereFromPool();
            assignContactSphereToSegmentEndPoint(buffer, "sp2", segment);
          }
        }

        // If 2 fingers holding the object are not holding it anymore, drop the
        // object.
        for (let i = SPOOL_OFFSET, len = spheres.length; i < len; ++i) {
          const sp = spheres[i];
          const body = sp.physics_body;

          if (sp.frameid == previous_frameid) {
            body.setLinearVelocity(bt_zero_vec3);
            body.setAngularVelocity(bt_zero_vec3);
            // getBroadphaseProxy().masks and groups are not compiled in,
            // DISABLE_SIMULATION is not honored so the way to avoid interaction
            // of pool items is to add CF_NO_CONTACT_RESPONSE flag.
            // As this means that the collision is still computed, we move the
            // objects far away to get them processed out during broad phase.
            body.setCollisionFlags(CF_NO_CONTACT_RESPONSE | CF_STATIC_OBJECT);
            body.setActivationState(DISABLE_SIMULATION);
            body.updateInertiaTensor();
            // body.setWorldTransform(far_away);
            // body.getMotionState().setWorldTransform(far_away);
            // remove all the constraints this body has in the world.
            dropObjectsHeldBySphere(sp, i);
          }
          sp.segment = null;
          if (sp.frameid != frameid) {
            sp.frameid = 0;
            sp.visible = false; //sp.physics_body.isActive(); // false;
            sp.buffer = null;
          }
        }

        // Non contact areas get spheres assigned too.
        for (let k = 0; k < keys.length; k++) {
          const segment = segment_data[keys[k]];
          const interpolated_count = depthseg.getSegmentInterpolatedCount(segment);
          for (let i = 0; i < interpolated_count; i++) {
            depthseg.getInterpolatedPoint(temp, segment, i);
            const sp = getSphereFromPool();
            assignSphereToPoint(sp, temp[0], temp[1], temp[2]);
          }
          if (segment.hasOwnProperty("joint")) {
            const sp = getSphereFromPool();
            assignSphereToPoint(sp, segment.x, segment.y, segment.depth);            
          }
        }

        // World objects that are hold are getting the rotation from position
        // of fingers holding them.
        for (let i = 0; i < boxes.length; i++) {
          if (boxes[i].constraints.length == 1)
            console.error("shouldnt be 1");
          if (boxes[i].constraints.length > 0) {
            const wb = boxes[i];
            const sp0 = spheres[wb.constraints[0].finger_item];
            const sp1 = spheres[wb.constraints[1].finger_item];
            vec3.subtract(subtract, sp1.translate, sp0.translate);
            
            // If length between fingers is > threshold * initial holding length,
            // drop it.
            const hold_length = vec3.length(subtract);
            if (hold_length > 1.5 * wb.holding_length) {
              // drop the box.
              dropObjectsHeldBySphere(sp0, wb.constraints[0].finger_item);
              continue;
            }

            //  normalize subtract:
            vec3.scale(subtract, subtract, 1 / hold_length);

            // average holding vector to filter out spikes.
            wb.holding_vector_recent = wb.holding_vector_recent || [];
            filterOutNoise(subtract, wb.holding_vector_recent);

            quat.rotationTo(wb.quat, wb.holding_vector, subtract);
            quat.multiply(wb.quat, wb.quat, wb.holding_quat);

            const body = wb.physics_body;
            transform.setIdentity();
            vec3.lerp(subtract, sp0.translate, sp1.translate, 0.5);
            vec3.add(wb.translate, subtract, wb.center_offset);
            btvec.setValue(wb.translate[0], wb.translate[1], wb.translate[2]);
            transform.setOrigin(btvec);
            btquaternion.setValue(wb.quat[0], wb.quat[1], wb.quat[2], wb.quat[3]);
            transform.setRotation(btquaternion);
            body.setWorldTransform(transform);
            body.getMotionState().setWorldTransform(transform);
            // body.setLinearVelocity(bt_zero_vec3);
            // body.setAngularVelocity(bt_zero_vec3);
          }
        }
        updateNet();
      }

      // Can 2 manifolds hold the object? Both manifolds are on the same
      // object, but different finger balls.
      function canManifoldsHoldTheObject(con1, m2, ob, joint, finger) {
        const m1 = con1.manifold;
        const p1 = m1.getContactPoint(0);
        const p2 = m2.getContactPoint(0);

        // First, let's not allow picking objects from the lower side - to
        // prevent this happening when carrying objects.
        // It is box, so on.scale[0] is sufficient - otherwise, use the minimum.
        const ymin = ob.translate[1] - ob.scale[0] * 0.5;
        if (p1.get_m_positionWorldOnA().y() < ymin ||
            p2.get_m_positionWorldOnA().y() < ymin) {
          return false;
        }
        const pA1 = p1.get_m_localPointA();
        const pB1 = p1.get_m_localPointB();
        const pA2 = p2.get_m_localPointA();
        const pB2 = p2.get_m_localPointB();

        // As these are the boxes, holding if pBs are in the same.
        // object to hold is a box, so simplify this so that we hold it on
        // opposite sides of the box.
        const xdiff = Math.abs(pA1.x() - pA2.x());
        const ydiff = Math.abs(pA1.y() - pA2.y());
        const zdiff = Math.abs(pA1.z() - pA2.z());
        if (!(xdiff > 0.9 * ob.scale[0] || ydiff > 0.9 * ob.scale[1] ||
            zdiff > 0.9 * ob.scale[2]))
          return false;
        // Some more math: the direction of the finger; towards or from within
        // the box determines if fingers can hold the object.
        const finger1 = spheres[con1.finger_item];
        const joint1 = finger1.buffer.sp1 == finger1 ? finger1.buffer.world_base
                                                     : finger1.buffer.world_tip;
        // All together, we check 4 angles: joint - fingertip(contact) - center
        // of object for both fingers and joint - fingertip(contact) - center of
        // the grip between two points.
        // If all angles are obtuse (> 90) then it can hold the box.
        if (!isAngleObtuse(ob.translate, finger1.translate, joint1))
          return false;

        if (!isAngleObtuse(ob.translate, finger.translate, joint))
          return false;

        ob.center_offset = ob.center_offset || new glMatrix.ARRAY_TYPE(3);
        vec3.lerp(ob.center_offset, finger.translate, finger1.translate, 0.5);

        if (!isAngleObtuse(ob.center_offset, finger1.translate, joint1))
          return false;

        if (!isAngleObtuse(ob.center_offset, finger.translate, joint))
          return false;

        return true;
      }

      function processManifold(i0, i1, manifold) {
        if (!manifold)
            console.error("undefined manifold");
        i1 = i1 - SPHERES_OFFSET;
        const ob = i0 < SPHERES_OFFSET ? boxes[i0] : spheres[i0 - SPHERES_OFFSET];
        if (ob.constraints.length == 2 && ob.constraints[0].manifold == null)
          return; // already two fingers holding the object, ignore other.
        const finger = spheres[i1];
        if (!finger.contact)
          return;
        const joint = finger.buffer.sp1 == finger ? finger.buffer.world_base
                                                  : finger.buffer.world_tip;
        for (let i = 0; i < ob.constraints.length; i++) {
          const con1 = ob.constraints[i];
          if (canManifoldsHoldTheObject(con1, manifold, ob, joint, finger)) {
            // We found the pair, so create real joints and clear the rest.
            // Create constraint from the manifold.                     
            const body = ob.physics_body;
                          
            const finger1 = spheres[con1.finger_item];
            const pt = con1.manifold.getContactPoint(0);
            finger1.constraints.push(con1);
            con1.manifold = null;

            contact_spheres.add(con1.finger_item);

            // The second finger:
            const pt2 = manifold.getContactPoint(0);
            const con2 = {world_item: i0, finger_item: i1, manifold: null};
            ob.constraints = [con1, con2]; // remove all other
            finger.constraints.push(con2);
        
            contact_spheres.add(i1);

            ob.holding_vector = ob.holding_vector || new glMatrix.ARRAY_TYPE(3);
            vec3.subtract(ob.holding_vector, finger.translate, finger1.translate);
            ob.holding_length = vec3.length(ob.holding_vector);
            vec3.scale(ob.holding_vector, ob.holding_vector, 1 / ob.holding_length);
            ob.holding_quat = quat.clone(ob.quat);

            vec3.lerp(ob.center_offset, finger.translate, finger1.translate, 0.5);
            vec3.subtract(ob.center_offset, ob.translate, ob.center_offset);

            body.getCollisionShape().calculateLocalInertia(0, bt_inertia);   
            body.setMassProps(0, bt_inertia);
            body.setLinearVelocity(bt_zero_vec3);
            body.setAngularVelocity(bt_zero_vec3);
            // body.setCollisionFlags(body.getCollisionFlags() | (CF_KINEMATIC_OBJECT | ~CF_STATIC_OBJECT));
            body.updateInertiaTensor();
            return;
          }
        }

        // Since it is not possible to hold an object, cache the manifold.
        const con = {world_item: i0, finger_item: i1, manifold: manifold};
        ob.constraints.push(con);
      }

      function addConnectionsForContacts() {
        const disp = physics.getDispatcher();
        for (let i = 0, num = disp.getNumManifolds(); i < num; i++) {
          const manifold = disp.getManifoldByIndexInternal(i);
          const num_contacts = manifold.getNumContacts();
          if (!num_contacts)
            continue;
          const i0 = manifold.getBody0().getUserIndex();
          const i1 = manifold.getBody1().getUserIndex();
          if(i0 > i1) throw "first one should be less than the second";
          if (i0 >= SPHERES_OFFSET)
            continue; // let's pick only boxes.
          if (i1 < SPHERES_OFFSET + SPOOL_OFFSET)
            continue;
          if (i1 >= NETSPHERES_OFFSET)
            continue;
          if (!manifold.getBody1().isActive())
            continue;
          processManifold(i0, i1, manifold);
        }

        // reset back intermediate data.
        for (let i = 1; i < POOL_OFFSET; i++) {
          const cons = boxes[i].constraints;
          if (cons.length != 0 && // don't reset if empty already
              (cons.length != 2 || cons[0].manifold != null)) {
            cons.length = 0;         
          }
          if (boxes[i].constraints.length > 0 && boxes[i].holding_vector == null)
            console.error("TODO: remove this debug message");
        }
      }      

      for (var i = 0, len = boxes.length; i < len; ++i)
        createRigidBody(i);
      for (var i = 0, len = spheres.length; i < len; ++i)
        createRigidBodySphere(spheres[i], i + SPHERES_OFFSET);      

      let timestamp = performance.now();

      function draw() {
        if (timer.ready()) {
          utils.updateTimerElement(timer.cpuTime, timer.gpuTime);
        }

        timer.start();
        const gl = depthseg.gl;
        gl.clear(gl.GL_COLOR_BUFFER_BIT | gl.GL_DEPTH_BUFFER_BIT); 
        if (depthseg.process())
          updateFingerSegments();

        // Update physics.
        const now = performance.now();
        updatePhysics((now - timestamp) * 0.001);
        timestamp = now;

        // Update graphics.
        function updateUniforms(item, withlight = 1.0) {
          mat4.fromRotationTranslationScale(item.modelMatrix, item.quat, item.translate, item.scale);
          mat4.multiply(item.mvpMatrix, viewProjMatrix, item.modelMatrix);
          mat4.multiply(item.lightMvpMatrix, lightViewProjMatrix, item.modelMatrix);
          
          item.mainDrawCall.uniform("uMVP", item.mvpMatrix)
          .uniform("uModelMatrix", item.modelMatrix)
          .uniform("uMVPFromLight", item.lightMvpMatrix)
          .uniform("uWithLighting", withlight);
          item.shadowDrawCall.uniform("uMVP", item.lightMvpMatrix);          
        }
        for (var i = 0, len = boxes.length; i < len; ++i) {
          if (boxes[i].visible)
            updateUniforms(boxes[i]);
        }
        for (var i = 0, len = spheres.length; i < len; ++i) {
          if (spheres[i].visible)
            updateUniforms(spheres[i], (spheres[i].contact || i < SPOOL_OFFSET) ? 1.0 : 0.0);
        }
        for (var i = 0, len = netspheres.length; i < len; ++i) {
          if (netspheres[i].visible)
            updateUniforms(netspheres[i], 0.3);
        }

        // Draw to shadow buffer.
        app.drawFramebuffer(shadowBuffer).clear();
        mat4.multiply(draw_transform, lightViewProjMatrix, depth_to_world_transform);
        depthseg.draw(draw_transform, null, null, shadowBuffer.depthTexture.currentUnit);
        for (var i = 0, len = boxes.length; i < len; ++i) {
          if (boxes[i].visible)
            boxes[i].shadowDrawCall.draw();
        }
        for (var i = 0, len = SPOOL_OFFSET; i < len; ++i) {
          if (spheres[i].visible)
            spheres[i].shadowDrawCall.draw();
        }


        // Draw to screen.
        app.defaultDrawFramebuffer().clear();
        depthseg.draw(depth_mvp, draw_transform, light_position_depth, shadowBuffer.depthTexture.currentUnit);
        for (var i = 0, len = boxes.length; i < len; ++i) {
          if (boxes[i].visible)
            boxes[i].mainDrawCall.draw();
        }
        for (var i = 0, len = spheres.length; i < len; ++i) {
          if (spheres[i].visible)
            spheres[i].mainDrawCall.draw();
        }
        for (var i = 0, len = netspheres.length; i < len; ++i) {
          if (netspheres[i].visible)
            netspheres[i].mainDrawCall.draw();
        }

        timer.end();
        requestAnimationFrame(draw);
      }
      requestAnimationFrame(draw);        
    };
 
    for (let i = 0; i < 3; i++) {
      images.push(new Image());
      images[i].onload = image_onload;
    }
    Ammo().then(function(Ammo) {
      images[0].src = "webgl.png";
      images[1].src = "grid.png";
      images[2].src = "bone.png";
    });
  </script>
</body>
</html>

<!--
This code is reusing some of the code from  picogl.js/examples/shadow.html, so 
including the license.
-->
<!--
  The MIT License (MIT)

  Copyright (c) 2017 Tarek Sherif

  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
  the Software without restriction, including without limitation the rights to
  use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
  the Software, and to permit persons to whom the Software is furnished to do so,
  subject to the following conditions:

  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
  FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
  COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
  IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->