From 1b8f4015959db4cc4d99ac423c0dcb454380c008 Mon Sep 17 00:00:00 2001
From: Diego Marcos <diego.marcos@gmail.com>
Date: Tue, 7 Oct 2014 17:52:19 -0700
Subject: [PATCH] Ports demo to native VR API

---
 v2/oculus/index.html               |  31 +---
 v2/oculus/javascript/VRControls.js |  85 +++++++++++
 v2/oculus/javascript/VREffect.js   | 238 +++++++++++++++++++++++++++++
 v2/oculus/javascript/scene.coffee  |  21 ++-
 v2/oculus/javascript/scene.js      |  27 ++--
 5 files changed, 364 insertions(+), 38 deletions(-)
 create mode 100644 v2/oculus/javascript/VRControls.js
 create mode 100644 v2/oculus/javascript/VREffect.js
diff --git a/v2/oculus/index.html b/v2/oculus/index.html
index 6149e42..9224217 100644
--- a/v2/oculus/index.html
+++ b/v2/oculus/index.html
@@ -1,15 +1,14 @@
 <html>
 <head>
+  <meta charset="utf-8">
   <title>Transformation and display for head-mounted Leap Motion Controller</title>
 
   <!-- note - the light grabbing doesn't work with r68 -->
-  <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
 
-  <script src="//js.leapmotion.com/leap-0.6.2.min.js"></script>
-  <script src="//js.leapmotion.com/leap-plugins-0.1.7.min.js"></script>
-  <script src="//js.leapmotion.com/leap.rigged-hand-0.1.5.min.js"></script>
-  <!-- Slightly modified version of OculusRiftEffect.js from THREE.js to target for DK2 -->
-  <script type="text/javascript" src="javascript/OculusRiftEffect.js"></script>
+  <script src="http://js.leapmotion.com/leap-0.6.2.min.js"></script>
+  <script src="http://js.leapmotion.com/leap-plugins-0.1.7.min.js"></script>
+  <script src="http://js.leapmotion.com/leap.rigged-hand-0.1.5.js"></script>
 
   <style>
     body {
@@ -33,31 +32,17 @@
 <div class="info">
   <p>
     Designed to be used with a Oculus-mounted Leap Device.
-    <a href="#" onclick="goFullScreen();">GO FULLSCREEN</a>
+    Press 'f' to go fullscreen
   </p>
-  <script>
-    function goFullScreen(){
-      var elem = document.body;
-      if (elem.requestFullscreen) {
-        elem.requestFullscreen();
-      } else if (elem.msRequestFullscreen) {
-        elem.msRequestFullscreen();
-      } else if (elem.mozRequestFullScreen) {
-        elem.mozRequestFullScreen();
-      } else if (elem.webkitRequestFullscreen) {
-        elem.webkitRequestFullscreen();
-      }
-    }
-  </script>
   <p>
     Any visible pinched hand will have a light attached, allowing you to illuminate two rotating blue cubes.
   </p>
 
 </div>
 
-
-
 </body>
+<script src="javascript/VREffect.js"></script>
+<script src="javascript/VRControls.js"></script>
 <script src="javascript/scene.js"></script>
 <script src="javascript/controller.js"></script>
 </html>
diff --git a/v2/oculus/javascript/VRControls.js b/v2/oculus/javascript/VRControls.js
new file mode 100644
index 0000000..955970b
--- /dev/null
+++ b/v2/oculus/javascript/VRControls.js
@@ -0,0 +1,85 @@
+/**
+ * @author dmarcos / https://github.com/dmarcos
+ */
+
+THREE.VRControls = function ( camera, done ) {
+
+	this._camera = camera;
+
+	this._init = function () {
+		var self = this;
+		if ( !navigator.mozGetVRDevices && !navigator.getVRDevices ) {
+			if ( done ) {
+				done("Your browser is not VR Ready");
+			}
+			return;
+		}
+		if ( navigator.getVRDevices ) {
+			navigator.getVRDevices().then( gotVRDevices );
+		} else {
+			navigator.mozGetVRDevices( gotVRDevices );
+		}
+		function gotVRDevices( devices ) {
+			var vrInput;
+			var error;
+			for ( var i = 0; i < devices.length; ++i ) {
+				if ( devices[i] instanceof PositionSensorVRDevice ) {
+					vrInput = devices[i]
+					self._vrInput = vrInput;
+					break; // We keep the first we encounter
+				}
+			}
+			if ( done ) {
+				if ( !vrInput ) {
+				 error = 'HMD not available';
+				}
+				done( error );
+			}
+		}
+	};
+
+	this._init();
+
+	this.update = function() {
+		var camera = this._camera;
+		var quat;
+		var vrState = this.getVRState();
+		if ( !vrState ) {
+			return;
+		}
+		// Applies head rotation from sensors data.
+		if ( camera ) {
+			camera.quaternion.fromArray( vrState.hmd.rotation );
+		}
+	};
+
+	this.zeroSensor = function() {
+		var vrInput = this._vrInput;
+		if ( !vrInput ) {
+			return;
+		}
+		vrInput.zeroSensor();
+	};
+
+	this.getVRState = function() {
+		var vrInput = this._vrInput;
+		var orientation;
+		var vrState;
+		if ( !vrInput ) {
+			return null;
+		}
+		orientation	= vrInput.getState().orientation;
+		vrState = {
+			hmd : {
+				rotation : [
+					orientation.x,
+					orientation.y,
+					orientation.z,
+					orientation.w
+				]
+			}
+		};
+		return vrState;
+	};
+
+};
\ No newline at end of file
diff --git a/v2/oculus/javascript/VREffect.js b/v2/oculus/javascript/VREffect.js
new file mode 100644
index 0000000..31a737d
--- /dev/null
+++ b/v2/oculus/javascript/VREffect.js
@@ -0,0 +1,238 @@
+/**
+ * @author dmarcos / https://github.com/dmarcos
+ *
+ * It handles stereo rendering
+ * If mozGetVRDevices and getVRDevices APIs are not available it gracefuly falls back to a
+ * regular renderer
+ *
+ * The HMD supported is the Oculus DK1 and The Web API doesn't currently allow
+ * to query for the display resolution (only the chrome API allows it).
+ * The dimensions of the screen are temporarly hardcoded (1280 x 800).
+ *
+ * For VR mode to work it has to be used with the Oculus enabled builds of Firefox or Chrome:
+ *
+ * Firefox:
+ *
+ * OSX: http://people.mozilla.com/~vladimir/vr/firefox-33.0a1.en-US.mac.dmg
+ * WIN: http://people.mozilla.com/~vladimir/vr/firefox-33.0a1.en-US.win64-x86_64.zip
+ *
+ * Chrome builds:
+ *
+ * https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ&usp=sharing#list
+ *
+ */
+THREE.VREffect = function ( renderer, done ) {
+
+	var cameraLeft = new THREE.PerspectiveCamera();
+	var cameraRight = new THREE.PerspectiveCamera();
+
+	this._renderer = renderer;
+
+	this._init = function() {
+		var self = this;
+		if ( !navigator.mozGetVRDevices && !navigator.getVRDevices ) {
+			if ( done ) {
+				done("Your browser is not VR Ready");
+			}
+			return;
+		}
+		if ( navigator.getVRDevices ) {
+			navigator.getVRDevices().then( gotVRDevices );
+		} else {
+			navigator.mozGetVRDevices( gotVRDevices );
+		}
+		function gotVRDevices( devices ) {
+			var vrHMD;
+			var error;
+			for ( var i = 0; i < devices.length; ++i ) {
+				if ( devices[i] instanceof HMDVRDevice ) {
+					vrHMD = devices[i];
+					self._vrHMD = vrHMD;
+					self.leftEyeTranslation = vrHMD.getEyeTranslation( "left" );
+					self.rightEyeTranslation = vrHMD.getEyeTranslation( "right" );
+					self.leftEyeFOV = vrHMD.getRecommendedEyeFieldOfView( "left" );
+					self.rightEyeFOV = vrHMD.getRecommendedEyeFieldOfView( "right" );
+					break; // We keep the first we encounter
+				}
+			}
+			if ( done ) {
+				if ( !vrHMD ) {
+				 error = 'HMD not available';
+				}
+				done( error );
+			}
+		}
+	};
+
+	this._init();
+
+	this.render = function ( scene, camera ) {
+		var renderer = this._renderer;
+		var vrHMD = this._vrHMD;
+		renderer.enableScissorTest( false );
+		// VR render mode if HMD is available
+		if ( vrHMD ) {
+			this.renderStereo.apply( this, arguments );
+			return;
+		}
+		// Regular render mode if not HMD
+		renderer.render.apply( this._renderer, arguments );
+	};
+
+	this.renderStereo = function( scene, camera, renderTarget, forceClear ) {
+
+		var leftEyeTranslation = this.leftEyeTranslation;
+		var rightEyeTranslation = this.rightEyeTranslation;
+		var renderer = this._renderer;
+		var rendererWidth = renderer.domElement.width / renderer.devicePixelRatio;
+		var rendererHeight = renderer.domElement.height / renderer.devicePixelRatio;
+		var eyeDivisionLine = rendererWidth / 2;
+
+		renderer.enableScissorTest( true );
+		renderer.clear();
+
+		if ( camera.parent === undefined ) {
+			camera.updateMatrixWorld();
+		}
+
+		cameraLeft.projectionMatrix = this.FovToProjection( this.leftEyeFOV, true, camera.near, camera.far );
+		cameraRight.projectionMatrix = this.FovToProjection( this.rightEyeFOV, true, camera.near, camera.far );
+
+		camera.matrixWorld.decompose( cameraLeft.position, cameraLeft.quaternion, cameraLeft.scale );
+		camera.matrixWorld.decompose( cameraRight.position, cameraRight.quaternion, cameraRight.scale );
+
+		cameraLeft.translateX( leftEyeTranslation.x );
+		cameraRight.translateX( rightEyeTranslation.x );
+
+		// render left eye
+		renderer.setViewport( 0, 0, eyeDivisionLine, rendererHeight );
+		renderer.setScissor( 0, 0, eyeDivisionLine, rendererHeight );
+		renderer.render( scene, cameraLeft );
+
+		// render right eye
+		renderer.setViewport( eyeDivisionLine, 0, eyeDivisionLine, rendererHeight );
+		renderer.setScissor( eyeDivisionLine, 0, eyeDivisionLine, rendererHeight );
+		renderer.render( scene, cameraRight );
+
+	};
+
+	this.setSize = function( width, height ) {
+		renderer.setSize( width, height );
+	};
+
+	this.setFullScreen = function( enable ) {
+		var renderer = this._renderer;
+		var vrHMD = this._vrHMD;
+		var canvasOriginalSize = this._canvasOriginalSize;
+		if (!vrHMD) {
+			return;
+		}
+		// If state doesn't change we do nothing
+		if ( enable === this._fullScreen ) {
+			return;
+		}
+		this._fullScreen = !!enable;
+
+		// VR Mode disabled
+		if ( !enable ) {
+			// Restores canvas original size
+			renderer.setSize( canvasOriginalSize.width, canvasOriginalSize.height );
+			return;
+		}
+		// VR Mode enabled
+		this._canvasOriginalSize = {
+			width: renderer.domElement.width,
+			height: renderer.domElement.height
+		};
+		// Hardcoded Rift display size
+		renderer.setSize( 1280, 800, false );
+		this.startFullscreen();
+	};
+
+	this.startFullscreen = function() {
+		var self = this;
+		var renderer = this._renderer;
+		var vrHMD = this._vrHMD;
+		var canvas = renderer.domElement;
+		var fullScreenChange =
+			canvas.mozRequestFullScreen? 'mozfullscreenchange' : 'webkitfullscreenchange';
+
+		document.addEventListener( fullScreenChange, onFullScreenChanged, false );
+		function onFullScreenChanged() {
+			if ( !document.mozFullScreenElement && !document.webkitFullScreenElement ) {
+				self.setFullScreen( false );
+			}
+		}
+		if ( canvas.mozRequestFullScreen ) {
+			canvas.mozRequestFullScreen( { vrDisplay: vrHMD } );
+		} else {
+			canvas.webkitRequestFullscreen( { vrDisplay: vrHMD } );
+		}
+	};
+
+	this.FovToNDCScaleOffset = function( fov ) {
+		var pxscale = 2.0 / (fov.leftTan + fov.rightTan);
+		var pxoffset = (fov.leftTan - fov.rightTan) * pxscale * 0.5;
+		var pyscale = 2.0 / (fov.upTan + fov.downTan);
+		var pyoffset = (fov.upTan - fov.downTan) * pyscale * 0.5;
+		return { scale: [pxscale, pyscale], offset: [pxoffset, pyoffset] };
+	};
+
+	this.FovPortToProjection = function( fov, rightHanded /* = true */, zNear /* = 0.01 */, zFar /* = 10000.0 */ )
+	{
+		rightHanded = rightHanded === undefined ? true : rightHanded;
+		zNear = zNear === undefined ? 0.01 : zNear;
+		zFar = zFar === undefined ? 10000.0 : zFar;
+
+		var handednessScale = rightHanded ? -1.0 : 1.0;
+
+		// start with an identity matrix
+		var mobj = new THREE.Matrix4();
+		var m = mobj.elements;
+
+		// and with scale/offset info for normalized device coords
+		var scaleAndOffset = this.FovToNDCScaleOffset(fov);
+
+		// X result, map clip edges to [-w,+w]
+		m[0*4+0] = scaleAndOffset.scale[0];
+		m[0*4+1] = 0.0;
+		m[0*4+2] = scaleAndOffset.offset[0] * handednessScale;
+		m[0*4+3] = 0.0;
+
+		// Y result, map clip edges to [-w,+w]
+		// Y offset is negated because this proj matrix transforms from world coords with Y=up,
+		// but the NDC scaling has Y=down (thanks D3D?)
+		m[1*4+0] = 0.0;
+		m[1*4+1] = scaleAndOffset.scale[1];
+		m[1*4+2] = -scaleAndOffset.offset[1] * handednessScale;
+		m[1*4+3] = 0.0;
+
+		// Z result (up to the app)
+		m[2*4+0] = 0.0;
+		m[2*4+1] = 0.0;
+		m[2*4+2] = zFar / (zNear - zFar) * -handednessScale;
+		m[2*4+3] = (zFar * zNear) / (zNear - zFar);
+
+		// W result (= Z in)
+		m[3*4+0] = 0.0;
+		m[3*4+1] = 0.0;
+		m[3*4+2] = handednessScale;
+		m[3*4+3] = 0.0;
+
+		mobj.transpose();
+
+		return mobj;
+	};
+
+	this.FovToProjection = function( fov, rightHanded /* = true */, zNear /* = 0.01 */, zFar /* = 10000.0 */ )
+	{
+		var fovPort = {
+			upTan: Math.tan(fov.upDegrees * Math.PI / 180.0),
+			downTan: Math.tan(fov.downDegrees * Math.PI / 180.0),
+			leftTan: Math.tan(fov.leftDegrees * Math.PI / 180.0),
+			rightTan: Math.tan(fov.rightDegrees * Math.PI / 180.0)
+		};
+		return this.FovPortToProjection(fovPort, rightHanded, zNear, zFar);
+	};
+
+};
diff --git a/v2/oculus/javascript/scene.coffee b/v2/oculus/javascript/scene.coffee
index aaa6d93..9b4cd32 100644
--- a/v2/oculus/javascript/scene.coffee
+++ b/v2/oculus/javascript/scene.coffee
@@ -12,11 +12,19 @@ window.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.inner
 renderer = new THREE.WebGLRenderer({antialias: true})
 renderer.setSize window.innerWidth, window.innerHeight
 
-effect = new THREE.OculusRiftEffect(renderer, { worldScale: 2 } );
-effect.setSize( window.innerWidth, window.innerHeight );
 
-renderer.shadowMapEnabled = true;
+vrEffect = new THREE.VREffect( renderer );
+vrControls = new THREE.VRControls( camera );
+
+onkey = (event) ->
+  if event.key == 'z'
+    vrControls.zeroSensor()
+  if event.key == 'f'
+    vrEffect.setFullScreen true;
 
+window.addEventListener("keypress", onkey, true);
+
+renderer.shadowMapEnabled = true;
 
 
 onResize = ->
@@ -24,7 +32,6 @@ onResize = ->
   camera.updateProjectionMatrix();
 
   renderer.setSize( window.innerWidth, window.innerHeight );
-  effect.setSize( window.innerWidth, window.innerHeight );
 
 window.addEventListener( 'resize', onResize , false );
 
@@ -88,8 +95,10 @@ render = ->
   cube2.rotation.x += scope.rate * 0.004
   cube2.rotation.y += scope.rate * 0.002
 
-  effect.render scene, camera
+  vrControls.update()
+
+  vrEffect.render scene, camera
 
   requestAnimationFrame render
 
-render()
+render()
\ No newline at end of file
diff --git a/v2/oculus/javascript/scene.js b/v2/oculus/javascript/scene.js
index c5fafab..20095ac 100644
--- a/v2/oculus/javascript/scene.js
+++ b/v2/oculus/javascript/scene.js
@@ -1,6 +1,6 @@
-// Generated by CoffeeScript 1.7.1
+// Generated by CoffeeScript 1.8.0
 (function() {
-  var createLight, cube, cube2, effect, geometry, material, onResize, render, renderer;
+  var createLight, cube, cube2, geometry, material, onResize, onkey, render, renderer, vrControls, vrEffect;
 
   window.scope = {
     x: 0,
@@ -19,19 +19,27 @@
 
   renderer.setSize(window.innerWidth, window.innerHeight);
 
-  effect = new THREE.OculusRiftEffect(renderer, {
-    worldScale: 2
-  });
+  vrEffect = new THREE.VREffect(renderer);
+
+  vrControls = new THREE.VRControls(camera);
+
+  onkey = function(event) {
+    if (event.key === 'z') {
+      vrControls.zeroSensor();
+    }
+    if (event.key === 'f') {
+      return vrEffect.setFullScreen(true);
+    }
+  };
 
-  effect.setSize(window.innerWidth, window.innerHeight);
+  window.addEventListener("keypress", onkey, true);
 
   renderer.shadowMapEnabled = true;
 
   onResize = function() {
     camera.aspect = window.innerWidth / window.innerHeight;
     camera.updateProjectionMatrix();
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    return effect.setSize(window.innerWidth, window.innerHeight);
+    return renderer.setSize(window.innerWidth, window.innerHeight);
   };
 
   window.addEventListener('resize', onResize, false);
@@ -100,7 +108,8 @@
     cube.rotation.y += scope.rate * 0.002;
     cube2.rotation.x += scope.rate * 0.004;
     cube2.rotation.y += scope.rate * 0.002;
-    effect.render(scene, camera);
+    vrControls.update();
+    vrEffect.render(scene, camera);
     return requestAnimationFrame(render);
   };
 
