leapjs-plugins/main/bone-hand/leap.bone-hand.coffee

A collection of useful plugins for LeapJS

scope = null

THREE = if typeof require != 'undefined' then require('three') else window.THREE

initScene = (targetEl, scale)->

  # scene and renderer

  scope.scene = new THREE.Scene()
  scope.rendererOps ||= {}
  if scope.rendererOps.alpha == undefined then scope.rendererOps.alpha = true
  scope.renderer = renderer = new THREE.WebGLRenderer(scope.rendererOps)

  width  = scope.width  || window.innerWidth
  height = scope.height || window.innerHeight

  renderer.setClearColor(0x000000, 0)
  renderer.setSize(width, height)

  renderer.domElement.className = "leap-boneHand"

  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = THREE.PCFSoftShadowMap

  targetEl.appendChild(renderer.domElement)

  # camera

  near = 1 # 1 mm
  far = 10000 # 10 m

  if scale
    near *= scale
    far  *= scale

  scope.camera = camera = new THREE.PerspectiveCamera(45, width / height, near, far)

  camera.position.set(0, 300, 500);
  camera.lookAt(new THREE.Vector3(0, 160, 0));

  scope.scene.add(camera)

  if !scope.width && !scope.height
    window.addEventListener 'resize', ->
      width  = window.innerWidth
      height = window.innerHeight

      camera.aspect = width / height
      camera.updateProjectionMatrix()

      renderer.setSize( width, height )

      renderer.render(scope.scene, camera)
    , false


  scope.render ||= (timestamp)->
    renderer.render(scope.scene, scope.camera);

  scope.render()

baseBoneRotation = null
jointColor = null
boneColor = null
boneScale  = null
jointScale = null
boneRadius = null
jointRadius = null
material = null
armTopAndBottomRotation = null



class HandMesh
  # when a hand enters the scene, it takes a mesh out of here, or creates a new one
  @unusedHandMeshes: []

  # gets or creates a handmesh
  # makes it visible
  @get: ->
    if HandMesh.unusedHandMeshes.length == 0
      handMesh = HandMesh.create()

    handMesh = HandMesh.unusedHandMeshes.pop()

    handMesh.show()

    return handMesh

  # replaces a handMesh in the cache
  # makes it invisible.
  replace: ->
    @hide()
    HandMesh.unusedHandMeshes.push(this)


  # adds hand meshes to the scene
  # stores them in unusedhandMesh
  @create: ->
    mesh = new HandMesh
    mesh.setVisibility(false)
    HandMesh.unusedHandMeshes.push(mesh)


    if HandMesh.onMeshCreated
      HandMesh.onMeshCreated(mesh)

    return mesh

  constructor: ->

    material = if !isNaN(scope.opacity)
      new THREE.MeshPhongMaterial(fog: false, transparent: true, opacity: scope.opacity)
    else
      new THREE.MeshPhongMaterial(fog: false)

    boneRadius  = 40 * boneScale # 40 is typical mm middle finger proximal bone length. This can be anything, as it gets rescaled later.
    jointRadius = 40 * jointScale

    @fingerMeshes = []
    for i in [0...5]
      finger = []
      boneCount = if i == 0 then 3 else 4 # thumb has one fewer

      for j in [0...boneCount]
        # we keep one array with bone and joint meshes, and iterate through it later for position.. easy

        #joint
        mesh = new THREE.Mesh(
          new THREE.SphereGeometry(jointRadius, 32, 32),
          material.clone()
        )
        mesh.name = "hand-bone-#{j}"
        mesh.material.color.copy(jointColor)
        mesh.renderOrder = ((i * 9) + (2 * j) ) / 36
        mesh.castShadow = true
        scope.scene.add mesh
        finger.push mesh

        # bone
        # CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)
        mesh = new THREE.Mesh(
          new THREE.CylinderGeometry(boneRadius, boneRadius, 40, 32),
          material.clone()
        )
        mesh.name = "hand-joint-#{j}"
        mesh.material.color.copy(boneColor)
        mesh.renderOrder = ((i * 9) + (2 * j) + 1 ) / 36 # might fuckup opaque objects?
        mesh.castShadow = true
        scope.scene.add mesh
        finger.push mesh


      #joint - end cap
      mesh = new THREE.Mesh(
        new THREE.SphereGeometry(jointRadius, 32, 32),
        material.clone()
      )
      mesh.material.color.copy(jointColor)

      mesh.castShadow = true

      scope.scene.add mesh
      finger.push mesh


      @fingerMeshes.push(finger)


    if scope.arm
      @armMesh = new THREE.Object3D;
      @armBones = []
      @armSpheres = []

      for i in [0..3]
        @armBones.push(new THREE.Mesh(
          # CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)
          new THREE.CylinderGeometry(boneRadius, boneRadius,
            ( if  i < 2 then 1000 else 100 )
          , 32),
          material.clone()
        ))
        @armBones[i].material.color.copy(boneColor)
        @armBones[i].castShadow = true
        @armBones[i].name= "ArmBone#{i}"

        if i > 1
          @armBones[i].quaternion.multiply(armTopAndBottomRotation)

        @armMesh.add(@armBones[i])

      @armSpheres = []
      for i in [0..3]
        @armSpheres.push(new THREE.Mesh(
          new THREE.SphereGeometry(jointRadius, 32, 32),
          material.clone()
        ))
        @armSpheres[i].material.color.copy(jointColor)
        @armSpheres[i].castShadow = true
        @armSpheres[i].name= "ArmSphere#{i}"
        @armMesh.add(@armSpheres[i])

      scope.scene.add(@armMesh);

  traverse: (callback)->
    for i in [0...5]
      for mesh in @fingerMeshes[i]
        callback(mesh)

    @armMesh && @armMesh.traverse(callback)



  # scales the meshes appropriately
  scaleTo: (hand)->

    # bone radius changes with overall hand size, but not joint length
    baseScale = hand.middleFinger.proximal.length / @fingerMeshes[2][1].geometry.parameters.height

    for i in [0...5]
      finger = hand.fingers[i]
      j = 0
      # iterate backwards as first bone in the thumb is bunk.
      while true
        if j == @fingerMeshes[i].length - 1
          mesh = @fingerMeshes[i][j]
          mesh.scale.set(baseScale, baseScale, baseScale)
          break

        bone = finger.bones[ 3 - (j / 2) ]

        # joints
        mesh = @fingerMeshes[i][j]
        mesh.scale.set(baseScale, baseScale, baseScale)

        j++

        # bones
        mesh = @fingerMeshes[i][j]
        fingerBoneLengthScale = bone.length / mesh.geometry.parameters.height
        mesh.scale.set(baseScale, fingerBoneLengthScale, baseScale)
        j++

    if scope.arm
      armLenScale   = hand.arm.length / ( @armBones[0].geometry.parameters.height + @armBones[0].geometry.parameters.radiusTop )
      armWidthScale = hand.arm.width  / ( @armBones[2].geometry.parameters.height + @armBones[2].geometry.parameters.radiusTop )

      for i in [0..3]
        @armBones[i].scale.set(baseScale,
          ( if  i < 2 then armLenScale else armWidthScale )
        , baseScale)

        @armSpheres[i].scale.set(baseScale, baseScale, baseScale)

      boneXOffset  = (hand.arm.width / 2) * 0.85
      halfArmLength = hand.arm.length / 2


      # CW from Top center
      @armBones[0].position.setX(boneXOffset) # radius
      @armBones[1].position.setX(-boneXOffset) # ulna
      @armBones[2].position.setY(halfArmLength)
      @armBones[3].position.setY(-halfArmLength)

      # CW from TL
      @armSpheres[0].position.set( - boneXOffset,   halfArmLength, 0)
      @armSpheres[1].position.set(   boneXOffset,   halfArmLength, 0)
      @armSpheres[2].position.set(   boneXOffset, - halfArmLength, 0)
      @armSpheres[3].position.set( - boneXOffset, - halfArmLength, 0)



    return this

  # positions and rotates the meshes appropriately
  formTo: (hand)->
    for i in [0...5]
      finger = hand.fingers[i]
      j = 0
      while true

        if j == @fingerMeshes[i].length - 1
          mesh = @fingerMeshes[i][j] # alternating, joint-bone-joint-bone...
          mesh.position.fromArray bone.prevJoint
          break

        bone = finger.bones[  3 - (j / 2) ]

        mesh = @fingerMeshes[i][j]
        mesh.position.fromArray bone.nextJoint
        ++j

        mesh = @fingerMeshes[i][j]

        mesh.position.fromArray bone.center()
        mesh.setRotationFromMatrix (new THREE.Matrix4).fromArray(bone.matrix())
        mesh.quaternion.multiply baseBoneRotation
        ++j

    if @armMesh
      @armMesh.position.fromArray(hand.arm.center())
      @armMesh.setRotationFromMatrix(
        (new THREE.Matrix4).fromArray( hand.arm.matrix() )
      );
      @armMesh.quaternion.multiply(baseBoneRotation)

    return this

  setVisibility: (visible)->
    for i in [0...5]
      j = 0
      while true
        @fingerMeshes[i][j].visible = visible
        ++j

        break if j == @fingerMeshes[i].length

    if scope.arm
      for i in [0..3]
        @armBones[i].visible   = visible
        @armSpheres[i].visible = visible


  show: ->
    @setVisibility(true)

  hide: ->
    @setVisibility(false)



onHand = (hand) ->
  return if !scope.scene

  handMesh = hand.data('handMesh')

  # the handFound listener doesn't actually fire if in live mode with hand-in-screen
  # we manually check for finger meshes and initialize if necessary
  if !handMesh
    handMesh = HandMesh.get().scaleTo(hand)
    hand.data('handMesh', handMesh)
    if HandMesh.onMeshUsed
      HandMesh.onMeshUsed(handMesh)

  handMesh.formTo(hand)


boneHandLost = (hand) ->
  handMesh = hand.data('handMesh')
  if handMesh
    handMesh.replace()

  handMesh = hand.data('handMesh', null)

Leap.plugin 'boneHand', (options = {}) ->
  # make sure scope is globally available
  scope = options
  controller = this;

  jointColor = (new THREE.Color).setHex(0x5daa00)
  boneColor = (new THREE.Color).setHex(0xffffff)

  scope.boneScale  && boneScale  = scope.boneScale
  scope.jointScale && jointScale = scope.jointScale

  scope.boneColor  && boneColor  = scope.boneColor
  scope.jointColor && jointColor = scope.jointColor

  scope.HandMesh = HandMesh

  # this method enhances scope.scene with camera and lighting
  # it is split from initScene so as to allow it being called with non-default scenes.
  # expects camera to be added to the scene
  scope.addShadowCamera = ->

    scope.light = new THREE.SpotLight( 0xffffff, 1 )
    scope.light.castShadow = true
#    scope.light.shadowCameraVisible = true # This makes for excellent debugging
    # scope.light.shadowDarkness = 0.8 # THREE.Light: .shadowDarkness has been removed.
    scope.light.shadow.mapSize.width = 1024
    scope.light.shadow.mapSize.height = 1024
    scope.light.shadow.camera.near = 0.5 / 0.001
    scope.light.shadow.camera.far = 3  / 0.001

    # fixed hand position..
    scope.light.position.set(0,1000,1000); # up and behind
    scope.light.target.position.set(0,0,-1000); # one meter forward

    # see https:#github.com/mrdoob/three.js/issues/2251
    scope.camera.add(scope.light.target);
    scope.camera.add(scope.light);

    if controller.plugins.transform

      if controller.plugins.transform.getScale()
        # this somewhat confusingly-named method also ensures that scale is a Vector3
        # for VR, this would be 0.001 m/mm

        scope.light.shadowCameraNear *= controller.plugins.transform.scale.x
        scope.light.shadowCameraFar  *= controller.plugins.transform.scale.x
        scope.light.target.position.multiply(controller.plugins.transform.scale)
        scope.light.position.multiply(controller.plugins.transform.scale)

      if controller.plugins.transform.vr == true
        scope.camera.position.set(0,0,0)

      if controller.plugins.transform.vr == 'desktop'
        scope.camera.position.set(0,0.15,0.3)




  baseBoneRotation = (new THREE.Quaternion).setFromEuler(
    new THREE.Euler(Math.PI / 2, 0, 0)
  );



  boneScale  = 1 / 6
  jointScale = 1 / 5

  boneRadius = null
  jointRadius = null

  material = null

  armTopAndBottomRotation = (new THREE.Quaternion).setFromEuler(
    new THREE.Euler(0, 0, Math.PI / 2)
  );


  HandMesh.onMeshCreated = (mesh)->
    controller.emit('handMeshCreated', mesh)

  HandMesh.onMeshUsed = (mesh)->
    controller.emit('handMeshUsed', mesh)




  @use('handEntry')
  @use('handHold')

  # this allows a null scene to be passed in for delayed-initialization.
  if scope.scene == undefined
    console.assert(scope.targetEl)

    if @plugins.transform && @plugins.transform.getScale()
      scale = @plugins.transform.scale.x # we just grab one value, as they're usually all the same.

    initScene(scope.targetEl, scale)
    scope.addShadowCamera()



  # Preload two hands
  if scope.scene
    HandMesh.create()
    HandMesh.create()

    # have rendered called by leap, rather than animation frame, to make sure there's no one-frame-delay.
    # we wrap this to allow the render method to be replaced
    if Leap.version.major == 0 && Leap.version.minor < 7 && Leap.version.dot < 4
      console.warn("BoneHand default scene render requires LeapJS > 0.6.3. You're running have #{Leap.version.full}")

    @on 'frameEnd', (timestamp)->
      if scope.render
        scope.render(timestamp)

  @on 'handLost', boneHandLost


  {

    hand: onHand

  }