WebVR Support - THREE.js & WebVR boilerplate

README.md

@@ -1,4 +1,5 @@
 ## noVNC: HTML5 VNC Client
+----
 
 [![Build Status](https://travis-ci.org/novnc/noVNC.svg?branch=master)](https://travis-ci.org/novnc/noVNC)
 
@@ -16,6 +17,43 @@ Many companies, projects and products have integrated noVNC including
 [the Projects and Companies wiki page](https://github.com/novnc/noVNC/wiki/Projects-and-companies-using-noVNC)
 for a more complete list with additional info and links.
 
+### Now with WebVR support
+![vnc-vr](https://cloud.githubusercontent.com/assets/6830845/26262585/30d4b1a6-3ccd-11e7-9329-2197ddaa534e.png)
+  I have adapted the WebVR boilerplate with a basic Three.js scene to make this VNC client work in VR on a mobile device.
+  https://github.com/borismus/webvr-boilerplate
+
+  I Used tightvncserver on linux to host a display on vnc. I ran these commands on the terminal inside the root folder.
+
+  https://knowledgelayer.softlayer.com/learning/tightvnc-server-ubuntu-1604
+
+
+  ```bash
+
+  # Install tight VNC
+  sudo apt-get install tightvncserver.
+
+  # Start VNC server on display :2
+  vncserver :2 -geometry 4096x1024
+
+  # Launch websockify in noVNC folder.
+  ./utils/launch.sh --vnc localhost:5902 # 590X port number maps to display number on tight vnc.
+
+  ```
+
+  Then connect to your laptop from your smart phone by opening a browser to your laptops IP. 
+
+  ```
+  http://<IP_OF_YOUR_LAPTOP>:6080/vnc_lite_vr.html
+  ```
+
+  The password prompt will still appear at the top.
+
+  You can use large resolutions with the screen enlarged in VR and curved around you. 
+   ![recording 2](https://cloud.githubusercontent.com/assets/6830845/26530856/fda108b6-43d4-11e7-911d-0ea582cc21d8.gif)
+
+  TODO: add input??
+
+
 ### News/help/contact
 
 Notable commits, announcements and news are posted to
@@ -102,6 +140,8 @@ WebSockets to TCP socket proxy. There is a python proxy included
   Connect button and enjoy!
 
 
+
+
 ### Other Pages
 
 * [Modules/API](https://github.com/novnc/noVNC/wiki/Modules-API) - The library

core/rfb.js

@@ -1009,7 +1009,7 @@ RFB.prototype = {
                 } else {
                     return this._fail("Authentication failure");
                 }
-                return false;
+                //return false; causes { [TypeScript error: novnc/core/rfb.js(1012,17): Error TS7027: Unreachable code detected.]
             case 2:
                 return this._fail("Too many authentication attempts");
             default:

vendor/VRControls.js

@@ -0,0 +1,173 @@
+/**
+ * @author dmarcos / https://github.com/dmarcos
+ * @author mrdoob / http://mrdoob.com
+ */
+
+THREE.VRControls = function ( object, onError ) {
+
+	var scope = this;
+
+	var vrDisplay, vrDisplays;
+
+	var standingMatrix = new THREE.Matrix4();
+
+	var frameData = null;
+
+	if ( 'VRFrameData' in window ) {
+
+		frameData = new VRFrameData();
+
+	}
+
+	function gotVRDisplays( displays ) {
+
+		vrDisplays = displays;
+
+		if ( displays.length > 0 ) {
+
+			vrDisplay = displays[ 0 ];
+
+		} else {
+
+			if ( onError ) onError( 'VR input not available.' );
+
+		}
+
+	}
+
+	if ( navigator.getVRDisplays ) {
+
+		navigator.getVRDisplays().then( gotVRDisplays ).catch ( function () {
+
+			console.warn( 'THREE.VRControls: Unable to get VR Displays' );
+
+		} );
+
+	}
+
+	// the Rift SDK returns the position in meters
+	// this scale factor allows the user to define how meters
+	// are converted to scene units.
+
+	this.scale = 1;
+
+	// If true will use "standing space" coordinate system where y=0 is the
+	// floor and x=0, z=0 is the center of the room.
+	this.standing = false;
+
+	// Distance from the users eyes to the floor in meters. Used when
+	// standing=true but the VRDisplay doesn't provide stageParameters.
+	this.userHeight = 1.6;
+
+	this.getVRDisplay = function () {
+
+		return vrDisplay;
+
+	};
+
+	this.setVRDisplay = function ( value ) {
+
+		vrDisplay = value;
+
+	};
+
+	this.getVRDisplays = function () {
+
+		console.warn( 'THREE.VRControls: getVRDisplays() is being deprecated.' );
+		return vrDisplays;
+
+	};
+
+	this.getStandingMatrix = function () {
+
+		return standingMatrix;
+
+	};
+
+	this.update = function () {
+
+		if ( vrDisplay ) {
+
+			var pose;
+
+			if ( vrDisplay.getFrameData ) {
+
+				vrDisplay.getFrameData( frameData );
+				pose = frameData.pose;
+
+			} else if ( vrDisplay.getPose ) {
+
+				pose = vrDisplay.getPose();
+
+			}
+
+			if ( pose.orientation !== null ) {
+
+				object.quaternion.fromArray( pose.orientation );
+
+			}
+
+			if ( pose.position !== null ) {
+
+				object.position.fromArray( pose.position );
+
+			} else {
+
+				object.position.set( 0, 0, 0 );
+
+			}
+
+			if ( this.standing ) {
+
+				if ( vrDisplay.stageParameters ) {
+
+					object.updateMatrix();
+
+					standingMatrix.fromArray( vrDisplay.stageParameters.sittingToStandingTransform );
+					object.applyMatrix( standingMatrix );
+
+				} else {
+
+					object.position.setY( object.position.y + this.userHeight );
+
+				}
+
+			}
+
+			object.position.multiplyScalar( scope.scale );
+
+		}
+
+	};
+
+	this.resetPose = function () {
+
+		if ( vrDisplay ) {
+
+			vrDisplay.resetPose();
+
+		}
+
+	};
+
+	this.resetSensor = function () {
+
+		console.warn( 'THREE.VRControls: .resetSensor() is now .resetPose().' );
+		this.resetPose();
+
+	};
+
+	this.zeroSensor = function () {
+
+		console.warn( 'THREE.VRControls: .zeroSensor() is now .resetPose().' );
+		this.resetPose();
+
+	};
+
+	this.dispose = function () {
+
+		vrDisplay = null;
+
+	};
+
+};