Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added oculus rift support and first person controls #79

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
+576 −31
Open

added oculus rift support and first person controls #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
407b507
added oculus rendering and first person controls
sayangel Jun 9, 2014
81da4ed
updated oculus enabled to false.. makes more sense
sayangel Jun 9, 2014
aba352f
merged in new updates from upstream/master
sayangel Jul 3, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ module.exports = function(grunt) {
'src/shared/vendor/q.js',
'src/shared/vendor/three/three.js',
'src/shared/vendor/three/ColorConverter.js',
'src/shared/vendor/three/RiftCamera.js',
'src/shared/vendor/OculusBridge.js',
'src/shared/vendor/d3.js',
'src/shared/vendor/catiline.js',
'src/shared/vendor/dat.gui.js',
Expand Down Expand Up @@ -159,6 +161,6 @@ module.exports = function(grunt) {

// Run tests
grunt.registerTask('test', ['jshint', 'mocha_phantomjs']);

grunt.task.run('notify_hooks');
};
40 changes: 21 additions & 19 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,23 @@

<html>
<head>
<meta charset="utf-8">
<title>ViziCities Demo</title>

<link href="reset.css" rel="stylesheet" type="text/css">

<link href="../css/vizicities.css" rel="stylesheet" type="text/css">
<link href="../css/loading.css" rel="stylesheet" type="text/css">

<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}

body {
background: #ccc;
}
</style>
<meta charset="utf-8">
<title>ViziCities Architecture Example</title>

<link href="reset.css" rel="stylesheet" type="text/css">

<link href="../css/loading.css" rel="stylesheet" type="text/css">

<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}

body {
background: #ccc;
}
</style>
</head>
<body>
<div id="vizicities-container"></div>
Expand All @@ -33,6 +32,9 @@
VIZI.ENABLE_OUTLINES = false;
VIZI.ENABLE_ROADS = true;

//toggle oculus rendering
VIZI.ENABLE_OCULUS = false;

var city = new VIZI.City();
city.init({
coords: [-0.01924, 51.50358], // Canary Wharf
Expand All @@ -42,4 +44,4 @@
</script>

</body>
</html>
</html>
29 changes: 25 additions & 4 deletions src/client/controls/Controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* globals window, _, Q, VIZI */
/* globals window, _, Q, VIZI, OculusBridge */
(function() {
"use strict";

Expand All @@ -12,12 +12,20 @@

this.mouse = undefined;
this.keyboard = undefined;
this.bridge = undefined;
};

Controls.prototype.init = function(domElement, camera, options) {
if (options.enable) {
this.mouse = VIZI.Mouse.getInstance(domElement, camera);
this.keyboard = VIZI.Keyboard.getInstance(domElement);
if(VIZI.ENABLE_OCULUS){
VIZI.Log("Connecting to Oculus Bridge");
this.bridge = new OculusBridge(
{"debug":false}
);
this.bridge.connect();
}

this.subscribe("update", this.onUpdate);
this.subscribe("orbitControlCap", this.orbitCapReset);
Expand Down Expand Up @@ -46,6 +54,19 @@
this.publish("orbitControl", mouseState.downPos2dDelta, mouseState.camera.startTheta, mouseState.camera.startPhi);
}

// Oculus
if(VIZI.ENABLE_OCULUS){
//get quaternion values from oculus bridge
var quat = this.bridge.getOrientation();
this.publish("oculusControl", quat);
}

// First Person
if(keyboardState.keys.up || keyboardState.keys.down || keyboardState.keys.left || keyboardState.keys.right)
{
this.publish("firstPersonControl", keyboardState.keys);
}

// Zero deltas
this.mouse.resetDelta();
};
Expand All @@ -57,10 +78,10 @@
var instance;

// an emulation of static variables and methods
var _static = {
var _static = {
name: "VIZI.Controls",

// Method for getting an instance. It returns
// Method for getting an instance. It returns
// a singleton instance of a singleton object
getInstance: function() {
if ( instance === undefined ) {
Expand All @@ -73,4 +94,4 @@

return _static;
}());
}());
}());
18 changes: 15 additions & 3 deletions src/client/controls/Keyboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,18 @@
case 16:
key = "shift";
break;
case 38:
key = "up";
break;
case 40:
key = "down";
break;
case 37:
key = "left";
break;
case 39:
key = "right";
break;
default:
key = false;
}
Expand All @@ -65,10 +77,10 @@
var instance;

// an emulation of static variables and methods
var _static = {
var _static = {
name: "VIZI.Keyboard",

// Method for getting an instance. It returns
// Method for getting an instance. It returns
// a singleton instance of a singleton object
getInstance: function(domElement) {
if ( instance === undefined ) {
Expand All @@ -81,4 +93,4 @@

return _static;
}());
}());
}());
76 changes: 74 additions & 2 deletions src/client/webgl/Camera.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,23 @@
this.camera = this.createCamera();
this.lookAtTarget();

//set up variables for oculus rendering
this.viewAngle = 0;
this.bodyAxis = new THREE.Vector3(0, 1, 0);
this.bodyAngle = 0;

this.publish("addToScene", this.camera);
this.publish("addToDat", this, {name: "Camera", properties: ["cameraRadius", "theta", "phi"]});

this.subscribe("resize", this.resize);
this.subscribe("zoomControl", this.zoom);
this.subscribe("panControl", this.pan);
this.subscribe("orbitControl", this.orbit);
if(VIZI.ENABLE_OCULUS)
{
this.subscribe("oculusControl", this.oculus);
this.subscribe("firstPersonControl", this.firstPerson);
}
};

VIZI.Camera.prototype.createCamera = function() {
Expand Down Expand Up @@ -73,6 +83,11 @@
if (this.capZoom) {
// Cap zoom to bounds
var zoomCapLow = 250;
//if the oculus is enabled allow users to zoom in to street level
if(VIZI.ENABLE_OCULUS){
zoomCapLow = 10;
}

if (this.cameraRadius < zoomCapLow) {
this.cameraRadius = zoomCapLow;
cameraRadiusDiff = zoomCapLow - oldcameraRadius;
Expand All @@ -84,7 +99,7 @@
cameraRadiusDiff = zoomCapHigh - oldcameraRadius;
}
}

this.camera.translateZ( cameraRadiusDiff );

this.updatePosition();
Expand Down Expand Up @@ -132,8 +147,65 @@
this.publish("render");
};

VIZI.Camera.prototype.oculus = function(quatValues) {
// make a quaternion for the the body angle rotated about the Y axis.
var quat = new THREE.Quaternion();
quat.setFromAxisAngle(this.bodyAxis, this.bodyAngle);

// make a quaternion for the current orientation of the Rift
var quatCam = new THREE.Quaternion(quatValues.x, quatValues.y, quatValues.z, quatValues.w);

// multiply the body rotation by the Rift rotation.
quat.multiply(quatCam);

// Make a vector pointing along the Z axis and rotate it accoring to the combined look/body angle.
var xzVector = new THREE.Vector3(0, 0, 1);
xzVector.applyQuaternion(quat);

// Compute the X/Z angle based on the combined look/body angle. This will be used for FPS style movement controls
// so you can steer with a combination of the keyboard and by moving your head.
this.viewAngle = Math.atan2(xzVector.z, xzVector.x) + Math.PI;

// Apply the combined look/body angle to the camera.
this.camera.quaternion.copy(quat);

//this.updatePosition();
//this.lookAtTarget();

this.publish("render");
};

VIZI.Camera.prototype.firstPerson = function(keys) {
//movement step
var step = 10;

//move in the requested direction(s), base movement on view angle
if(keys.up){
this.target.position.x += Math.cos(this.viewAngle) * step;
this.target.position.z += Math.sin(this.viewAngle) * step;
}

if(keys.down){
this.target.position.x -= Math.cos(this.viewAngle) * step;
this.target.position.z -= Math.sin(this.viewAngle) * step;
}

if(keys.left){
this.target.position.x -= Math.cos(this.viewAngle + Math.PI/2) * step;
this.target.position.z -= Math.sin(this.viewAngle + Math.PI/2) * step;
}

if(keys.right){
this.target.position.x += Math.cos(this.viewAngle + Math.PI/2) * step;
this.target.position.z += Math.sin(this.viewAngle + Math.PI/2) * step;
}

this.updatePosition();
this.publish("render");
};

VIZI.Camera.prototype.datChange = function() {
this.updatePosition();
this.lookAtTarget();
};
}());
}());
14 changes: 12 additions & 2 deletions src/client/webgl/Renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@

this.renderer = this.createRenderer();

//oculus renderer
if(VIZI.ENABLE_OCULUS){
this.riftCam = new THREE.OculusRiftEffect(this.renderer);
}

// Listeners
this.subscribe("render", this.render);
this.subscribe("resize", this.resize);
Expand Down Expand Up @@ -42,12 +47,17 @@

VIZI.Renderer.prototype.render = function() {
this.publish("fpsTickStart", "render");
this.renderer.render( this.scene, this.camera );
if(VIZI.ENABLE_OCULUS){
this.riftCam.render(this.scene, this.camera );
}
else{
this.renderer.render( this.scene, this.camera );
}
this.publish("updateRendererInfo", this.renderer.info);
this.publish("fpsTickEnd", "render");
};

VIZI.Renderer.prototype.resize = function() {
this.renderer.setSize( window.innerWidth, window.innerHeight );
};
}());
}());
Loading