Commit ec428a05 authored by amandaghassaei's avatar amandaghassaei

beginning vive support

parent 25b83a1b
/**
* @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;
};
};
This diff is collapsed.
/**
* @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;
/**
* @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;
}
};
......@@ -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">
......
/**
* 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
......@@ -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");
// }
......
......@@ -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
......@@ -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
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment