beginning vive support

dependencies/VRControls.js

+/**
+ * @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.dispose = function () {
+
+		vrDisplay = null;
+
+	};
+
+};

dependencies/ViveController.js

+/**
+ * @author mrdoob / http://mrdoob.com
+ * @author stewdio / http://stewd.io
+ */
+
+THREE.ViveController = function ( id ) {
+
+	THREE.Object3D.call( this );
+
+	var scope = this;
+	var gamepad;
+
+	var axes = [ 0, 0 ];
+	var thumbpadIsPressed = false;
+	var triggerIsPressed = false;
+	var gripsArePressed = false;
+	var menuIsPressed = false;
+
+	function findGamepad( id ) {
+
+		// Iterate across gamepads as Vive Controllers may not be
+		// in position 0 and 1.
+
+		var gamepads = navigator.getGamepads();
+
+		for ( var i = 0, j = 0; i < 4; i ++ ) {
+
+			var gamepad = gamepads[ i ];
+
+			if ( gamepad && ( gamepad.id === 'OpenVR Gamepad' || gamepad.id === 'Oculus Touch (Left)' || gamepad.id === 'Oculus Touch (Right)' ) ) {
+
+				if ( j === id ) return gamepad;
+
+				j ++;
+
+			}
+
+		}
+
+	}
+
+	this.matrixAutoUpdate = false;
+	this.standingMatrix = new THREE.Matrix4();
+
+	this.getGamepad = function () {
+
+		return gamepad;
+
+	};
+
+	this.getButtonState = function ( button ) {
+
+		if ( button === 'thumbpad' ) return thumbpadIsPressed;
+		if ( button === 'trigger' ) return triggerIsPressed;
+		if ( button === 'grips' ) return gripsArePressed;
+		if ( button === 'menu' ) return menuIsPressed;
+
+	};
+
+	this.update = function () {
+
+		gamepad = findGamepad( id );
+
+		if ( gamepad !== undefined && gamepad.pose !== undefined ) {
+
+			if ( gamepad.pose === null ) return; // No user action yet
+
+			//  Position and orientation.
+
+			var pose = gamepad.pose;
+
+			if ( pose.position !== null ) scope.position.fromArray( pose.position );
+			if ( pose.orientation !== null ) scope.quaternion.fromArray( pose.orientation );
+			scope.matrix.compose( scope.position, scope.quaternion, scope.scale );
+			scope.matrix.multiplyMatrices( scope.standingMatrix, scope.matrix );
+			scope.matrixWorldNeedsUpdate = true;
+			scope.visible = true;
+
+			//  Thumbpad and Buttons.
+
+			if ( axes[ 0 ] !== gamepad.axes[ 0 ] || axes[ 1 ] !== gamepad.axes[ 1 ] ) {
+
+				axes[ 0 ] = gamepad.axes[ 0 ]; //  X axis: -1 = Left, +1 = Right.
+				axes[ 1 ] = gamepad.axes[ 1 ]; //  Y axis: -1 = Bottom, +1 = Top.
+				scope.dispatchEvent( { type: 'axischanged', axes: axes } );
+
+			}
+
+			if ( thumbpadIsPressed !== gamepad.buttons[ 0 ].pressed ) {
+
+				thumbpadIsPressed = gamepad.buttons[ 0 ].pressed;
+				scope.dispatchEvent( { type: thumbpadIsPressed ? 'thumbpaddown' : 'thumbpadup' } );
+
+			}
+
+			if ( triggerIsPressed !== gamepad.buttons[ 1 ].pressed ) {
+
+				triggerIsPressed = gamepad.buttons[ 1 ].pressed;
+				scope.dispatchEvent( { type: triggerIsPressed ? 'triggerdown' : 'triggerup' } );
+
+			}
+
+			if ( gripsArePressed !== gamepad.buttons[ 2 ].pressed ) {
+
+				gripsArePressed = gamepad.buttons[ 2 ].pressed;
+				scope.dispatchEvent( { type: gripsArePressed ? 'gripsdown' : 'gripsup' } );
+
+			}
+
+			if ( menuIsPressed !== gamepad.buttons[ 3 ].pressed ) {
+
+				menuIsPressed = gamepad.buttons[ 3 ].pressed;
+				scope.dispatchEvent( { type: menuIsPressed ? 'menudown' : 'menuup' } );
+
+			}
+
+		} else {
+
+			scope.visible = false;
+
+		}
+
+	};
+
+};
+
+THREE.ViveController.prototype = Object.create( THREE.Object3D.prototype );
+THREE.ViveController.prototype.constructor = THREE.ViveController;

dependencies/WebVR.js

+/**
+ * @author mrdoob / http://mrdoob.com
+ * Based on @tojiro's vr-samples-utils.js
+ */
+
+var WEBVR = {
+
+	isLatestAvailable: function () {
+
+		console.warn( 'WEBVR: isLatestAvailable() is being deprecated. Use .isAvailable() instead.' );
+		return this.isAvailable();
+
+	},
+
+	isAvailable: function () {
+
+		return navigator.getVRDisplays !== undefined;
+
+	},
+
+	getVRDisplay: function ( onDisplay ) {
+
+		if ( 'getVRDisplays' in navigator ) {
+
+			navigator.getVRDisplays()
+				.then( function ( displays ) {
+					onDisplay( displays[ 0 ] );
+				} );
+
+		}
+
+	},
+
+	getMessage: function () {
+
+		var message;
+
+		if ( navigator.getVRDisplays ) {
+
+			navigator.getVRDisplays().then( function ( displays ) {
+
+				if ( displays.length === 0 ) message = 'WebVR supported, but no VRDisplays found.';
+
+			} );
+
+		} else {
+
+			message = 'Your browser does not support WebVR. See <a href="http://webvr.info">webvr.info</a> for assistance.';
+
+		}
+
+		if ( message !== undefined ) {
+
+			var container = document.createElement( 'div' );
+			container.style.position = 'absolute';
+			container.style.left = '0';
+			container.style.top = '0';
+			container.style.right = '0';
+			container.style.zIndex = '999';
+			container.align = 'center';
+
+			var error = document.createElement( 'div' );
+			error.style.fontFamily = 'sans-serif';
+			error.style.fontSize = '16px';
+			error.style.fontStyle = 'normal';
+			error.style.lineHeight = '26px';
+			error.style.backgroundColor = '#fff';
+			error.style.color = '#000';
+			error.style.padding = '10px 20px';
+			error.style.margin = '50px';
+			error.style.display = 'inline-block';
+			error.innerHTML = message;
+			container.appendChild( error );
+
+			return container;
+
+		}
+
+	},
+
+	getButton: function ( display, canvas ) {
+
+		if ( 'VREffect' in THREE && display instanceof THREE.VREffect ) {
+
+			console.error( 'WebVR.getButton() now expects a VRDisplay.' );
+			return document.createElement( 'button' );
+
+		}
+
+		var button = document.createElement( 'button' );
+		button.style.position = 'absolute';
+		button.style.left = 'calc(50% - 50px)';
+		button.style.bottom = '20px';
+		button.style.width = '100px';
+		button.style.border = '0';
+		button.style.padding = '8px';
+		button.style.cursor = 'pointer';
+		button.style.backgroundColor = '#000';
+		button.style.color = '#fff';
+		button.style.fontFamily = 'sans-serif';
+		button.style.fontSize = '13px';
+		button.style.fontStyle = 'normal';
+		button.style.textAlign = 'center';
+		button.style.zIndex = '999';
+
+		if ( display ) {
+
+			button.textContent = 'ENTER VR';
+			button.onclick = function () {
+
+				display.isPresenting ? display.exitPresent() : display.requestPresent( [ { source: canvas } ] );
+
+			};
+
+			window.addEventListener( 'vrdisplaypresentchange', function () {
+
+				button.textContent = display.isPresenting ? 'EXIT VR' : 'ENTER VR';
+
+			}, false );
+
+		} else {
+
+			button.textContent = 'NO VR DISPLAY';
+
+		}
+
+		return button;
+
+	}
+
+};

index.html

@@ -284,7 +284,6 @@
             float dotNormals = dot(normal1, normal2);//normals are already normalized, no need to divide by length
             if (dotNormals < -1.0) dotNormals = -1.0;
             else if (dotNormals > 1.0) dotNormals = 1.0;
-            //float theta = acos(dotNormals);
 
             vec2 creaseVectorIndices = texture2D(u_creaseVectors, scaledFragCoord).xy;
             vec2 creaseNodeIndex = vec2(mod(creaseVectorIndices[0], u_textureDim.x)+0.5, floor(creaseVectorIndices[0]/u_textureDim.x)+0.5);
@@ -301,10 +300,7 @@
 
             float theta = atan(y, x);
 
-            //float sign = dot(cross(normal1, normal2), creaseVector);
-            //if (sign < 0.0) theta *= -1.0;
             float diff = theta-lastTheta[0];
-            float projectedTheta = lastTheta[0] + lastTheta[1]*u_dt;
             if (diff < -5.0) {
                 diff += TWO_PI;
                 theta = lastTheta[0] + diff;
@@ -312,7 +308,7 @@
                 diff  -= TWO_PI;
                 theta = lastTheta[0] + diff;
             }
-            gl_FragColor = vec4(theta, creaseVectorIndices[1], lastTheta[2], lastTheta[3]);//[theta, w, normal1Index, normal2Index]
+            gl_FragColor = vec4(theta, theta, lastTheta[2], lastTheta[3]);//[theta, w, normal1Index, normal2Index]
         }
     </script>
 
@@ -345,7 +341,9 @@
             scaledNodeIndex = nodeIndex/u_textureDim;
             vec3 c = texture2D(u_lastPosition, scaledNodeIndex).xyz + texture2D(u_originalPosition, scaledNodeIndex).xyz;
 
-            gl_FragColor = vec4(normalize(cross(b-a, c-a)), 0.0);
+            vec3 normal = normalize(cross(b-a, c-a));
+
+            gl_FragColor = vec4(normal, 0.0);
         }
     </script>
 
@@ -372,6 +370,11 @@
     <script type="text/javascript" src="dependencies/Detector.js"></script>
     <script type="text/javascript" src="dependencies/RenderPass.js"></script>
 
+    <script type="text/javascript" src="dependencies/WebVR.js"></script>
+    <script type="text/javascript" src="dependencies/VREffect.js"></script>
+    <script type="text/javascript" src="dependencies/ViveController.js"></script>
+    <script type="text/javascript" src="dependencies/VRControls.js"></script>
+
     <script type="text/javascript" src="js/dynamic/GLBoilerplate.js"></script>
     <script type="text/javascript" src="js/dynamic/GPUMath.js"></script>
     <script type="text/javascript" src="js/controls.js"></script>
@@ -388,7 +391,7 @@
     <script type="text/javascript" src="js/saveSTL.js"></script>
     <script type="text/javascript" src="js/saveFOLD.js"></script>
     <script type="text/javascript" src="js/importer.js"></script>
-
+    <script type="text/javascript" src="js/ViveInterface.js"></script>
 
     <script type="text/javascript" src="js/main.js"></script>
 </head>
@@ -605,7 +608,7 @@
             <!--</div>-->
             VR:
             <div class="indent smallTxt">
-                Status: &nbsp;<span id="VRstatus">No device connected</span>
+                Status: &nbsp;<span id="VRstatus"></span>
                 <a class="about floatRight" href="#" id="aboutVR"><span class="fui-question-circle"></span></a><br/>
                 <div id="VRoptions">
                     <label class="checkbox" for="vrEnabled">

js/ViveInterface.js

+/**
+ * Created by amandaghassaei on 5/10/17.
+ */
+
+
+function initViveInterface(globals){
+
+    var $status = $("#VRstatus");
+
+    if ( WEBVR.isAvailable() === false ) {
+        $status.html("WebVR not supported by this browser<br/>see <a href='https://webvr.info/' target='_blank'>webvr.info</a> for more info.");
+        $("#VRoptions").hide();
+        return;
+    }
+
+    var controls, controller1, controller2, effect;
+
+    var mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 1,1 ), new THREE.MeshLambertMaterial({color:0xff0000}));
+
+    function setup(){
+
+        controls = new THREE.VRControls(globals.threeView.camera);
+        controls.standing = true;
+
+        // controllers
+        controller1 = new THREE.ViveController( 0 );
+        controller1.standingMatrix = controls.getStandingMatrix();
+        globals.threeView.scene.add( controller1 );
+
+        controller2 = new THREE.ViveController( 1 );
+        controller2.standingMatrix = controls.getStandingMatrix();
+        globals.threeView.scene.add( controller2 );
+
+        controller1.add(mesh.clone());
+        controller2.add(mesh.clone());
+
+        effect = new THREE.VREffect(globals.threeView.renderer);
+
+    }
+
+    function connect(){
+        WEBVR.getVRDisplay( function ( display ) {
+
+            document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
+
+        } );
+    }
+
+    function disconnect(){
+
+    }
+
+    function render(){
+        controller1.update();
+        controller2.update();
+        controls.update();
+        effect.render( globals.threeView.scene, globals.threeView.camera );
+    }
+
+    return {
+        effect: effect,
+        render: render
+    }
+
+}
\ No newline at end of file

js/dynamic/dynamicSolver.js

@@ -61,6 +61,7 @@ function initDynamicSolver(globals){
         globals.gpuMath.step("zeroTexture", [], "u_lastPosition");
         globals.gpuMath.step("zeroTexture", [], "u_velocity");
         globals.gpuMath.step("zeroTexture", [], "u_lastVelocity");
+        //todo reset theta
         render();
     }
 
@@ -172,7 +173,9 @@ function initDynamicSolver(globals){
         //     var pixels = new Uint8Array(height*textureDimCreases*4*vectorLength);
         //     globals.gpuMath.readPixels(0, 0, textureDimCreases * vectorLength, height, pixels);
         //     var parsedPixels = new Float32Array(pixels.buffer);
-        //     console.log(parsedPixels);
+        //     for (var i=0;i<parsedPixels.length;i+=2){
+        //         if (Math.abs(parsedPixels[i+1])>3.0) console.log(parsedPixels[i+1]);
+        //     }
         // } else {
         //     console.log("here");
         // }

js/main.js

@@ -17,5 +17,6 @@ $(function() {
     globals.staticSolver = initStaticSolver(globals);
     globals.dynamicSolver = initDynamicSolver(globals);
     globals.pattern = initPattern(globals);
+    globals.vive = initViveInterface(globals);
     $(".demo[data-url='Tessellations/waterbomb.svg']").click();
 });
\ No newline at end of file

js/threeView.js

@@ -122,6 +122,10 @@ function initThreeView(globals) {
     }
 
     function _render(){
+        if (globals.vrEnabled){
+            globals.vive.render();
+            return;
+        }
         if (globals.ambientOcclusion) {
             // Render depth into depthRenderTarget
             scene.overrideMaterial = depthMaterial;
@@ -129,13 +133,19 @@ function initThreeView(globals) {
             // Render renderPass and SSAO shaderPass
             scene.overrideMaterial = null;
             effectComposer.render();
-        } else {
-            renderer.render(scene, camera);
+            return;
         }
+        renderer.render(scene, camera);
     }
 
     function _loop(callback){
         callback();
+        if (globals.vrEnabled){
+            globals.vive.effect.requestAnimationFrame(function(){
+                _loop(callback);
+            });
+            return;
+        }
         requestAnimationFrame(function(){
             if (pauseFlag) {
                 pauseFlag = false;
@@ -231,6 +241,7 @@ function initThreeView(globals) {
         enableControls: enableControls,
         scene: scene,
         camera: camera,
+        renderer: renderer,
         running: running,
         setScale:setScale,
         saveSVG: saveSVG