├── .gitignore
├── README.md
├── bower.json
├── examples
    ├── basic.html
    ├── depth.html
    ├── fuse.html
    ├── gazeable.html
    ├── groups.html
    ├── img
    │   └── interactivepatterns_displayreticle.png
    ├── js
    │   └── lib
    │   │   ├── VRControls.js
    │   │   ├── VREffect.js
    │   │   ├── device-info-test.js
    │   │   ├── three.js
    │   │   ├── webvr-manager.js
    │   │   └── webvr-polyfill.js
    ├── proximity.html
    └── visibility.html
├── index.html
├── package.json
└── reticulum.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | #
 3 | # If you find yourself ignoring temporary files generated by your text editor
 4 | # or operating system, you probably want to add a global ignore instead:
 5 | # git config --global core.excludesfile ~/.gitignore_global
 6 | 
 7 | # Ignore bundler config
 8 | /.bundle
 9 | 
10 | # Ignore the build directory
11 | **/build
12 | **/tmp
13 | 
14 | # Ignore TDS
15 | **/typings
16 | 
17 | # Ignore Sass' cache
18 | /.sass-cache
19 | 
20 | # Ignore .DS_store file
21 | .DS_Store
22 | 
23 | # Ignore Bower files 
24 | /bower_components
25 | 
26 | # Ignore Node files 
27 | **/node_modules


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | #Reticulum
  2 | 
  3 | > A simple gaze interaction manager for VR with Three.js. [See examples](https://skezo.github.io/Reticulum/)
  4 | 
  5 | ![Material Design](https://skezo.github.io/Reticulum/examples/img/interactivepatterns_displayreticle.png)
  6 | 
  7 | ##Purpose
  8 | Reticulum attempts to follow Google's interactive pattern for the [display reticle](http://www.google.com/design/spec-vr/interactive-patterns/display-reticle.html). It creates the illusion of depth by projecting spatially onto targeted objects while maintaining a fixed size so that it is easy to see at all times.
  9 | 
 10 | 
 11 | ### Features:
 12 | - Avoids double vision and depth issues by projecting spatially onto targeted objects
 13 | - Gaze and click events for targeted objects `onGazeOver`, `onGazeOut`, `onGazeLong` and `onGazeClick`
 14 | - Set different fuze durations for targeted objects
 15 | - Built in [fuse support](http://www.google.com/design/spec-vr/interactive-patterns/controls.html#controls-fuse-buttons)
 16 | - Display the reticle only when the camera can see a targeted object 
 17 | - Works in the browser with Three.js (r73)
 18 | 
 19 | 
 20 | ### 1. Getting Started
 21 | 
 22 | Load Three.js and include the Reticulum.js file. You might also want to use the [Web VR boilerplate](https://github.com/borismus/webvr-boilerplate):
 23 | 
 24 | ```html
 25 | <script src="three.js"></script>
 26 | <script src="reticulum.js"></script>
 27 | 
 28 | ```
 29 | 
 30 | ### 2. Initiate and set options
 31 | 
 32 | Call the Reticulum initializer function and set your options. Options can be set globally or per targeted object. 
 33 | 
 34 | **Note:** You must define the `camera`... it is required. 
 35 | 
 36 | ```javascript
 37 | Reticulum.init(camera, {
 38 | 	proximity: false,
 39 | 	clickevents: true,
 40 | 	near: null, //near factor of the raycaster (shouldn't be negative and should be smaller than the far property)
 41 | 	far: null, //far factor of the raycaster (shouldn't be negative and should be larger than the near property)
 42 | 	reticle: {
 43 | 		visible: true,
 44 | 		restPoint: 1000, //Defines the reticle's resting point when no object has been targeted
 45 | 		color: 0xcc0000,
 46 | 		innerRadius: 0.0001,
 47 | 		outerRadius: 0.003,
 48 | 		hover: {
 49 | 			color: 0xcc0000,
 50 | 			innerRadius: 0.02,
 51 | 			outerRadius: 0.024,
 52 | 			speed: 5,
 53 | 			vibrate: 50 //Set to 0 or [] to disable
 54 | 		}
 55 | 	},
 56 | 	fuse: {
 57 | 		visible: true,
 58 | 		duration: 2.5,
 59 | 		color: 0x00fff6,
 60 | 		innerRadius: 0.045,
 61 | 		outerRadius: 0.06,
 62 | 		vibrate: 100, //Set to 0 or [] to disable
 63 | 		clickCancelFuse: false //If users clicks on targeted object fuse is canceled
 64 | 	}
 65 | });
 66 | ```
 67 | 
 68 | ### 3. Define targeted objects and options
 69 | 
 70 | Add the three.js objects you want to be targeted objects. Override global options by setting local ones.
 71 | 
 72 | ```javascript
 73 | 
 74 | Reticulum.add( object, {
 75 | 	clickCancelFuse: true, // Overrides global setting for fuse's clickCancelFuse
 76 | 	reticleHoverColor: 0x00fff6, // Overrides global reticle hover color
 77 | 	fuseVisible: true, // Overrides global fuse visibility
 78 | 	fuseDuration: 1.5, // Overrides global fuse duration
 79 | 	fuseColor: 0xcc0000, // Overrides global fuse color
 80 | 	onGazeOver: function(){
 81 | 		// do something when user targets object
 82 | 		this.material.emissive.setHex( 0xffcc00 );
 83 | 	},
 84 | 	onGazeOut: function(){
 85 | 		// do something when user moves reticle off targeted object
 86 | 		this.material.emissive.setHex( 0xcc0000 );
 87 | 	},
 88 | 	onGazeLong: function(){
 89 | 		// do something user targetes object for specific time
 90 | 		this.material.emissive.setHex( 0x0000cc );
 91 | 	},
 92 | 	onGazeClick: function(){
 93 | 		// have the object react when user clicks / taps on targeted object
 94 | 		this.material.emissive.setHex( 0x0000cc );
 95 | 	}
 96 | });
 97 | ``` 
 98 | 
 99 | You can also remove targeted objects.
100 | ```javascript
101 | Reticulum.remove( object );
102 | ```
103 | 
104 | 
105 | ### 4. Add to animation loop
106 | 
107 | Add Reticulum to your animation loop 
108 | 
109 | ```javascript
110 | Reticulum.update()
111 | ```
112 | 
113 | 
114 | ### 5. Add Camera to scene
115 | 
116 | If you require to display the reticle you will need to add the `camera` to the `scene`. 
117 | 
118 | **Note:** See Known Issues below if ghosting occurs. 
119 | 
120 | ```javascript
121 | scene.add(camera);
122 | ```
123 | 
124 | ## Demos
125 | 
126 | - [Basic](https://skezo.github.io/Reticulum/examples/basic.html)
127 | - [Proximity](https://skezo.github.io/Reticulum/examples/proximity.html) - only display reticle if targeted object is visible
128 | - [Depth Test](https://skezo.github.io/Reticulum/examples/depth.html) - hit moving targets 
129 | - [Objects in Groups](https://skezo.github.io/Reticulum/examples/groups.html) - hit object in group, get world values 
130 | - [Fuse](https://skezo.github.io/Reticulum/examples/fuse.html) - selective objects have fuse
131 | - [Visibility](https://skezo.github.io/Reticulum/examples/visibility.html) - test for hitting only visible objects  
132 | - [Gazeable](https://skezo.github.io/Reticulum/examples/gazeable.html) - test for hitting only gazeable objects  
133 | 
134 | ## Known Issues
135 | - Ghosting occurs to the reticle and fuse when in VR mode. More details on the issue can found [here](https://github.com/mrdoob/three.js/issues/7041). **A quick workaround** to this issue is adding `camera.updateMatrixWorld();` before the render call (e.g. `manager.render(scene, camera, timestamp);` to the callback function of the `requestAnimationFrame()` method. 
136 | 
137 | 
138 | ## Acknowledgements:
139 | Reticulum was inspired by the work done by [neuman](https://github.com/neuman/vreticle)
140 | 
141 | ## License
142 | The MIT License (MIT)


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 |     "name": "reticulum",
3 |     "version": "1.0.0",
4 |     "main": "reticulum.js",
5 |     "ignore": [
6 |         "example"
7 |     ]
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/basic.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <title>Reticulum | Basic VR Example</title>
  5 | <meta charset="utf-8">
  6 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | <meta name="mobile-web-app-capable" content="yes">
  8 | <meta name="apple-mobile-web-app-capable" content="yes" />
  9 | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 10 | <style type="text/css">
 11 | 	html, body {
 12 | 		background-color: #000;
 13 | 		margin: 0;
 14 | 		padding: 0; 
 15 | 		overflow: hidden;
 16 | 	}
 17 | </style>
 18 | </head>
 19 | 
 20 | <body>
 21 | 
 22 | <script>
 23 | /*
 24 |  * Debug parameters.
 25 |  */
 26 | WebVRConfig = {
 27 |   /**
 28 |    * webvr-polyfill configuration
 29 |    */
 30 |   // Forces availability of VR mode.
 31 |   //FORCE_ENABLE_VR: true, // Default: false.
 32 |   
 33 |   // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
 34 |   //K_FILTER: 0.98, // Default: 0.98.
 35 |   
 36 |   // How far into the future to predict during fast motion.
 37 |   //PREDICTION_TIME_S: 0.040, // Default: 0.040 (in seconds).
 38 |   
 39 |   // Flag to disable touch panner. In case you have your own touch controls
 40 |   //TOUCH_PANNER_DISABLED: true, // Default: false.
 41 |   
 42 |   // Enable yaw panning only, disabling roll and pitch. This can be useful for
 43 |   // panoramas with nothing interesting above or below.
 44 |   //YAW_ONLY: true, // Default: false.
 45 | 
 46 |   // Enable the deprecated version of the API (navigator.getVRDevices).
 47 |   //ENABLE_DEPRECATED_API: true, // Default: false.
 48 |   
 49 |   // Scales the recommended buffer size reported by WebVR, which can improve
 50 |   // performance. Making this very small can lower the effective resolution of
 51 |   // your scene.
 52 |   BUFFER_SCALE: 0.5, // default: 1.0
 53 |   
 54 |   // Allow VRDisplay.submitFrame to change gl bindings, which is more
 55 |   // efficient if the application code will re-bind it's resources on the
 56 |   // next frame anyway.
 57 |   // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
 58 |   // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
 59 |   // and gl.TEXTURE_BINDING_2D for texture unit 0
 60 |   // Warning: enabling this might lead to rendering issues.
 61 |   //DIRTY_SUBMIT_FRAME_BINDINGS: true // default: false
 62 | };
 63 | </script>
 64 | 
 65 | <!-- THREE library, controls and effects -->
 66 | <script src="./js/lib/three.js"></script>
 67 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
 68 | <script src="./js/lib/VRControls.js"></script>
 69 | <script src="./js/lib/VREffect.js"></script>
 70 | <!-- WebVR polyfill and manager -->
 71 | <script src="./js/lib/webvr-polyfill.js"></script>
 72 | <script src="./js/lib/webvr-manager.js"></script>
 73 | <!-- A simple gaze interaction manager for VR -->
 74 | <script src="../reticulum.js"></script>
 75 | 
 76 | 
 77 | 
 78 | <script>
 79 | // Setup three.js WebGL renderer
 80 | var renderer = new THREE.WebGLRenderer( { antialias: true } );
 81 | renderer.setPixelRatio( window.devicePixelRatio );
 82 | // Append the canvas element created by the renderer to document body element.
 83 | document.body.appendChild( renderer.domElement );
 84 | 
 85 | //Create a three.js scene
 86 | var scene = new THREE.Scene();
 87 | 
 88 | //Create a three.js camera
 89 | var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
 90 | //Apply VR headset positional data to camera.
 91 | var controls = new THREE.VRControls( camera );
 92 | controls.standing = true;
 93 | 
 94 | //Apply VR stereo rendering to renderer
 95 | var effect = new THREE.VREffect( renderer );
 96 | effect.setSize( window.innerWidth, window.innerHeight );
 97 | 
 98 | // Create a VR manager helper to enter and exit VR mode.
 99 | var manager = new WebVRManager( renderer, effect, {hideButton: false, isUndistorted: false} );
100 | 
101 | 
102 | 
103 | var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
104 | hemiLight.position.set(0, 500, 0);
105 | scene.add(hemiLight);
106 | var boxGeometry = new THREE.BoxGeometry( 1, 1, 1 );
107 | var planeGeometry = new THREE.PlaneGeometry( 1, 1 );
108 | var sphereGeometry = new THREE.SphereGeometry( 2, 1, 1 );
109 | 
110 | //Boxes, Planes and spheres
111 | for ( var i = 0; i < 750; i ++ ) {
112 | 	addMesh(boxGeometry);
113 | 	//addMesh(planeGeometry);
114 | 	//addMesh(sphereGeometry);
115 | }
116 | 
117 | 
118 | 
119 | function addMesh(geo) {
120 | 
121 | 	var object = new THREE.Mesh( geo, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
122 | 	
123 | 	object.position.x = Math.random() * 20 - 10;
124 | 	object.position.y = Math.random() * 20 - 10;
125 | 	object.position.z = Math.random() * 20 - 10;
126 | 	
127 | 	object.position.z = object.position.z > -1 && object.position.z < 1 ? Math.abs(object.position.z) + 2 : object.position.z;
128 | 	//object.rotation.y = Math.random() * 360;
129 | 
130 | 	
131 | 	// *******************************
132 | 	// --- Reticulum ---
133 | 	// have the object react when user looks at it
134 | 	// track the object
135 | 	Reticulum.add( object, {
136 | 		onGazeOver: function(){
137 | 			// do something when user targets object
138 | 			this.material.emissive.setHex( 0xffcc00 );
139 | 		},
140 | 		onGazeOut: function(){
141 | 			// do something when user moves reticle off targeted object
142 | 			this.material.emissive.setHex( 0xcc0000 );
143 | 		},
144 | 		onGazeLong: function(){
145 | 			// do something user targetes object for specific time
146 | 			this.material.emissive.setHex( 0x0000cc );
147 | 		},
148 | 		onGazeClick: function(){
149 | 			// have the object react when user clicks / taps on targeted object
150 | 			this.material.emissive.setHex( 0x00cccc * Math.random() );
151 | 		}
152 | 	});
153 | 
154 | 	scene.add( object );
155 | 
156 | }
157 | 
158 | 
159 | // *******************************
160 | // --- Reticulum ---
161 | // initiate Reticulum so it loads up 
162 | Reticulum.init(camera, {
163 | 	proximity: false,
164 | 	clickevents: true,
165 | 	reticle: {
166 | 		visible: true,
167 | 		restPoint: 1000, //Defines the reticle's resting point when no object has been targeted
168 | 		color: 0xcc00cc,
169 | 		innerRadius: 0.0004,
170 | 		outerRadius: 0.003,
171 | 		hover: {
172 | 			color: 0x00cccc,
173 | 			innerRadius: 0.02,
174 | 			outerRadius: 0.024,
175 | 			speed: 5,
176 | 			vibrate: 50 //Set to 0 or [] to disable
177 | 		}
178 | 	},
179 | 	fuse: {
180 | 		visible: false,
181 | 		duration: 2.5,
182 | 		color: 0x00fff6,
183 | 		innerRadius: 0.045,
184 | 		outerRadius: 0.06,
185 | 		vibrate: 0, //Set to 0 or [] to disable
186 | 		clickCancelFuse: false //If users clicks on targeted object fuse is canceled
187 | 	}
188 | });
189 | 
190 | // IMPORTANT add camera to cene if you want to see a reticle 
191 | scene.add(camera);
192 | 
193 | 
194 | function animate(timestamp) {
195 | 
196 | 	// *******************************
197 | 	// --- Reticulum ---
198 | 	// keep checking if user is looking at any tracked objects
199 | 	Reticulum.update();
200 | 	
201 | 	controls.update();
202 | 	camera.updateMatrixWorld(); // Required to stop ghosting - must be placed before render update
203 | 	manager.render(scene, camera, timestamp);
204 | 
205 | 	requestAnimationFrame(animate);
206 | 	
207 | }
208 | animate();
209 | 
210 | 
211 | /*
212 | Handle window resizes
213 | */
214 | function onWindowResize() {
215 | 	effect.setSize( window.innerWidth, window.innerHeight );
216 | 	camera.aspect = window.innerWidth / window.innerHeight;
217 | 	camera.updateProjectionMatrix();
218 | }
219 | window.addEventListener( 'resize', onWindowResize, false );
220 | window.addEventListener( 'vrdisplaypresentchange', onWindowResize, true );
221 | </script>
222 | </body>
223 | </html>


--------------------------------------------------------------------------------
/examples/depth.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <title>Reticulum | Depth VR Example</title>
  5 | <meta charset="utf-8">
  6 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | <meta name="mobile-web-app-capable" content="yes">
  8 | <meta name="apple-mobile-web-app-capable" content="yes" />
  9 | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 10 | <style type="text/css">
 11 | 	html, body {
 12 | 		background-color: #000;
 13 | 		margin: 0;
 14 | 		padding: 0; 
 15 | 		overflow: hidden;
 16 | 	}
 17 | </style>
 18 | </head>
 19 | 
 20 | <body>
 21 | 
 22 | <script>
 23 | /*
 24 |  * Debug parameters.
 25 |  */
 26 | WebVRConfig = {
 27 |   /**
 28 |    * webvr-polyfill configuration
 29 |    */
 30 |   // Forces availability of VR mode.
 31 |   //FORCE_ENABLE_VR: true, // Default: false.
 32 |   
 33 |   // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
 34 |   //K_FILTER: 0.98, // Default: 0.98.
 35 |   
 36 |   // How far into the future to predict during fast motion.
 37 |   //PREDICTION_TIME_S: 0.040, // Default: 0.040 (in seconds).
 38 |   
 39 |   // Flag to disable touch panner. In case you have your own touch controls
 40 |   //TOUCH_PANNER_DISABLED: true, // Default: false.
 41 |   
 42 |   // Enable yaw panning only, disabling roll and pitch. This can be useful for
 43 |   // panoramas with nothing interesting above or below.
 44 |   //YAW_ONLY: true, // Default: false.
 45 | 
 46 |   // Enable the deprecated version of the API (navigator.getVRDevices).
 47 |   //ENABLE_DEPRECATED_API: true, // Default: false.
 48 |   
 49 |   // Scales the recommended buffer size reported by WebVR, which can improve
 50 |   // performance. Making this very small can lower the effective resolution of
 51 |   // your scene.
 52 |   BUFFER_SCALE: 0.5, // default: 1.0
 53 |   
 54 |   // Allow VRDisplay.submitFrame to change gl bindings, which is more
 55 |   // efficient if the application code will re-bind it's resources on the
 56 |   // next frame anyway.
 57 |   // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
 58 |   // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
 59 |   // and gl.TEXTURE_BINDING_2D for texture unit 0
 60 |   // Warning: enabling this might lead to rendering issues.
 61 |   //DIRTY_SUBMIT_FRAME_BINDINGS: true // default: false
 62 | };
 63 | </script>
 64 | 
 65 | <!-- THREE library, controls and effects -->
 66 | <script src="./js/lib/three.js"></script>
 67 | <script src="./js/lib/VRControls.js"></script>
 68 | <script src="./js/lib/VREffect.js"></script>
 69 | <!-- WebVR polyfill and manager -->
 70 | <script src="./js/lib/webvr-polyfill.js"></script>
 71 | <script src="./js/lib/webvr-manager.js"></script>
 72 | <!-- A simple gaze interaction manager for VR -->
 73 | <script src="../reticulum.js"></script>
 74 | 
 75 | <script>
 76 | /*
 77 |  * Debug parameters.
 78 |  */
 79 | // Enable distortion everywhere.
 80 | //WEBVR_FORCE_DISTORTION = true;
 81 | // Override the distortion background color.
 82 | //WEBVR_BACKGROUND_COLOR = new THREE.Vector4(1, 0, 0, 1);
 83 | // Change the tracking prediction mode.
 84 | WEBVR_PREDICTION_MODE = 2;
 85 | // In prediction mode, change how far into the future to predict.
 86 | WEBVR_PREDICTION_TIME_MS = 100;
 87 | </script>
 88 | 
 89 | <script>
 90 | // Setup three.js WebGL renderer
 91 | var renderer = new THREE.WebGLRenderer( { antialias: true } );
 92 | renderer.setPixelRatio( window.devicePixelRatio );
 93 | // Append the canvas element created by the renderer to document body element.
 94 | document.body.appendChild( renderer.domElement );
 95 | 
 96 | //Create a three.js scene
 97 | var scene = new THREE.Scene();
 98 | 
 99 | //Create a three.js camera
100 | var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.3, 10000);
101 | //Apply VR headset positional data to camera.
102 | var controls = new THREE.VRControls( camera );
103 | controls.standing = true;
104 | 
105 | //Apply VR stereo rendering to renderer
106 | var effect = new THREE.VREffect( renderer );
107 | effect.setSize( window.innerWidth, window.innerHeight );
108 | 
109 | // Create a VR manager helper to enter and exit VR mode.
110 | var manager = new WebVRManager( renderer, effect, {hideButton: false} );
111 | 
112 | 
113 | 
114 | var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
115 | hemiLight.position.set(0, 500, 0);
116 | scene.add(hemiLight);
117 | 
118 | //Boxes, Planes and spheres
119 | var parent = new THREE.Object3D();
120 | scene.add( parent );
121 | 
122 | var boxCount = 10;
123 | var boxSize = 1;
124 | var radius = 10;
125 | var boxGeometry = new THREE.BoxGeometry( boxSize, boxSize, boxSize );
126 | 
127 | 
128 | for( var i =0; i < boxCount; i++ ) {
129 | 	var x = 0 + radius * Math.cos(2 * Math.PI * i / boxCount);
130 |     var z = 0 + radius * Math.sin(2 * Math.PI * i / boxCount);  
131 | 	addMesh(boxGeometry, x, 0, z);
132 | }
133 | 
134 | 
135 | function addMesh(geo, x, y, z) {
136 | 
137 | 	var object = new THREE.Mesh( geo, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
138 | 	
139 | 	object.position.x = x;
140 | 	object.position.y = y;
141 | 	object.position.z = z;
142 | 	
143 | 	
144 | 	// *******************************
145 | 	// --- Reticulum ---
146 | 	// have the object react when user looks at it
147 | 	// track the object
148 | 	Reticulum.add( object, {
149 | 		onGazeOver: function(){
150 | 			// do something when user targets object
151 | 			this.material.emissive.setHex( 0xffcc00 );
152 | 		},
153 | 		onGazeOut: function(){
154 | 			// do something when user moves reticle off targeted object
155 | 			this.material.emissive.setHex( 0xcc0000 );
156 | 		},
157 | 		onGazeLong: function(){
158 | 			// do something user targetes object for specific time
159 | 			this.material.emissive.setHex( 0x0000cc );
160 | 		},
161 | 		onGazeClick: function(){
162 | 			// have the object react when user clicks / taps on targeted object
163 | 			this.material.emissive.setHex( 0x00cccc * Math.random() );
164 | 		}
165 | 	});
166 | 
167 | 	parent.add( object );
168 | 
169 | }
170 | 
171 | 
172 | // *******************************
173 | // --- Reticulum ---
174 | // initiate Reticulum so it loads up 
175 | Reticulum.init(camera, {
176 | 	proximity: false,
177 | 	reticle: {
178 | 		visible: true,
179 | 		restPoint: 1000, //Defines the reticle's resting point when no object has been targeted
180 | 		color: 0xcc0000,
181 | 		innerRadius: 0.0004,
182 | 		outerRadius: 0.003,
183 | 		hover: {
184 | 			color: 0xcc0000,
185 | 			innerRadius: 0.02,
186 | 			outerRadius: 0.024,
187 | 			speed: 5,
188 | 			vibrate: 50 //Set to 0 or [] to disable
189 | 		}
190 | 	},
191 | 	fuse: {
192 | 		visible: true,
193 | 		duration: 2.5,
194 | 		color: 0x00fff6,
195 | 		innerRadius: 0.045,
196 | 		outerRadius: 0.06,
197 | 		vibrate: 0, //Set to 0 or [] to disable
198 | 		clickCancelFuse: false //If users clicks on targeted object fuse is canceled
199 | 	}
200 | });
201 | 
202 | // IMPORTANT add camera to cene if you want to see a reticle 
203 | scene.add(camera);
204 | 
205 | 
206 | 
207 | 
208 | 
209 | 
210 | function animate(timestamp) {
211 | 	var delta = clock.getDelta();
212 | 
213 | 	// *******************************
214 | 	// --- Reticulum ---
215 | 	// keep checking if user is looking at any tracked objects
216 | 	Reticulum.update();
217 | 	
218 | 	var elapsed = clock.getElapsedTime()*1000; //Convert into milliseconds
219 | 	var r = oscillation(radius-1, elapsed, 15000, radius, i)
220 | 	for( var i = 0; i < boxCount; i++  ) {
221 | 		var x = 0 + r * Math.cos(2 * Math.PI * i / boxCount);
222 |     	var z = 0 + r * Math.sin(2 * Math.PI * i / boxCount);  
223 | 		parent.children[i].position.x = x;
224 | 		parent.children[i].position.z = z;
225 | 		parent.children[i].rotation.y += 1 * delta;
226 | 	}
227 | 	
228 | 	controls.update();
229 | 	camera.updateMatrixWorld(); // Required to stop ghosting - must be placed before render update
230 | 	manager.render(scene, camera, timestamp);
231 | 
232 | 	requestAnimationFrame(animate);
233 | 
234 | 
235 | 	
236 | }
237 | var clock = new THREE.Clock(true);
238 | animate();
239 | 
240 | function oscillation( amplitude, elapsedTime, duration, start, offset ) {
241 | 	var offset = 0.1 * (offset || 0);
242 | 	return amplitude * Math.sin( (offset + elapsedTime) * 2 * Math.PI / duration) + start
243 | }
244 | 
245 | 
246 | 
247 | /*
248 | Handle window resizes
249 | */
250 | function onWindowResize() {
251 |   camera.aspect = window.innerWidth / window.innerHeight;
252 |   camera.updateProjectionMatrix();
253 |   effect.setSize( window.innerWidth, window.innerHeight );
254 | }
255 | window.addEventListener( 'resize', onWindowResize, false );
256 | window.addEventListener( 'vrdisplaypresentchange', onWindowResize, true );
257 | </script>
258 | </body>
259 | </html>


--------------------------------------------------------------------------------
/examples/fuse.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <title>Reticulum | Fuse VR Example</title>
  5 | <meta charset="utf-8">
  6 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | <meta name="mobile-web-app-capable" content="yes">
  8 | <meta name="apple-mobile-web-app-capable" content="yes" />
  9 | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 10 | <style type="text/css">
 11 | 	html, body {
 12 | 		background-color: #000;
 13 | 		margin: 0;
 14 | 		padding: 0; 
 15 | 		overflow: hidden;
 16 | 	}
 17 | </style>
 18 | </head>
 19 | 
 20 | <body>
 21 | 
 22 | <script>
 23 | /*
 24 |  * Debug parameters.
 25 |  */
 26 | WebVRConfig = {
 27 |   /**
 28 |    * webvr-polyfill configuration
 29 |    */
 30 |   // Forces availability of VR mode.
 31 |   //FORCE_ENABLE_VR: true, // Default: false.
 32 |   
 33 |   // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
 34 |   //K_FILTER: 0.98, // Default: 0.98.
 35 |   
 36 |   // How far into the future to predict during fast motion.
 37 |   //PREDICTION_TIME_S: 0.040, // Default: 0.040 (in seconds).
 38 |   
 39 |   // Flag to disable touch panner. In case you have your own touch controls
 40 |   //TOUCH_PANNER_DISABLED: true, // Default: false.
 41 |   
 42 |   // Enable yaw panning only, disabling roll and pitch. This can be useful for
 43 |   // panoramas with nothing interesting above or below.
 44 |   //YAW_ONLY: true, // Default: false.
 45 | 
 46 |   // Enable the deprecated version of the API (navigator.getVRDevices).
 47 |   //ENABLE_DEPRECATED_API: true, // Default: false.
 48 |   
 49 |   // Scales the recommended buffer size reported by WebVR, which can improve
 50 |   // performance. Making this very small can lower the effective resolution of
 51 |   // your scene.
 52 |   BUFFER_SCALE: 0.5, // default: 1.0
 53 |   
 54 |   // Allow VRDisplay.submitFrame to change gl bindings, which is more
 55 |   // efficient if the application code will re-bind it's resources on the
 56 |   // next frame anyway.
 57 |   // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
 58 |   // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
 59 |   // and gl.TEXTURE_BINDING_2D for texture unit 0
 60 |   // Warning: enabling this might lead to rendering issues.
 61 |   //DIRTY_SUBMIT_FRAME_BINDINGS: true // default: false
 62 | };
 63 | </script>
 64 | 
 65 | <!-- THREE library, controls and effects -->
 66 | <script src="./js/lib/three.js"></script>
 67 | <script src="./js/lib/VRControls.js"></script>
 68 | <script src="./js/lib/VREffect.js"></script>
 69 | <!-- WebVR polyfill and manager -->
 70 | <script src="./js/lib/webvr-polyfill.js"></script>
 71 | <script src="./js/lib/webvr-manager.js"></script>
 72 | <!-- A simple gaze interaction manager for VR -->
 73 | <script src="../reticulum.js"></script>
 74 | 
 75 | <script>
 76 | // Setup three.js WebGL renderer
 77 | var renderer = new THREE.WebGLRenderer( { antialias: true } );
 78 | renderer.setPixelRatio( window.devicePixelRatio );
 79 | // Append the canvas element created by the renderer to document body element.
 80 | document.body.appendChild( renderer.domElement );
 81 | 
 82 | //Create a three.js scene
 83 | var scene = new THREE.Scene();
 84 | 
 85 | //Create a three.js camera
 86 | var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.3, 10000);
 87 | //Apply VR headset positional data to camera.
 88 | var controls = new THREE.VRControls( camera );
 89 | controls.standing = true;
 90 | 
 91 | //Apply VR stereo rendering to renderer
 92 | var effect = new THREE.VREffect( renderer );
 93 | effect.setSize( window.innerWidth, window.innerHeight );
 94 | 
 95 | // Create a VR manager helper to enter and exit VR mode.
 96 | var manager = new WebVRManager( renderer, effect, {hideButton: false} );
 97 | 
 98 | 
 99 | 
100 | var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
101 | hemiLight.position.set(0, 500, 0);
102 | scene.add(hemiLight);
103 | 
104 | //Boxes, Planes and spheres
105 | var parent = new THREE.Object3D();
106 | scene.add( parent );
107 | 
108 | var boxCount = 10;
109 | var boxSize = 1;
110 | var radius = 10;
111 | var boxGeometry = new THREE.BoxGeometry( boxSize, boxSize, boxSize );
112 | 
113 | 
114 | for( var i =0; i < boxCount; i++ ) {
115 | 	var x = 0 + radius * Math.cos(2 * Math.PI * i / boxCount);
116 |     var z = 0 + radius * Math.sin(2 * Math.PI * i / boxCount);  
117 | 	addMesh(boxGeometry, x, 0, z, i);
118 | }
119 | 
120 | 
121 | function addMesh(geo, x, y, z, i) {
122 | 
123 | 	var object = new THREE.Mesh( geo, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
124 | 	
125 | 	object.position.x = x;
126 | 	object.position.y = y;
127 | 	object.position.z = z;
128 | 	
129 | 	var fuse = i % 2 ? true : false;
130 | 	
131 | 	// *******************************
132 | 	// --- Reticulum ---
133 | 	// have the object react when user looks at it
134 | 	Reticulum.add( object, {
135 | 		reticleHoverColor: 0x00fff6,
136 | 		fuseVisible: fuse,
137 | 		onGazeOver: function(){
138 | 			// do something when user targets object
139 | 			this.material.emissive.setHex( 0xffcc00 );
140 | 		},
141 | 		onGazeOut: function(){
142 | 			// do something when user moves reticle off targeted object
143 | 			this.material.emissive.setHex( 0xcc0000 );
144 | 		},
145 | 		onGazeLong: function(){
146 | 			// do something user targetes object for specific time
147 | 			this.material.emissive.setHex( 0x0000cc );
148 | 		},
149 | 		onGazeClick: function(){
150 | 			// have the object react when user clicks / taps on targeted object
151 | 			this.material.emissive.setHex( 0x00cccc * Math.random() );
152 | 		}
153 | 	});
154 | 	
155 | 
156 | 	parent.add( object );
157 | 
158 | }
159 | 
160 | 
161 | // *******************************
162 | // --- Reticulum ---
163 | // initiate Reticulum so it loads up 
164 | Reticulum.init(camera, {
165 | 	proximity: false,
166 | 	clickevents: true,
167 | 	reticle: {
168 | 		visible: true,
169 | 		restPoint: 1000, //Defines the reticle's resting point when no object has been targeted
170 | 		color: 0xcc0000,
171 | 		innerRadius: 0.0004,
172 | 		outerRadius: 0.003,
173 | 		hover: {
174 | 			color: 0xcc0000,
175 | 			innerRadius: 0.02,
176 | 			outerRadius: 0.024,
177 | 			speed: 5,
178 | 			vibrate: 50 //Set to 0 or [] to disable
179 | 		}
180 | 	},
181 | 	fuse: {
182 | 		visible: false,
183 | 		duration: 2.5,
184 | 		color: 0x00fff6,
185 | 		innerRadius: 0.045,
186 | 		outerRadius: 0.06,
187 | 		vibrate: 100, //Set to 0 or [] to disable
188 | 		clickCancelFuse: false //If users clicks on targeted object fuse is canceled
189 | 	}
190 | });
191 | 
192 | // IMPORTANT add camera to cene if you want to see a reticle 
193 | scene.add(camera);
194 | 
195 | 
196 | 
197 | 
198 | 
199 | 
200 | function animate(timestamp) {
201 | 	var delta = clock.getDelta();
202 | 
203 | 	// *******************************
204 | 	// --- Reticulum ---
205 | 	// keep checking if user is looking at any tracked objects
206 | 	Reticulum.update();
207 | 	
208 | 	controls.update();
209 | 	camera.updateMatrixWorld(); // Required to stop ghosting - must be placed before render update
210 | 	manager.render(scene, camera, timestamp);
211 | 
212 | 	requestAnimationFrame(animate);
213 | 	
214 | }
215 | var clock = new THREE.Clock(true);
216 | animate();
217 | 
218 | 
219 | /*
220 | Handle window resizes
221 | */
222 | function onWindowResize() {
223 |   camera.aspect = window.innerWidth / window.innerHeight;
224 |   camera.updateProjectionMatrix();
225 |   effect.setSize( window.innerWidth, window.innerHeight );
226 | }
227 | window.addEventListener( 'resize', onWindowResize, false );
228 | window.addEventListener( 'vrdisplaypresentchange', onWindowResize, true );
229 | </script>
230 | </body>
231 | </html>


--------------------------------------------------------------------------------
/examples/gazeable.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <title>Reticulum | Basic VR Example</title>
  5 | <meta charset="utf-8">
  6 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | <meta name="mobile-web-app-capable" content="yes">
  8 | <meta name="apple-mobile-web-app-capable" content="yes" />
  9 | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 10 | <style type="text/css">
 11 | 	html, body {
 12 | 		background-color: #000;
 13 | 		margin: 0;
 14 | 		padding: 0; 
 15 | 		overflow: hidden;
 16 | 	}
 17 | </style>
 18 | </head>
 19 | 
 20 | <body>
 21 | 
 22 | <script>
 23 | /*
 24 |  * Debug parameters.
 25 |  */
 26 | WebVRConfig = {
 27 |   /**
 28 |    * webvr-polyfill configuration
 29 |    */
 30 |   // Forces availability of VR mode.
 31 |   //FORCE_ENABLE_VR: true, // Default: false.
 32 |   
 33 |   // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
 34 |   //K_FILTER: 0.98, // Default: 0.98.
 35 |   
 36 |   // How far into the future to predict during fast motion.
 37 |   //PREDICTION_TIME_S: 0.040, // Default: 0.040 (in seconds).
 38 |   
 39 |   // Flag to disable touch panner. In case you have your own touch controls
 40 |   //TOUCH_PANNER_DISABLED: true, // Default: false.
 41 |   
 42 |   // Enable yaw panning only, disabling roll and pitch. This can be useful for
 43 |   // panoramas with nothing interesting above or below.
 44 |   //YAW_ONLY: true, // Default: false.
 45 | 
 46 |   // Enable the deprecated version of the API (navigator.getVRDevices).
 47 |   //ENABLE_DEPRECATED_API: true, // Default: false.
 48 |   
 49 |   // Scales the recommended buffer size reported by WebVR, which can improve
 50 |   // performance. Making this very small can lower the effective resolution of
 51 |   // your scene.
 52 |   BUFFER_SCALE: 0.5, // default: 1.0
 53 |   
 54 |   // Allow VRDisplay.submitFrame to change gl bindings, which is more
 55 |   // efficient if the application code will re-bind it's resources on the
 56 |   // next frame anyway.
 57 |   // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
 58 |   // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
 59 |   // and gl.TEXTURE_BINDING_2D for texture unit 0
 60 |   // Warning: enabling this might lead to rendering issues.
 61 |   //DIRTY_SUBMIT_FRAME_BINDINGS: true // default: false
 62 | };
 63 | </script>
 64 | 
 65 | <!-- THREE library, controls and effects -->
 66 | <script src="./js/lib/three.js"></script>
 67 | <script src="./js/lib/VRControls.js"></script>
 68 | <script src="./js/lib/VREffect.js"></script>
 69 | <!-- WebVR polyfill and manager -->
 70 | <script src="./js/lib/webvr-polyfill.js"></script>
 71 | <script src="./js/lib/webvr-manager.js"></script>
 72 | <!-- A simple gaze interaction manager for VR -->
 73 | <script src="../reticulum.js"></script>
 74 | 
 75 | 
 76 | 
 77 | <script>
 78 | // Setup three.js WebGL renderer
 79 | var renderer = new THREE.WebGLRenderer( { antialias: true } );
 80 | renderer.setPixelRatio( window.devicePixelRatio );
 81 | // Append the canvas element created by the renderer to document body element.
 82 | document.body.appendChild( renderer.domElement );
 83 | 
 84 | //Create a three.js scene
 85 | var scene = new THREE.Scene();
 86 | 
 87 | //Create a three.js camera
 88 | var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.3, 10000);
 89 | //Apply VR headset positional data to camera.
 90 | var controls = new THREE.VRControls( camera );
 91 | controls.standing = true;
 92 | 
 93 | //Apply VR stereo rendering to renderer
 94 | var effect = new THREE.VREffect( renderer );
 95 | effect.setSize( window.innerWidth, window.innerHeight );
 96 | 
 97 | // Create a VR manager helper to enter and exit VR mode.
 98 | var manager = new WebVRManager( renderer, effect, {hideButton: false} );
 99 | 
100 | 
101 | // *******************************
102 | // --- Reticulum ---
103 | // initiate Reticulum so it loads up 
104 | Reticulum.init(camera, {
105 | 	proximity: false,
106 | 	clickevents: true,
107 | 	near: 4,
108 | 	far: 10,
109 | 	reticle: {
110 | 		visible: true,
111 | 		restPoint: 1, //Defines the reticle's resting point when no object has been targeted
112 | 		color: 0xcc0000,
113 | 		innerRadius: 0.0004,
114 | 		outerRadius: 0.003,
115 | 		hover: {
116 | 			color: 0xcc0000,
117 | 			innerRadius: 0.02,
118 | 			outerRadius: 0.024,
119 | 			speed: 5,
120 | 			vibrate: 50 //Set to 0 or [] to disable
121 | 		}
122 | 	},
123 | 	fuse: {
124 | 		visible: false,
125 | 		duration: 2.5,
126 | 		color: 0x00fff6,
127 | 		innerRadius: 0.045,
128 | 		outerRadius: 0.06,
129 | 		vibrate: 0, //Set to 0 or [] to disable
130 | 		clickCancelFuse: false //If users clicks on targeted object fuse is canceled
131 | 	}
132 | });
133 | 
134 | // IMPORTANT add camera to cene if you want to see a reticle 
135 | scene.add(camera);
136 | 
137 | 
138 | var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
139 | hemiLight.position.set(0, 500, 0);
140 | scene.add(hemiLight);
141 | var boxGeometry = new THREE.BoxGeometry( 1, 1, 1 );
142 | var planeGeometry = new THREE.PlaneGeometry( 1, 1 );
143 | var sphereGeometry = new THREE.SphereGeometry( 2, 1, 1 );
144 | 
145 | var outOfReach = Math.random() * 0xffffff;
146 | var behindColor = Math.random() * 0xffffff;
147 | var frontColor = Math.random() * 0xffffff;
148 | 
149 | //Out of reach
150 | var outOfReach = new THREE.Mesh( boxGeometry, new THREE.MeshLambertMaterial( { color: outOfReach } ) );
151 | outOfReach.position.set( 1, 0, -3 );
152 | Reticulum.add( outOfReach, {
153 | 	onGazeOver: function(){
154 | 		// do something when user targets object
155 | 		this.material.emissive.setHex( 0xffcc00 );
156 | 	},
157 | 	onGazeOut: function(){
158 | 		// do something when user moves reticle off targeted object
159 | 		this.material.emissive.setHex( frontColor );
160 | 	}
161 | });
162 | scene.add( outOfReach );
163 | 
164 | //Front 
165 | var front = new THREE.Mesh( boxGeometry, new THREE.MeshLambertMaterial( { color: frontColor } ) );
166 | front.position.set( 0.5, 0, -5 );
167 | front.visible = true;
168 | Reticulum.add( front, {
169 | 	onGazeOver: function(){
170 | 		// do something when user targets object
171 | 		this.material.emissive.setHex( 0xffcc00 );
172 | 	},
173 | 	onGazeOut: function(){
174 | 		// do something when user moves reticle off targeted object
175 | 		this.material.emissive.setHex( frontColor );
176 | 	}
177 | });
178 | scene.add( front );
179 | //Toggle Visiblity of Front Cube
180 | window.setInterval( function(){ front.reticulumData.gazeable = !front.reticulumData.gazeable }, 3000 )
181 | 
182 | //Behind - Visible
183 | var behind = new THREE.Mesh( boxGeometry, new THREE.MeshLambertMaterial( { color: behindColor } ) );
184 | behind.position.set( 0, 0, -10 );
185 | behind.visible = true;
186 | Reticulum.add( behind, {
187 | 	onGazeOver: function(){
188 | 		// do something when user targets object
189 | 		this.material.emissive.setHex( 0xffcc00 );
190 | 	},
191 | 	onGazeOut: function(){
192 | 		// do something when user moves reticle off targeted object
193 | 		this.material.emissive.setHex( behindColor );
194 | 	}
195 | });
196 | 
197 | scene.add( behind );
198 | 
199 | 
200 | 
201 | 
202 | 
203 | 
204 | 
205 | function animate(timestamp) {
206 | 
207 | 	// *******************************
208 | 	// --- Reticulum ---
209 | 	// keep checking if user is looking at any tracked objects
210 | 	Reticulum.update();
211 | 	
212 | 	controls.update();
213 | 	camera.updateMatrixWorld(); // Required to stop ghosting - must be placed before render update
214 | 	manager.render(scene, camera, timestamp);
215 | 
216 | 	requestAnimationFrame(animate);
217 | 
218 | 	
219 | }
220 | animate();
221 | 
222 | 
223 | 
224 | 
225 | 
226 | /*
227 | Handle window resizes
228 | */
229 | function onWindowResize() {
230 |   camera.aspect = window.innerWidth / window.innerHeight;
231 |   camera.updateProjectionMatrix();
232 |   effect.setSize( window.innerWidth, window.innerHeight );
233 | }
234 | window.addEventListener( 'resize', onWindowResize, false );
235 | window.addEventListener( 'vrdisplaypresentchange', onWindowResize, true );
236 | </script>
237 | </body>
238 | </html>


--------------------------------------------------------------------------------
/examples/groups.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <title>Reticulum | Groups VR Example</title>
  5 | <meta charset="utf-8">
  6 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | <meta name="mobile-web-app-capable" content="yes">
  8 | <meta name="apple-mobile-web-app-capable" content="yes" />
  9 | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 10 | <style type="text/css">
 11 | 	html, body {
 12 | 		background-color: #000;
 13 | 		margin: 0;
 14 | 		padding: 0; 
 15 | 		overflow: hidden;
 16 | 	}
 17 | </style>
 18 | </head>
 19 | 
 20 | <body>
 21 | 
 22 | <script>
 23 | /*
 24 |  * Debug parameters.
 25 |  */
 26 | WebVRConfig = {
 27 |   /**
 28 |    * webvr-polyfill configuration
 29 |    */
 30 |   // Forces availability of VR mode.
 31 |   //FORCE_ENABLE_VR: true, // Default: false.
 32 |   
 33 |   // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
 34 |   //K_FILTER: 0.98, // Default: 0.98.
 35 |   
 36 |   // How far into the future to predict during fast motion.
 37 |   //PREDICTION_TIME_S: 0.040, // Default: 0.040 (in seconds).
 38 |   
 39 |   // Flag to disable touch panner. In case you have your own touch controls
 40 |   //TOUCH_PANNER_DISABLED: true, // Default: false.
 41 |   
 42 |   // Enable yaw panning only, disabling roll and pitch. This can be useful for
 43 |   // panoramas with nothing interesting above or below.
 44 |   //YAW_ONLY: true, // Default: false.
 45 | 
 46 |   // Enable the deprecated version of the API (navigator.getVRDevices).
 47 |   //ENABLE_DEPRECATED_API: true, // Default: false.
 48 |   
 49 |   // Scales the recommended buffer size reported by WebVR, which can improve
 50 |   // performance. Making this very small can lower the effective resolution of
 51 |   // your scene.
 52 |   BUFFER_SCALE: 0.5, // default: 1.0
 53 |   
 54 |   // Allow VRDisplay.submitFrame to change gl bindings, which is more
 55 |   // efficient if the application code will re-bind it's resources on the
 56 |   // next frame anyway.
 57 |   // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
 58 |   // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
 59 |   // and gl.TEXTURE_BINDING_2D for texture unit 0
 60 |   // Warning: enabling this might lead to rendering issues.
 61 |   //DIRTY_SUBMIT_FRAME_BINDINGS: true // default: false
 62 | };
 63 | </script>
 64 | 
 65 | <!-- THREE library, controls and effects -->
 66 | <script src="./js/lib/three.js"></script>
 67 | <script src="./js/lib/VRControls.js"></script>
 68 | <script src="./js/lib/VREffect.js"></script>
 69 | <!-- WebVR polyfill and manager -->
 70 | <script src="./js/lib/webvr-polyfill.js"></script>
 71 | <script src="./js/lib/webvr-manager.js"></script>
 72 | <!-- A simple gaze interaction manager for VR -->
 73 | <script src="../reticulum.js"></script>
 74 | 
 75 | 
 76 | 
 77 | <script>
 78 | // Setup three.js WebGL renderer
 79 | var renderer = new THREE.WebGLRenderer( { antialias: true } );
 80 | renderer.setPixelRatio( window.devicePixelRatio );
 81 | // Append the canvas element created by the renderer to document body element.
 82 | document.body.appendChild( renderer.domElement );
 83 | 
 84 | //Create a three.js scene
 85 | var scene = new THREE.Scene();
 86 | 
 87 | //Create a three.js camera
 88 | var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.3, 10000);
 89 | //Apply VR headset positional data to camera.
 90 | var controls = new THREE.VRControls( camera );
 91 | controls.standing = true;
 92 | 
 93 | //Apply VR stereo rendering to renderer
 94 | var effect = new THREE.VREffect( renderer );
 95 | effect.setSize( window.innerWidth, window.innerHeight );
 96 | 
 97 | // Create a VR manager helper to enter and exit VR mode.
 98 | var manager = new WebVRManager( renderer, effect, {hideButton: false} );
 99 | 
100 | 
101 | 
102 | var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
103 | hemiLight.position.set(0, 500, 0);
104 | scene.add(hemiLight);
105 | var boxGeometry = new THREE.BoxGeometry( 1, 1, 1 );
106 | var planeGeometry = new THREE.PlaneGeometry( 0.45, 0.11 );
107 | var sphereGeometry = new THREE.SphereGeometry( 2, 1, 1 );
108 | 
109 | 
110 | var parent1 = new THREE.Object3D();
111 | parent1.position.set( 0, 0, -2.5);
112 | scene.add( parent1 );
113 | 
114 | var parent2 = new THREE.Object3D();
115 | parent2.opacity = 0;
116 | parent2.position.set( 0, 0, -2.5);
117 | scene.add( parent2 );
118 | 
119 | 
120 | //Boxes, Planes and spheres
121 | for ( var i = 0; i < 3; i ++ ) {
122 | 	addMesh(planeGeometry, parent1, 0xcccc00);
123 | 	addMesh(boxGeometry, parent2, 0xcccccc );
124 | }
125 | 
126 | 
127 | 
128 | 
129 | 
130 | function addMesh(geo, group, color) {
131 | 
132 | 	var object = new THREE.Mesh( geo, new THREE.MeshBasicMaterial( { color: color } ) );
133 | 	
134 | 	object.position.x = THREE.Math.randFloat( -4.0, 4.0 );
135 | 	object.position.y = THREE.Math.randFloat( -1.0, 1.0 );
136 | 	object.position.z = THREE.Math.randFloat( -1.0, 1.0 );;
137 | 	
138 | 	
139 | 	// *******************************
140 | 	// --- Reticulum ---
141 | 	// have the object react when user looks at it
142 | 	// track the object
143 | 	Reticulum.add( object, {
144 | 		onGazeOver: function(){
145 | 			// do something when user targets object
146 | 			//this.material.emissive.setHex( 0xffcc00 );
147 | 		},
148 | 		onGazeOut: function(){
149 | 			// do something when user moves reticle off targeted object
150 | 			//this.material.emissive.setHex( 0xcc0000 );
151 | 		},
152 | 		onGazeLong: function(){
153 | 			// do something user targetes object for specific time
154 | 			//this.material.emissive.setHex( 0x0000cc );
155 | 		},
156 | 		onGazeClick: function(){
157 | 			// have the object react when user clicks / taps on targeted object
158 | 			//this.material.emissive.setHex( 0x00cccc * Math.random() );
159 | 		}
160 | 	});
161 | 
162 | 	group.add( object );
163 | 
164 | }
165 | 
166 | 
167 | // *******************************
168 | // --- Reticulum ---
169 | // initiate Reticulum so it loads up 
170 | Reticulum.init(camera, {
171 | 	proximity: false,
172 | 	clickevents: true,
173 | 	reticle: {
174 | 		visible: true,
175 | 		restPoint: 1000, //Defines the reticle's resting point when no object has been targeted
176 | 		color: 0xcc0000,
177 | 		innerRadius: 0.0004,
178 | 		outerRadius: 0.003,
179 | 		hover: {
180 | 			color: 0xcc0000,
181 | 			innerRadius: 0.02,
182 | 			outerRadius: 0.024,
183 | 			speed: 5,
184 | 			vibrate: 50 //Set to 0 or [] to disable
185 | 		}
186 | 	},
187 | 	fuse: {
188 | 		visible: false,
189 | 		duration: 2.5,
190 | 		color: 0x00fff6,
191 | 		innerRadius: 0.045,
192 | 		outerRadius: 0.06,
193 | 		vibrate: 0, //Set to 0 or [] to disable
194 | 		clickCancelFuse: false //If users clicks on targeted object fuse is canceled
195 | 	}
196 | });
197 | 
198 | // IMPORTANT add camera to cene if you want to see a reticle 
199 | scene.add(camera);
200 | 
201 | 
202 | 
203 | 
204 | 
205 | 
206 | function animate(timestamp) {
207 | 
208 | 	// *******************************
209 | 	// --- Reticulum ---
210 | 	// keep checking if user is looking at any tracked objects
211 | 	Reticulum.update();
212 | 	
213 | 	controls.update();
214 | 	
215 | 	camera.updateMatrixWorld(); // Required to stop ghosting - must be placed before render update
216 | 	manager.render(scene, camera, timestamp);
217 | 
218 | 	requestAnimationFrame(animate);
219 | 	
220 | }
221 | animate();
222 | 
223 | 
224 | 
225 | /*
226 | Handle window resizes
227 | */
228 | function onWindowResize() {
229 |   camera.aspect = window.innerWidth / window.innerHeight;
230 |   camera.updateProjectionMatrix();
231 |   effect.setSize( window.innerWidth, window.innerHeight );
232 | }
233 | window.addEventListener( 'resize', onWindowResize, false );
234 | window.addEventListener( 'vrdisplaypresentchange', onWindowResize, true );
235 | </script>
236 | </body>
237 | </html>


--------------------------------------------------------------------------------
/examples/img/interactivepatterns_displayreticle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skezo/Reticulum/360e80af3fa079f8c8a893fe0b0d7a8039d9e027/examples/img/interactivepatterns_displayreticle.png


--------------------------------------------------------------------------------
/examples/js/lib/VRControls.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author dmarcos / https://github.com/dmarcos
  3 |  * @author mrdoob / http://mrdoob.com
  4 |  */
  5 | 
  6 | THREE.VRControls = function ( object, onError ) {
  7 | 
  8 | 	var scope = this;
  9 | 
 10 | 	var vrDisplay, vrDisplays;
 11 | 
 12 | 	var standingMatrix = new THREE.Matrix4();
 13 | 
 14 | 	var frameData = null;
 15 | 
 16 | 	if ( 'VRFrameData' in window ) {
 17 | 
 18 | 		frameData = new VRFrameData();
 19 | 
 20 | 	}
 21 | 
 22 | 	function gotVRDisplays( displays ) {
 23 | 
 24 | 		vrDisplays = displays;
 25 | 
 26 | 		if ( displays.length > 0 ) {
 27 | 
 28 | 			vrDisplay = displays[ 0 ];
 29 | 
 30 | 		} else {
 31 | 
 32 | 			if ( onError ) onError( 'VR input not available.' );
 33 | 
 34 | 		}
 35 | 
 36 | 	}
 37 | 
 38 | 	if ( navigator.getVRDisplays ) {
 39 | 
 40 | 		navigator.getVRDisplays().then( gotVRDisplays ).catch( function () {
 41 | 
 42 | 			console.warn( 'THREE.VRControls: Unable to get VR Displays' );
 43 | 
 44 | 		} );
 45 | 
 46 | 	}
 47 | 
 48 | 	// the Rift SDK returns the position in meters
 49 | 	// this scale factor allows the user to define how meters
 50 | 	// are converted to scene units.
 51 | 
 52 | 	this.scale = 1;
 53 | 
 54 | 	// If true will use "standing space" coordinate system where y=0 is the
 55 | 	// floor and x=0, z=0 is the center of the room.
 56 | 	this.standing = false;
 57 | 
 58 | 	// Distance from the users eyes to the floor in meters. Used when
 59 | 	// standing=true but the VRDisplay doesn't provide stageParameters.
 60 | 	this.userHeight = 1.6;
 61 | 
 62 | 	this.getVRDisplay = function () {
 63 | 
 64 | 		return vrDisplay;
 65 | 
 66 | 	};
 67 | 
 68 | 	this.setVRDisplay = function ( value ) {
 69 | 
 70 | 		vrDisplay = value;
 71 | 
 72 | 	};
 73 | 
 74 | 	this.getVRDisplays = function () {
 75 | 
 76 | 		console.warn( 'THREE.VRControls: getVRDisplays() is being deprecated.' );
 77 | 		return vrDisplays;
 78 | 
 79 | 	};
 80 | 
 81 | 	this.getStandingMatrix = function () {
 82 | 
 83 | 		return standingMatrix;
 84 | 
 85 | 	};
 86 | 
 87 | 	this.update = function () {
 88 | 
 89 | 		if ( vrDisplay ) {
 90 | 
 91 | 			var pose;
 92 | 
 93 | 			if ( vrDisplay.getFrameData ) {
 94 | 
 95 | 				vrDisplay.getFrameData( frameData );
 96 | 				pose = frameData.pose;
 97 | 
 98 | 			} else if ( vrDisplay.getPose ) {
 99 | 
100 | 				pose = vrDisplay.getPose();
101 | 
102 | 			}
103 | 
104 | 			if ( pose.orientation !== null ) {
105 | 
106 | 				object.quaternion.fromArray( pose.orientation );
107 | 
108 | 			}
109 | 
110 | 			if ( pose.position !== null ) {
111 | 
112 | 				object.position.fromArray( pose.position );
113 | 
114 | 			} else {
115 | 
116 | 				object.position.set( 0, 0, 0 );
117 | 
118 | 			}
119 | 
120 | 			if ( this.standing ) {
121 | 
122 | 				if ( vrDisplay.stageParameters ) {
123 | 
124 | 					object.updateMatrix();
125 | 
126 | 					standingMatrix.fromArray( vrDisplay.stageParameters.sittingToStandingTransform );
127 | 					object.applyMatrix( standingMatrix );
128 | 
129 | 				} else {
130 | 
131 | 					object.position.setY( object.position.y + this.userHeight );
132 | 
133 | 				}
134 | 
135 | 			}
136 | 
137 | 			object.position.multiplyScalar( scope.scale );
138 | 
139 | 		}
140 | 
141 | 	};
142 | 
143 | 	this.dispose = function () {
144 | 
145 | 		vrDisplay = null;
146 | 
147 | 	};
148 | 
149 | };
150 | 


--------------------------------------------------------------------------------
/examples/js/lib/VREffect.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author dmarcos / https://github.com/dmarcos
  3 |  * @author mrdoob / http://mrdoob.com
  4 |  *
  5 |  * WebVR Spec: http://mozvr.github.io/webvr-spec/webvr.html
  6 |  *
  7 |  * Firefox: http://mozvr.com/downloads/
  8 |  * Chromium: https://webvr.info/get-chrome
  9 |  */
 10 | 
 11 | THREE.VREffect = function ( renderer, onError ) {
 12 | 
 13 | 	var vrDisplay, vrDisplays;
 14 | 	var eyeTranslationL = new THREE.Vector3();
 15 | 	var eyeTranslationR = new THREE.Vector3();
 16 | 	var renderRectL, renderRectR;
 17 | 	var headMatrix = new THREE.Matrix4();
 18 | 	var eyeMatrixL = new THREE.Matrix4();
 19 | 	var eyeMatrixR = new THREE.Matrix4();
 20 | 
 21 | 	var frameData = null;
 22 | 
 23 | 	if ( 'VRFrameData' in window ) {
 24 | 
 25 | 		frameData = new window.VRFrameData();
 26 | 
 27 | 	}
 28 | 
 29 | 	function gotVRDisplays( displays ) {
 30 | 
 31 | 		vrDisplays = displays;
 32 | 
 33 | 		if ( displays.length > 0 ) {
 34 | 
 35 | 			vrDisplay = displays[ 0 ];
 36 | 
 37 | 		} else {
 38 | 
 39 | 			if ( onError ) onError( 'HMD not available' );
 40 | 
 41 | 		}
 42 | 
 43 | 	}
 44 | 
 45 | 	if ( navigator.getVRDisplays ) {
 46 | 
 47 | 		navigator.getVRDisplays().then( gotVRDisplays ).catch( function () {
 48 | 
 49 | 			console.warn( 'THREE.VREffect: Unable to get VR Displays' );
 50 | 
 51 | 		} );
 52 | 
 53 | 	}
 54 | 
 55 | 	//
 56 | 
 57 | 	this.isPresenting = false;
 58 | 
 59 | 	var scope = this;
 60 | 
 61 | 	var rendererSize = renderer.getSize();
 62 | 	var rendererUpdateStyle = false;
 63 | 	var rendererPixelRatio = renderer.getPixelRatio();
 64 | 
 65 | 	this.getVRDisplay = function () {
 66 | 
 67 | 		return vrDisplay;
 68 | 
 69 | 	};
 70 | 
 71 | 	this.setVRDisplay = function ( value ) {
 72 | 
 73 | 		vrDisplay = value;
 74 | 
 75 | 	};
 76 | 
 77 | 	this.getVRDisplays = function () {
 78 | 
 79 | 		console.warn( 'THREE.VREffect: getVRDisplays() is being deprecated.' );
 80 | 		return vrDisplays;
 81 | 
 82 | 	};
 83 | 
 84 | 	this.setSize = function ( width, height, updateStyle ) {
 85 | 
 86 | 		rendererSize = { width: width, height: height };
 87 | 		rendererUpdateStyle = updateStyle;
 88 | 
 89 | 		if ( scope.isPresenting ) {
 90 | 
 91 | 			var eyeParamsL = vrDisplay.getEyeParameters( 'left' );
 92 | 			renderer.setPixelRatio( 1 );
 93 | 			renderer.setSize( eyeParamsL.renderWidth * 2, eyeParamsL.renderHeight, false );
 94 | 
 95 | 		} else {
 96 | 
 97 | 			renderer.setPixelRatio( rendererPixelRatio );
 98 | 			renderer.setSize( width, height, updateStyle );
 99 | 
100 | 		}
101 | 
102 | 	};
103 | 
104 | 	// VR presentation
105 | 
106 | 	var canvas = renderer.domElement;
107 | 	var defaultLeftBounds = [ 0.0, 0.0, 0.5, 1.0 ];
108 | 	var defaultRightBounds = [ 0.5, 0.0, 0.5, 1.0 ];
109 | 
110 | 	function onVRDisplayPresentChange() {
111 | 
112 | 		var wasPresenting = scope.isPresenting;
113 | 		scope.isPresenting = vrDisplay !== undefined && vrDisplay.isPresenting;
114 | 
115 | 		if ( scope.isPresenting ) {
116 | 
117 | 			var eyeParamsL = vrDisplay.getEyeParameters( 'left' );
118 | 			var eyeWidth = eyeParamsL.renderWidth;
119 | 			var eyeHeight = eyeParamsL.renderHeight;
120 | 
121 | 			if ( ! wasPresenting ) {
122 | 
123 | 				rendererPixelRatio = renderer.getPixelRatio();
124 | 				rendererSize = renderer.getSize();
125 | 
126 | 				renderer.setPixelRatio( 1 );
127 | 				renderer.setSize( eyeWidth * 2, eyeHeight, false );
128 | 
129 | 			}
130 | 
131 | 		} else if ( wasPresenting ) {
132 | 
133 | 			renderer.setPixelRatio( rendererPixelRatio );
134 | 			renderer.setSize( rendererSize.width, rendererSize.height, rendererUpdateStyle );
135 | 
136 | 		}
137 | 
138 | 	}
139 | 
140 | 	window.addEventListener( 'vrdisplaypresentchange', onVRDisplayPresentChange, false );
141 | 
142 | 	this.setFullScreen = function ( boolean ) {
143 | 
144 | 		return new Promise( function ( resolve, reject ) {
145 | 
146 | 			if ( vrDisplay === undefined ) {
147 | 
148 | 				reject( new Error( 'No VR hardware found.' ) );
149 | 				return;
150 | 
151 | 			}
152 | 
153 | 			if ( scope.isPresenting === boolean ) {
154 | 
155 | 				resolve();
156 | 				return;
157 | 
158 | 			}
159 | 
160 | 			if ( boolean ) {
161 | 
162 | 				resolve( vrDisplay.requestPresent( [ { source: canvas } ] ) );
163 | 
164 | 			} else {
165 | 
166 | 				resolve( vrDisplay.exitPresent() );
167 | 
168 | 			}
169 | 
170 | 		} );
171 | 
172 | 	};
173 | 
174 | 	this.requestPresent = function () {
175 | 
176 | 		return this.setFullScreen( true );
177 | 
178 | 	};
179 | 
180 | 	this.exitPresent = function () {
181 | 
182 | 		return this.setFullScreen( false );
183 | 
184 | 	};
185 | 
186 | 	this.requestAnimationFrame = function ( f ) {
187 | 
188 | 		if ( vrDisplay !== undefined ) {
189 | 
190 | 			return vrDisplay.requestAnimationFrame( f );
191 | 
192 | 		} else {
193 | 
194 | 			return window.requestAnimationFrame( f );
195 | 
196 | 		}
197 | 
198 | 	};
199 | 
200 | 	this.cancelAnimationFrame = function ( h ) {
201 | 
202 | 		if ( vrDisplay !== undefined ) {
203 | 
204 | 			vrDisplay.cancelAnimationFrame( h );
205 | 
206 | 		} else {
207 | 
208 | 			window.cancelAnimationFrame( h );
209 | 
210 | 		}
211 | 
212 | 	};
213 | 
214 | 	this.submitFrame = function () {
215 | 
216 | 		if ( vrDisplay !== undefined && scope.isPresenting ) {
217 | 
218 | 			vrDisplay.submitFrame();
219 | 
220 | 		}
221 | 
222 | 	};
223 | 
224 | 	this.autoSubmitFrame = true;
225 | 
226 | 	// render
227 | 
228 | 	var cameraL = new THREE.PerspectiveCamera();
229 | 	cameraL.layers.enable( 1 );
230 | 
231 | 	var cameraR = new THREE.PerspectiveCamera();
232 | 	cameraR.layers.enable( 2 );
233 | 
234 | 	this.render = function ( scene, camera, renderTarget, forceClear ) {
235 | 
236 | 		if ( vrDisplay && scope.isPresenting ) {
237 | 
238 | 			var autoUpdate = scene.autoUpdate;
239 | 
240 | 			if ( autoUpdate ) {
241 | 
242 | 				scene.updateMatrixWorld();
243 | 				scene.autoUpdate = false;
244 | 
245 | 			}
246 | 
247 | 			if ( Array.isArray( scene ) ) {
248 | 
249 | 				console.warn( 'THREE.VREffect.render() no longer supports arrays. Use object.layers instead.' );
250 | 				scene = scene[ 0 ];
251 | 
252 | 			}
253 | 
254 | 			// When rendering we don't care what the recommended size is, only what the actual size
255 | 			// of the backbuffer is.
256 | 			var size = renderer.getSize();
257 | 			var layers = vrDisplay.getLayers();
258 | 			var leftBounds;
259 | 			var rightBounds;
260 | 
261 | 			if ( layers.length ) {
262 | 
263 | 				var layer = layers[ 0 ];
264 | 
265 | 				leftBounds = layer.leftBounds !== null && layer.leftBounds.length === 4 ? layer.leftBounds : defaultLeftBounds;
266 | 				rightBounds = layer.rightBounds !== null && layer.rightBounds.length === 4 ? layer.rightBounds : defaultRightBounds;
267 | 
268 | 			} else {
269 | 
270 | 				leftBounds = defaultLeftBounds;
271 | 				rightBounds = defaultRightBounds;
272 | 
273 | 			}
274 | 
275 | 			renderRectL = {
276 | 				x: Math.round( size.width * leftBounds[ 0 ] ),
277 | 				y: Math.round( size.height * leftBounds[ 1 ] ),
278 | 				width: Math.round( size.width * leftBounds[ 2 ] ),
279 | 				height: Math.round( size.height * leftBounds[ 3 ] )
280 | 			};
281 | 			renderRectR = {
282 | 				x: Math.round( size.width * rightBounds[ 0 ] ),
283 | 				y: Math.round( size.height * rightBounds[ 1 ] ),
284 | 				width: Math.round( size.width * rightBounds[ 2 ] ),
285 | 				height: Math.round( size.height * rightBounds[ 3 ] )
286 | 			};
287 | 
288 | 			if ( renderTarget ) {
289 | 
290 | 				renderer.setRenderTarget( renderTarget );
291 | 				renderTarget.scissorTest = true;
292 | 
293 | 			} else {
294 | 
295 | 				renderer.setRenderTarget( null );
296 | 				renderer.setScissorTest( true );
297 | 
298 | 			}
299 | 
300 | 			if ( renderer.autoClear || forceClear ) renderer.clear();
301 | 
302 | 			if ( camera.parent === null ) camera.updateMatrixWorld();
303 | 
304 | 			camera.matrixWorld.decompose( cameraL.position, cameraL.quaternion, cameraL.scale );
305 | 
306 | 			cameraR.position.copy( cameraL.position );
307 | 			cameraR.quaternion.copy( cameraL.quaternion );
308 | 			cameraR.scale.copy( cameraL.scale );
309 | 
310 | 			if ( vrDisplay.getFrameData ) {
311 | 
312 | 				vrDisplay.depthNear = camera.near;
313 | 				vrDisplay.depthFar = camera.far;
314 | 
315 | 				vrDisplay.getFrameData( frameData );
316 | 
317 | 				cameraL.projectionMatrix.elements = frameData.leftProjectionMatrix;
318 | 				cameraR.projectionMatrix.elements = frameData.rightProjectionMatrix;
319 | 
320 | 				getEyeMatrices( frameData );
321 | 
322 | 				cameraL.updateMatrix();
323 | 				cameraL.matrix.multiply( eyeMatrixL );
324 | 				cameraL.matrix.decompose( cameraL.position, cameraL.quaternion, cameraL.scale );
325 | 
326 | 				cameraR.updateMatrix();
327 | 				cameraR.matrix.multiply( eyeMatrixR );
328 | 				cameraR.matrix.decompose( cameraR.position, cameraR.quaternion, cameraR.scale );
329 | 
330 | 			} else {
331 | 
332 | 				var eyeParamsL = vrDisplay.getEyeParameters( 'left' );
333 | 				var eyeParamsR = vrDisplay.getEyeParameters( 'right' );
334 | 
335 | 				cameraL.projectionMatrix = fovToProjection( eyeParamsL.fieldOfView, true, camera.near, camera.far );
336 | 				cameraR.projectionMatrix = fovToProjection( eyeParamsR.fieldOfView, true, camera.near, camera.far );
337 | 
338 | 				eyeTranslationL.fromArray( eyeParamsL.offset );
339 | 				eyeTranslationR.fromArray( eyeParamsR.offset );
340 | 
341 | 				cameraL.translateOnAxis( eyeTranslationL, cameraL.scale.x );
342 | 				cameraR.translateOnAxis( eyeTranslationR, cameraR.scale.x );
343 | 
344 | 			}
345 | 
346 | 			// render left eye
347 | 			if ( renderTarget ) {
348 | 
349 | 				renderTarget.viewport.set( renderRectL.x, renderRectL.y, renderRectL.width, renderRectL.height );
350 | 				renderTarget.scissor.set( renderRectL.x, renderRectL.y, renderRectL.width, renderRectL.height );
351 | 
352 | 			} else {
353 | 
354 | 				renderer.setViewport( renderRectL.x, renderRectL.y, renderRectL.width, renderRectL.height );
355 | 				renderer.setScissor( renderRectL.x, renderRectL.y, renderRectL.width, renderRectL.height );
356 | 
357 | 			}
358 | 			renderer.render( scene, cameraL, renderTarget, forceClear );
359 | 
360 | 			// render right eye
361 | 			if ( renderTarget ) {
362 | 
363 | 				renderTarget.viewport.set( renderRectR.x, renderRectR.y, renderRectR.width, renderRectR.height );
364 | 				renderTarget.scissor.set( renderRectR.x, renderRectR.y, renderRectR.width, renderRectR.height );
365 | 
366 | 			} else {
367 | 
368 | 				renderer.setViewport( renderRectR.x, renderRectR.y, renderRectR.width, renderRectR.height );
369 | 				renderer.setScissor( renderRectR.x, renderRectR.y, renderRectR.width, renderRectR.height );
370 | 
371 | 			}
372 | 			renderer.render( scene, cameraR, renderTarget, forceClear );
373 | 
374 | 			if ( renderTarget ) {
375 | 
376 | 				renderTarget.viewport.set( 0, 0, size.width, size.height );
377 | 				renderTarget.scissor.set( 0, 0, size.width, size.height );
378 | 				renderTarget.scissorTest = false;
379 | 				renderer.setRenderTarget( null );
380 | 
381 | 			} else {
382 | 
383 | 				renderer.setViewport( 0, 0, size.width, size.height );
384 | 				renderer.setScissorTest( false );
385 | 
386 | 			}
387 | 
388 | 			if ( autoUpdate ) {
389 | 
390 | 				scene.autoUpdate = true;
391 | 
392 | 			}
393 | 
394 | 			if ( scope.autoSubmitFrame ) {
395 | 
396 | 				scope.submitFrame();
397 | 
398 | 			}
399 | 
400 | 			return;
401 | 
402 | 		}
403 | 
404 | 		// Regular render mode if not HMD
405 | 
406 | 		renderer.render( scene, camera, renderTarget, forceClear );
407 | 
408 | 	};
409 | 
410 | 	this.dispose = function () {
411 | 
412 | 		window.removeEventListener( 'vrdisplaypresentchange', onVRDisplayPresentChange, false );
413 | 
414 | 	};
415 | 
416 | 	//
417 | 
418 | 	var poseOrientation = new THREE.Quaternion();
419 | 	var posePosition = new THREE.Vector3();
420 | 
421 | 	// Compute model matrices of the eyes with respect to the head.
422 | 	function getEyeMatrices( frameData ) {
423 | 
424 | 		// Compute the matrix for the position of the head based on the pose
425 | 		if ( frameData.pose.orientation ) {
426 | 
427 | 			poseOrientation.fromArray( frameData.pose.orientation );
428 | 			headMatrix.makeRotationFromQuaternion( poseOrientation );
429 | 
430 | 		}	else {
431 | 
432 | 			headMatrix.identity();
433 | 
434 | 		}
435 | 
436 | 		if ( frameData.pose.position ) {
437 | 
438 | 			posePosition.fromArray( frameData.pose.position );
439 | 			headMatrix.setPosition( posePosition );
440 | 
441 | 		}
442 | 
443 | 		// The view matrix transforms vertices from sitting space to eye space. As such, the view matrix can be thought of as a product of two matrices:
444 | 		// headToEyeMatrix * sittingToHeadMatrix
445 | 
446 | 		// The headMatrix that we've calculated above is the model matrix of the head in sitting space, which is the inverse of sittingToHeadMatrix.
447 | 		// So when we multiply the view matrix with headMatrix, we're left with headToEyeMatrix:
448 | 		// viewMatrix * headMatrix = headToEyeMatrix * sittingToHeadMatrix * headMatrix = headToEyeMatrix
449 | 
450 | 		eyeMatrixL.fromArray( frameData.leftViewMatrix );
451 | 		eyeMatrixL.multiply( headMatrix );
452 | 		eyeMatrixR.fromArray( frameData.rightViewMatrix );
453 | 		eyeMatrixR.multiply( headMatrix );
454 | 
455 | 		// The eye's model matrix in head space is the inverse of headToEyeMatrix we calculated above.
456 | 
457 | 		eyeMatrixL.getInverse( eyeMatrixL );
458 | 		eyeMatrixR.getInverse( eyeMatrixR );
459 | 
460 | 	}
461 | 
462 | 	function fovToNDCScaleOffset( fov ) {
463 | 
464 | 		var pxscale = 2.0 / ( fov.leftTan + fov.rightTan );
465 | 		var pxoffset = ( fov.leftTan - fov.rightTan ) * pxscale * 0.5;
466 | 		var pyscale = 2.0 / ( fov.upTan + fov.downTan );
467 | 		var pyoffset = ( fov.upTan - fov.downTan ) * pyscale * 0.5;
468 | 		return { scale: [ pxscale, pyscale ], offset: [ pxoffset, pyoffset ] };
469 | 
470 | 	}
471 | 
472 | 	function fovPortToProjection( fov, rightHanded, zNear, zFar ) {
473 | 
474 | 		rightHanded = rightHanded === undefined ? true : rightHanded;
475 | 		zNear = zNear === undefined ? 0.01 : zNear;
476 | 		zFar = zFar === undefined ? 10000.0 : zFar;
477 | 
478 | 		var handednessScale = rightHanded ? - 1.0 : 1.0;
479 | 
480 | 		// start with an identity matrix
481 | 		var mobj = new THREE.Matrix4();
482 | 		var m = mobj.elements;
483 | 
484 | 		// and with scale/offset info for normalized device coords
485 | 		var scaleAndOffset = fovToNDCScaleOffset( fov );
486 | 
487 | 		// X result, map clip edges to [-w,+w]
488 | 		m[ 0 * 4 + 0 ] = scaleAndOffset.scale[ 0 ];
489 | 		m[ 0 * 4 + 1 ] = 0.0;
490 | 		m[ 0 * 4 + 2 ] = scaleAndOffset.offset[ 0 ] * handednessScale;
491 | 		m[ 0 * 4 + 3 ] = 0.0;
492 | 
493 | 		// Y result, map clip edges to [-w,+w]
494 | 		// Y offset is negated because this proj matrix transforms from world coords with Y=up,
495 | 		// but the NDC scaling has Y=down (thanks D3D?)
496 | 		m[ 1 * 4 + 0 ] = 0.0;
497 | 		m[ 1 * 4 + 1 ] = scaleAndOffset.scale[ 1 ];
498 | 		m[ 1 * 4 + 2 ] = - scaleAndOffset.offset[ 1 ] * handednessScale;
499 | 		m[ 1 * 4 + 3 ] = 0.0;
500 | 
501 | 		// Z result (up to the app)
502 | 		m[ 2 * 4 + 0 ] = 0.0;
503 | 		m[ 2 * 4 + 1 ] = 0.0;
504 | 		m[ 2 * 4 + 2 ] = zFar / ( zNear - zFar ) * - handednessScale;
505 | 		m[ 2 * 4 + 3 ] = ( zFar * zNear ) / ( zNear - zFar );
506 | 
507 | 		// W result (= Z in)
508 | 		m[ 3 * 4 + 0 ] = 0.0;
509 | 		m[ 3 * 4 + 1 ] = 0.0;
510 | 		m[ 3 * 4 + 2 ] = handednessScale;
511 | 		m[ 3 * 4 + 3 ] = 0.0;
512 | 
513 | 		mobj.transpose();
514 | 		return mobj;
515 | 
516 | 	}
517 | 
518 | 	function fovToProjection( fov, rightHanded, zNear, zFar ) {
519 | 
520 | 		var DEG2RAD = Math.PI / 180.0;
521 | 
522 | 		var fovPort = {
523 | 			upTan: Math.tan( fov.upDegrees * DEG2RAD ),
524 | 			downTan: Math.tan( fov.downDegrees * DEG2RAD ),
525 | 			leftTan: Math.tan( fov.leftDegrees * DEG2RAD ),
526 | 			rightTan: Math.tan( fov.rightDegrees * DEG2RAD )
527 | 		};
528 | 
529 | 		return fovPortToProjection( fovPort, rightHanded, zNear, zFar );
530 | 
531 | 	}
532 | 
533 | };
534 | 


--------------------------------------------------------------------------------
/examples/js/lib/device-info-test.js:
--------------------------------------------------------------------------------
  1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  2 | /*
  3 |  * Copyright 2015 Google Inc. All Rights Reserved.
  4 |  * Licensed under the Apache License, Version 2.0 (the "License");
  5 |  * you may not use this file except in compliance with the License.
  6 |  * You may obtain a copy of the License at
  7 |  *
  8 |  *     http://www.apache.org/licenses/LICENSE-2.0
  9 |  *
 10 |  * Unless required by applicable law or agreed to in writing, software
 11 |  * distributed under the License is distributed on an "AS IS" BASIS,
 12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 |  * See the License for the specific language governing permissions and
 14 |  * limitations under the License.
 15 |  */
 16 | 
 17 | var Distortion = require('./distortion/distortion.js');
 18 | var Util = require('./util.js');
 19 | 
 20 | function Device(params) {
 21 |   this.width = params.width || Util.getScreenWidth();
 22 |   this.height = params.height || Util.getScreenHeight();
 23 |   this.widthMeters = params.widthMeters;
 24 |   this.heightMeters = params.heightMeters;
 25 |   this.bevelMeters = params.bevelMeters;
 26 | }
 27 | 
 28 | 
 29 | // Fallback Android device (based on Nexus 5 measurements) for use when
 30 | // we can't recognize an Android device.
 31 | var DEFAULT_ANDROID = new Device({
 32 |   widthMeters: 0.110,
 33 |   heightMeters: 0.062,
 34 |   bevelMeters: 0.004
 35 | });
 36 | 
 37 | // Fallback iOS device (based on iPhone6) for use when
 38 | // we can't recognize an Android device.
 39 | var DEFAULT_IOS = new Device({
 40 |   widthMeters: 0.1038,
 41 |   heightMeters: 0.0584,
 42 |   bevelMeters: 0.004
 43 | });
 44 | 
 45 | 
 46 | var Viewers = {
 47 |   CardboardV1: new CardboardViewer({
 48 |     id: 'CardboardV1',
 49 |     label: 'Cardboard I/O 2014',
 50 |     fov: 40,
 51 |     interLensDistance: 0.060,
 52 |     baselineLensDistance: 0.035,
 53 |     screenLensDistance: 0.042,
 54 |     distortionCoefficients: [0.441, 0.156],
 55 |     inverseCoefficients: [-0.4410035, 0.42756155, -0.4804439, 0.5460139,
 56 |       -0.58821183, 0.5733938, -0.48303202, 0.33299083, -0.17573841,
 57 |       0.0651772, -0.01488963, 0.001559834]
 58 |   }),
 59 |   CardboardV2: new CardboardViewer({
 60 |     id: 'CardboardV2',
 61 |     label: 'Cardboard I/O 2015',
 62 |     fov: 60,
 63 |     interLensDistance: 0.064,
 64 |     baselineLensDistance: 0.035,
 65 |     screenLensDistance: 0.039,
 66 |     distortionCoefficients: [0.34, 0.55],
 67 |     inverseCoefficients: [-0.33836704, -0.18162185, 0.862655, -1.2462051,
 68 |       1.0560602, -0.58208317, 0.21609078, -0.05444823, 0.009177956,
 69 |       -9.904169E-4, 6.183535E-5, -1.6981803E-6]
 70 |   })
 71 | };
 72 | 
 73 | 
 74 | var DEFAULT_LEFT_CENTER = {x: 0.5, y: 0.5};
 75 | var DEFAULT_RIGHT_CENTER = {x: 0.5, y: 0.5};
 76 | 
 77 | /**
 78 |  * Manages information about the device and the viewer.
 79 |  *
 80 |  * deviceParams indicates the parameters of the device to use (generally
 81 |  * obtained from dpdb.getDeviceParams()). Can be null to mean no device
 82 |  * params were found.
 83 |  */
 84 | function DeviceInfo(deviceParams) {
 85 |   this.viewer = Viewers.CardboardV1;
 86 |   this.updateDeviceParams(deviceParams);
 87 | }
 88 | 
 89 | DeviceInfo.prototype.updateDeviceParams = function(deviceParams) {
 90 |   this.device = this.determineDevice_(deviceParams) || this.device;
 91 | };
 92 | 
 93 | DeviceInfo.prototype.getDevice = function() {
 94 |   return this.device;
 95 | };
 96 | 
 97 | DeviceInfo.prototype.setViewer = function(viewer) {
 98 |   this.viewer = viewer;
 99 | };
100 | 
101 | DeviceInfo.prototype.determineDevice_ = function(deviceParams) {
102 |   if (!deviceParams) {
103 |     // No parameters, so use a default.
104 |     if (Util.isIOS()) {
105 |       console.warn("Using fallback Android device measurements.");
106 |       return DEFAULT_IOS;
107 |     } else {
108 |       console.warn("Using fallback iOS device measurements.");
109 |       return DEFAULT_ANDROID;
110 |     }
111 |   }
112 | 
113 |   // Compute device screen dimensions based on deviceParams.
114 |   var METERS_PER_INCH = 0.0254;
115 |   var metersPerPixelX = METERS_PER_INCH / deviceParams.xdpi;
116 |   var metersPerPixelY = METERS_PER_INCH / deviceParams.ydpi;
117 |   var width = Util.getScreenWidth();
118 |   var height = Util.getScreenHeight();
119 |   return new Device({
120 |     widthMeters: metersPerPixelX * width,
121 |     heightMeters: metersPerPixelY * height,
122 |     bevelMeters: deviceParams.bevelMm * 0.001,
123 |   });
124 | };
125 | 
126 | /**
127 |  * Calculates field of view for the left eye.
128 |  */
129 | DeviceInfo.prototype.getDistortedFieldOfViewLeftEye = function() {
130 |   var viewer = this.viewer;
131 |   var device = this.device;
132 | 
133 |   var distortion = new Distortion(viewer.distortionCoefficients);
134 | 
135 |   // Device.height and device.width for device in portrait mode, so transpose.
136 |   var eyeToScreenDistance = viewer.screenLensDistance;
137 | 
138 |   var outerDist = (device.widthMeters - viewer.interLensDistance) / 2;
139 |   var innerDist = viewer.interLensDistance / 2;
140 |   var bottomDist = viewer.baselineLensDistance - device.bevelMeters;
141 |   var topDist = device.heightMeters - bottomDist;
142 | 
143 |   var outerAngle = THREE.Math.radToDeg(Math.atan(
144 |       distortion.distort(outerDist / eyeToScreenDistance)));
145 |   var innerAngle = THREE.Math.radToDeg(Math.atan(
146 |       distortion.distort(innerDist / eyeToScreenDistance)));
147 |   var bottomAngle = THREE.Math.radToDeg(Math.atan(
148 |       distortion.distort(bottomDist / eyeToScreenDistance)));
149 |   var topAngle = THREE.Math.radToDeg(Math.atan(
150 |       distortion.distort(topDist / eyeToScreenDistance)));
151 | 
152 |   return {
153 |     leftDegrees: Math.min(outerAngle, viewer.fov),
154 |     rightDegrees: Math.min(innerAngle, viewer.fov),
155 |     downDegrees: Math.min(bottomAngle, viewer.fov),
156 |     upDegrees: Math.min(topAngle, viewer.fov)
157 |   }
158 | };
159 | 
160 | DeviceInfo.prototype.getFieldOfViewLeftEye = function(opt_isUndistorted) {
161 |   return opt_isUndistorted ? this.getUndistortedFieldOfViewLeftEye() :
162 |       this.getDistortedFieldOfViewLeftEye();
163 | };
164 | 
165 | DeviceInfo.prototype.getFieldOfViewRightEye = function(opt_isUndistorted) {
166 |   var fov = this.getFieldOfViewLeftEye(opt_isUndistorted);
167 |   return {
168 |     leftDegrees: fov.rightDegrees,
169 |     rightDegrees: fov.leftDegrees,
170 |     upDegrees: fov.upDegrees,
171 |     downDegrees: fov.downDegrees
172 |   };
173 | };
174 | 
175 | /**
176 |  * Calculates a projection matrix for the left eye.
177 |  */
178 | DeviceInfo.prototype.getProjectionMatrixLeftEye = function(opt_isUndistorted) {
179 |   var fov = this.getFieldOfViewLeftEye(opt_isUndistorted);
180 | 
181 |   var projectionMatrix = new THREE.Matrix4();
182 |   var near = 0.1;
183 |   var far = 1000;
184 |   var left = Math.tan(THREE.Math.degToRad(fov.leftDegrees)) * near;
185 |   var right = Math.tan(THREE.Math.degToRad(fov.rightDegrees)) * near;
186 |   var bottom = Math.tan(THREE.Math.degToRad(fov.downDegrees)) * near;
187 |   var top = Math.tan(THREE.Math.degToRad(fov.upDegrees)) * near;
188 | 
189 |   // makeFrustum expects units in tan-angle space.
190 |   projectionMatrix.makeFrustum(-left, right, -bottom, top, near, far);
191 |   
192 |   return projectionMatrix;
193 | };
194 | 
195 | 
196 | DeviceInfo.prototype.getUndistortedViewportLeftEye = function() {
197 |   var p = this.getUndistortedParams_();
198 |   var viewer = this.viewer;
199 |   var device = this.device;
200 | 
201 |   var eyeToScreenDistance = viewer.screenLensDistance;
202 |   var screenWidth = device.widthMeters / eyeToScreenDistance;
203 |   var screenHeight = device.heightMeters / eyeToScreenDistance;
204 |   var xPxPerTanAngle = device.width / screenWidth;
205 |   var yPxPerTanAngle = device.height / screenHeight;
206 | 
207 |   var x = Math.round((p.eyePosX - p.outerDist) * xPxPerTanAngle);
208 |   var y = Math.round((p.eyePosY - p.bottomDist) * yPxPerTanAngle);
209 |   return {
210 |     x: x,
211 |     y: y,
212 |     width: Math.round((p.eyePosX + p.innerDist) * xPxPerTanAngle) - x,
213 |     height: Math.round((p.eyePosY + p.topDist) * yPxPerTanAngle) - y
214 |   };
215 | };
216 | 
217 | /**
218 |  * Calculates undistorted field of view for the left eye.
219 |  */
220 | DeviceInfo.prototype.getUndistortedFieldOfViewLeftEye = function() {
221 |   var p = this.getUndistortedParams_();
222 | 
223 |   return {
224 |     leftDegrees: THREE.Math.radToDeg(Math.atan(p.outerDist)),
225 |     rightDegrees: THREE.Math.radToDeg(Math.atan(p.innerDist)),
226 |     downDegrees: THREE.Math.radToDeg(Math.atan(p.bottomDist)),
227 |     upDegrees: THREE.Math.radToDeg(Math.atan(p.topDist))
228 |   };
229 | };
230 | 
231 | DeviceInfo.prototype.getUndistortedParams_ = function() {
232 |   var viewer = this.viewer;
233 |   var device = this.device;
234 |   var distortion = new Distortion(viewer.distortionCoefficients);
235 | 
236 |   // Most of these variables in tan-angle units.
237 |   var eyeToScreenDistance = viewer.screenLensDistance;
238 |   var halfLensDistance = viewer.interLensDistance / 2 / eyeToScreenDistance;
239 |   var screenWidth = device.widthMeters / eyeToScreenDistance;
240 |   var screenHeight = device.heightMeters / eyeToScreenDistance;
241 | 
242 |   var eyePosX = screenWidth / 2 - halfLensDistance;
243 |   var eyePosY = (viewer.baselineLensDistance - device.bevelMeters) / eyeToScreenDistance;
244 | 
245 |   var maxFov = viewer.fov;
246 |   var viewerMax = distortion.distortInverse(Math.tan(THREE.Math.degToRad(maxFov)));
247 |   var outerDist = Math.min(eyePosX, viewerMax);
248 |   var innerDist = Math.min(halfLensDistance, viewerMax);
249 |   var bottomDist = Math.min(eyePosY, viewerMax);
250 |   var topDist = Math.min(screenHeight - eyePosY, viewerMax);
251 | 
252 |   return {
253 |     outerDist: outerDist,
254 |     innerDist: innerDist,
255 |     topDist: topDist,
256 |     bottomDist: bottomDist,
257 |     eyePosX: eyePosX,
258 |     eyePosY: eyePosY
259 |   };
260 | };
261 | 
262 | 
263 | function CardboardViewer(params) {
264 |   // A machine readable ID.
265 |   this.id = params.id;
266 |   // A human readable label.
267 |   this.label = params.label;
268 | 
269 |   // Field of view in degrees (per side).
270 |   this.fov = params.fov;
271 | 
272 |   // Distance between lens centers in meters.
273 |   this.interLensDistance = params.interLensDistance;
274 |   // Distance between viewer baseline and lens center in meters.
275 |   this.baselineLensDistance = params.baselineLensDistance;
276 |   // Screen-to-lens distance in meters.
277 |   this.screenLensDistance = params.screenLensDistance;
278 | 
279 |   // Distortion coefficients.
280 |   this.distortionCoefficients = params.distortionCoefficients;
281 |   // Inverse distortion coefficients.
282 |   // TODO: Calculate these from distortionCoefficients in the future.
283 |   this.inverseCoefficients = params.inverseCoefficients;
284 | }
285 | 
286 | // Export viewer information.
287 | DeviceInfo.Viewers = Viewers;
288 | module.exports = DeviceInfo;
289 | 
290 | },{"./distortion/distortion.js":2,"./util.js":3}],2:[function(require,module,exports){
291 | /**
292 |  * TODO(smus): Implement coefficient inversion.
293 |  */
294 | function Distortion(coefficients) {
295 |   this.coefficients = coefficients;
296 | }
297 | 
298 | /**
299 |  * Calculates the inverse distortion for a radius.
300 |  * </p><p>
301 |  * Allows to compute the original undistorted radius from a distorted one.
302 |  * See also getApproximateInverseDistortion() for a faster but potentially
303 |  * less accurate method.
304 |  *
305 |  * @param {Number} radius Distorted radius from the lens center in tan-angle units.
306 |  * @return {Number} The undistorted radius in tan-angle units.
307 |  */
308 | Distortion.prototype.distortInverse = function(radius) {
309 |   // Secant method.
310 |   var r0 = radius / 0.9;
311 |   var r1 = radius * 0.9;
312 |   var dr0 = radius - this.distort(r0);
313 |   while (Math.abs(r1 - r0) > 0.0001 /** 0.1mm */) {
314 |     var dr1 = radius - this.distort(r1);
315 |     var r2 = r1 - dr1 * ((r1 - r0) / (dr1 - dr0));
316 |     r0 = r1;
317 |     r1 = r2;
318 |     dr0 = dr1;
319 |   }
320 |   return r1;
321 | }
322 | 
323 | 
324 | /**
325 |  * Distorts a radius by its distortion factor from the center of the lenses.
326 |  *
327 |  * @param {Number} radius Radius from the lens center in tan-angle units.
328 |  * @return {Number} The distorted radius in tan-angle units.
329 |  */
330 | Distortion.prototype.distort = function(radius) {
331 |   return radius * this.distortionFactor_(radius);
332 | }
333 | 
334 | /**
335 |  * Returns the distortion factor of a point.
336 |  *
337 |  * @param {Number} radius Radius of the point from the lens center in tan-angle units.
338 |  * @return {Number} The distortion factor. Multiply by this factor to distort points.
339 |  */
340 | Distortion.prototype.distortionFactor_ = function(radius) {
341 |   var result = 1.0;
342 |   var rFactor = 1.0;
343 |   var rSquared = radius * radius;
344 | 
345 |   for (var i = 0; i < this.coefficients.length; i++) {
346 |     var ki = this.coefficients[i];
347 |     rFactor *= rSquared;
348 |     result += ki * rFactor;
349 |   }
350 | 
351 |   return result;
352 | }
353 | 
354 | module.exports = Distortion;
355 | 
356 | },{}],3:[function(require,module,exports){
357 | /*
358 |  * Copyright 2015 Google Inc. All Rights Reserved.
359 |  * Licensed under the Apache License, Version 2.0 (the "License");
360 |  * you may not use this file except in compliance with the License.
361 |  * You may obtain a copy of the License at
362 |  *
363 |  *     http://www.apache.org/licenses/LICENSE-2.0
364 |  *
365 |  * Unless required by applicable law or agreed to in writing, software
366 |  * distributed under the License is distributed on an "AS IS" BASIS,
367 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
368 |  * See the License for the specific language governing permissions and
369 |  * limitations under the License.
370 |  */
371 | 
372 | var Util = {};
373 | 
374 | Util.base64 = function(mimeType, base64) {
375 |   return 'data:' + mimeType + ';base64,' + base64;
376 | };
377 | 
378 | Util.isMobile = function() {
379 |   var check = false;
380 |   (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
381 |   return check;
382 | };
383 | 
384 | Util.isFirefox = function() {
385 |   return /firefox/i.test(navigator.userAgent);
386 | };
387 | 
388 | Util.isIOS = function() {
389 |   return /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
390 | };
391 | 
392 | Util.isIFrame = function() {
393 |   try {
394 |     return window.self !== window.top;
395 |   } catch (e) {
396 |     return true;
397 |   }
398 | };
399 | 
400 | Util.appendQueryParameter = function(url, key, value) {
401 |   // Determine delimiter based on if the URL already GET parameters in it.
402 |   var delimiter = (url.indexOf('?') < 0 ? '?' : '&');
403 |   url += delimiter + key + '=' + value;
404 |   return url;
405 | };
406 | 
407 | // From http://goo.gl/4WX3tg
408 | Util.getQueryParameter = function(name) {
409 |   name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
410 |   var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
411 |       results = regex.exec(location.search);
412 |   return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
413 | };
414 | 
415 | Util.isLandscapeMode = function() {
416 |   return (window.orientation == 90 || window.orientation == -90);
417 | };
418 | 
419 | Util.getScreenWidth = function() {
420 |   return Math.max(window.screen.width, window.screen.height) *
421 |       window.devicePixelRatio;
422 | };
423 | 
424 | Util.getScreenHeight = function() {
425 |   return Math.min(window.screen.width, window.screen.height) *
426 |       window.devicePixelRatio;
427 | };
428 | 
429 | /**
430 |  * Utility to convert the projection matrix to a vector accepted by the shader.
431 |  *
432 |  * @param {Object} opt_params A rectangle to scale this vector by.
433 |  */
434 | Util.projectionMatrixToVector_ = function(matrix, opt_params) {
435 |   var params = opt_params || {};
436 |   var xScale = params.xScale || 1;
437 |   var yScale = params.yScale || 1;
438 |   var xTrans = params.xTrans || 0;
439 |   var yTrans = params.yTrans || 0;
440 | 
441 |   var elements = matrix.elements;
442 |   var vec = new THREE.Vector4();
443 |   vec.set(elements[4*0 + 0] * xScale,
444 |           elements[4*1 + 1] * yScale,
445 |           elements[4*2 + 0] - 1 - xTrans,
446 |           elements[4*2 + 1] - 1 - yTrans).divideScalar(2);
447 |   return vec;
448 | };
449 | 
450 | Util.leftProjectionVectorToRight_ = function(left) {
451 |   //projectionLeft + vec4(0.0, 0.0, 1.0, 0.0)) * vec4(1.0, 1.0, -1.0, 1.0);
452 |   var out = new THREE.Vector4(0, 0, 1, 0);
453 |   out.add(left); // out = left + (0, 0, 1, 0).
454 |   out.z *= -1; // Flip z.
455 | 
456 |   return out;
457 | };
458 | 
459 | 
460 | module.exports = Util;
461 | 
462 | },{}],4:[function(require,module,exports){
463 | var DeviceInfo = require('../src/device-info.js');
464 | 
465 | var di = new DeviceInfo();
466 | var centroid = di.getLeftEyeCenter();
467 | 
468 | // Size the canvas. Render the centroid.
469 | var canvas = document.querySelector('canvas');
470 | var w = window.innerWidth;
471 | var h = window.innerHeight;
472 | var x = centroid.x * w/2;
473 | var y = centroid.y * h;
474 | var size = 10;
475 | 
476 | canvas.width = w;
477 | canvas.height = h;
478 | 
479 | var ctx = canvas.getContext('2d');
480 | ctx.clearRect(0, 0, w, h);
481 | ctx.fillStyle = 'black';
482 | ctx.fillRect(x - size/2, y - size/2, size, size);
483 | 
484 | console.log('Placing eye at (%d, %d).', x, y);
485 | 
486 | },{"../src/device-info.js":1}]},{},[4]);
487 | 


--------------------------------------------------------------------------------
/examples/js/lib/webvr-manager.js:
--------------------------------------------------------------------------------
  1 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.WebVRManager = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
  2 | /*
  3 |  * Copyright 2015 Google Inc. All Rights Reserved.
  4 |  * Licensed under the Apache License, Version 2.0 (the "License");
  5 |  * you may not use this file except in compliance with the License.
  6 |  * You may obtain a copy of the License at
  7 |  *
  8 |  *     http://www.apache.org/licenses/LICENSE-2.0
  9 |  *
 10 |  * Unless required by applicable law or agreed to in writing, software
 11 |  * distributed under the License is distributed on an "AS IS" BASIS,
 12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 |  * See the License for the specific language governing permissions and
 14 |  * limitations under the License.
 15 |  */
 16 | 
 17 | var Emitter = _dereq_('./emitter.js');
 18 | var Modes = _dereq_('./modes.js');
 19 | var Util = _dereq_('./util.js');
 20 | 
 21 | /**
 22 |  * Everything having to do with the WebVR button.
 23 |  * Emits a 'click' event when it's clicked.
 24 |  */
 25 | function ButtonManager(opt_root) {
 26 |   var root = opt_root || document.body;
 27 |   this.loadIcons_();
 28 | 
 29 |   // Make the fullscreen button.
 30 |   var fsButton = this.createButton();
 31 |   fsButton.src = this.ICONS.fullscreen;
 32 |   fsButton.title = 'Fullscreen mode';
 33 |   var s = fsButton.style;
 34 |   s.bottom = 0;
 35 |   s.right = 0;
 36 |   fsButton.addEventListener('click', this.createClickHandler_('fs'));
 37 |   root.appendChild(fsButton);
 38 |   this.fsButton = fsButton;
 39 | 
 40 |   // Make the VR button.
 41 |   var vrButton = this.createButton();
 42 |   vrButton.src = this.ICONS.cardboard;
 43 |   vrButton.title = 'Virtual reality mode';
 44 |   var s = vrButton.style;
 45 |   s.bottom = 0;
 46 |   s.right = '48px';
 47 |   vrButton.addEventListener('click', this.createClickHandler_('vr'));
 48 |   root.appendChild(vrButton);
 49 |   this.vrButton = vrButton;
 50 | 
 51 |   this.isVisible = true;
 52 | 
 53 | }
 54 | ButtonManager.prototype = new Emitter();
 55 | 
 56 | ButtonManager.prototype.createButton = function() {
 57 |   var button = document.createElement('img');
 58 |   button.className = 'webvr-button';
 59 |   var s = button.style;
 60 |   s.position = 'absolute';
 61 |   s.width = '24px'
 62 |   s.height = '24px';
 63 |   s.backgroundSize = 'cover';
 64 |   s.backgroundColor = 'transparent';
 65 |   s.border = 0;
 66 |   s.userSelect = 'none';
 67 |   s.webkitUserSelect = 'none';
 68 |   s.MozUserSelect = 'none';
 69 |   s.cursor = 'pointer';
 70 |   s.padding = '12px';
 71 |   s.zIndex = 1;
 72 |   s.display = 'none';
 73 |   s.boxSizing = 'content-box';
 74 | 
 75 |   // Prevent button from being selected and dragged.
 76 |   button.draggable = false;
 77 |   button.addEventListener('dragstart', function(e) {
 78 |     e.preventDefault();
 79 |   });
 80 | 
 81 |   // Style it on hover.
 82 |   button.addEventListener('mouseenter', function(e) {
 83 |     s.filter = s.webkitFilter = 'drop-shadow(0 0 5px rgba(255,255,255,1))';
 84 |   });
 85 |   button.addEventListener('mouseleave', function(e) {
 86 |     s.filter = s.webkitFilter = '';
 87 |   });
 88 |   return button;
 89 | };
 90 | 
 91 | ButtonManager.prototype.setMode = function(mode, isVRCompatible) {
 92 |   isVRCompatible = isVRCompatible || WebVRConfig.FORCE_ENABLE_VR;
 93 |   if (!this.isVisible) {
 94 |     return;
 95 |   }
 96 |   switch (mode) {
 97 |     case Modes.NORMAL:
 98 |       this.fsButton.style.display = 'block';
 99 |       this.fsButton.src = this.ICONS.fullscreen;
100 |       this.vrButton.style.display = (isVRCompatible ? 'block' : 'none');
101 |       break;
102 |     case Modes.MAGIC_WINDOW:
103 |       this.fsButton.style.display = 'block';
104 |       this.fsButton.src = this.ICONS.exitFullscreen;
105 |       this.vrButton.style.display = 'none';
106 |       break;
107 |     case Modes.VR:
108 |       this.fsButton.style.display = 'none';
109 |       this.vrButton.style.display = 'none';
110 |       break;
111 |   }
112 | 
113 |   // Hack for Safari Mac/iOS to force relayout (svg-specific issue)
114 |   // http://goo.gl/hjgR6r
115 |   var oldValue = this.fsButton.style.display;
116 |   this.fsButton.style.display = 'inline-block';
117 |   this.fsButton.offsetHeight;
118 |   this.fsButton.style.display = oldValue;
119 | };
120 | 
121 | ButtonManager.prototype.setVisibility = function(isVisible) {
122 |   this.isVisible = isVisible;
123 |   this.fsButton.style.display = isVisible ? 'block' : 'none';
124 |   this.vrButton.style.display = isVisible ? 'block' : 'none';
125 | };
126 | 
127 | ButtonManager.prototype.createClickHandler_ = function(eventName) {
128 |   return function(e) {
129 |     e.stopPropagation();
130 |     e.preventDefault();
131 |     this.emit(eventName);
132 |   }.bind(this);
133 | };
134 | 
135 | ButtonManager.prototype.loadIcons_ = function() {
136 |   // Preload some hard-coded SVG.
137 |   this.ICONS = {};
138 |   this.ICONS.cardboard = Util.base64('image/svg+xml', 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0ZGRkZGRiI+CiAgICA8cGF0aCBkPSJNMjAuNzQgNkgzLjIxQzIuNTUgNiAyIDYuNTcgMiA3LjI4djEwLjQ0YzAgLjcuNTUgMS4yOCAxLjIzIDEuMjhoNC43OWMuNTIgMCAuOTYtLjMzIDEuMTQtLjc5bDEuNC0zLjQ4Yy4yMy0uNTkuNzktMS4wMSAxLjQ0LTEuMDFzMS4yMS40MiAxLjQ1IDEuMDFsMS4zOSAzLjQ4Yy4xOS40Ni42My43OSAxLjExLjc5aDQuNzljLjcxIDAgMS4yNi0uNTcgMS4yNi0xLjI4VjcuMjhjMC0uNy0uNTUtMS4yOC0xLjI2LTEuMjh6TTcuNSAxNC42MmMtMS4xNyAwLTIuMTMtLjk1LTIuMTMtMi4xMiAwLTEuMTcuOTYtMi4xMyAyLjEzLTIuMTMgMS4xOCAwIDIuMTIuOTYgMi4xMiAyLjEzcy0uOTUgMi4xMi0yLjEyIDIuMTJ6bTkgMGMtMS4xNyAwLTIuMTMtLjk1LTIuMTMtMi4xMiAwLTEuMTcuOTYtMi4xMyAyLjEzLTIuMTNzMi4xMi45NiAyLjEyIDIuMTMtLjk1IDIuMTItMi4xMiAyLjEyeiIvPgogICAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgwVjB6Ii8+Cjwvc3ZnPgo=');
139 |   this.ICONS.fullscreen = Util.base64('image/svg+xml', 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0ZGRkZGRiI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBkPSJNNyAxNEg1djVoNXYtMkg3di0zem0tMi00aDJWN2gzVjVINXY1em0xMiA3aC0zdjJoNXYtNWgtMnYzek0xNCA1djJoM3YzaDJWNWgtNXoiLz4KPC9zdmc+Cg==');
140 |   this.ICONS.exitFullscreen = Util.base64('image/svg+xml', 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0ZGRkZGRiI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBkPSJNNSAxNmgzdjNoMnYtNUg1djJ6bTMtOEg1djJoNVY1SDh2M3ptNiAxMWgydi0zaDN2LTJoLTV2NXptMi0xMVY1aC0ydjVoNVY4aC0zeiIvPgo8L3N2Zz4K');
141 |   this.ICONS.settings = Util.base64('image/svg+xml', 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0ZGRkZGRiI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBkPSJNMTkuNDMgMTIuOThjLjA0LS4zMi4wNy0uNjQuMDctLjk4cy0uMDMtLjY2LS4wNy0uOThsMi4xMS0xLjY1Yy4xOS0uMTUuMjQtLjQyLjEyLS42NGwtMi0zLjQ2Yy0uMTItLjIyLS4zOS0uMy0uNjEtLjIybC0yLjQ5IDFjLS41Mi0uNC0xLjA4LS43My0xLjY5LS45OGwtLjM4LTIuNjVDMTQuNDYgMi4xOCAxNC4yNSAyIDE0IDJoLTRjLS4yNSAwLS40Ni4xOC0uNDkuNDJsLS4zOCAyLjY1Yy0uNjEuMjUtMS4xNy41OS0xLjY5Ljk4bC0yLjQ5LTFjLS4yMy0uMDktLjQ5IDAtLjYxLjIybC0yIDMuNDZjLS4xMy4yMi0uMDcuNDkuMTIuNjRsMi4xMSAxLjY1Yy0uMDQuMzItLjA3LjY1LS4wNy45OHMuMDMuNjYuMDcuOThsLTIuMTEgMS42NWMtLjE5LjE1LS4yNC40Mi0uMTIuNjRsMiAzLjQ2Yy4xMi4yMi4zOS4zLjYxLjIybDIuNDktMWMuNTIuNCAxLjA4LjczIDEuNjkuOThsLjM4IDIuNjVjLjAzLjI0LjI0LjQyLjQ5LjQyaDRjLjI1IDAgLjQ2LS4xOC40OS0uNDJsLjM4LTIuNjVjLjYxLS4yNSAxLjE3LS41OSAxLjY5LS45OGwyLjQ5IDFjLjIzLjA5LjQ5IDAgLjYxLS4yMmwyLTMuNDZjLjEyLS4yMi4wNy0uNDktLjEyLS42NGwtMi4xMS0xLjY1ek0xMiAxNS41Yy0xLjkzIDAtMy41LTEuNTctMy41LTMuNXMxLjU3LTMuNSAzLjUtMy41IDMuNSAxLjU3IDMuNSAzLjUtMS41NyAzLjUtMy41IDMuNXoiLz4KPC9zdmc+Cg==');
142 | };
143 | 
144 | module.exports = ButtonManager;
145 | 
146 | },{"./emitter.js":2,"./modes.js":3,"./util.js":4}],2:[function(_dereq_,module,exports){
147 | /*
148 |  * Copyright 2015 Google Inc. All Rights Reserved.
149 |  * Licensed under the Apache License, Version 2.0 (the "License");
150 |  * you may not use this file except in compliance with the License.
151 |  * You may obtain a copy of the License at
152 |  *
153 |  *     http://www.apache.org/licenses/LICENSE-2.0
154 |  *
155 |  * Unless required by applicable law or agreed to in writing, software
156 |  * distributed under the License is distributed on an "AS IS" BASIS,
157 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
158 |  * See the License for the specific language governing permissions and
159 |  * limitations under the License.
160 |  */
161 | 
162 | function Emitter() {
163 |   this.callbacks = {};
164 | }
165 | 
166 | Emitter.prototype.emit = function(eventName) {
167 |   var callbacks = this.callbacks[eventName];
168 |   if (!callbacks) {
169 |     //console.log('No valid callback specified.');
170 |     return;
171 |   }
172 |   var args = [].slice.call(arguments);
173 |   // Eliminate the first param (the callback).
174 |   args.shift();
175 |   for (var i = 0; i < callbacks.length; i++) {
176 |     callbacks[i].apply(this, args);
177 |   }
178 | };
179 | 
180 | Emitter.prototype.on = function(eventName, callback) {
181 |   if (eventName in this.callbacks) {
182 |     this.callbacks[eventName].push(callback);
183 |   } else {
184 |     this.callbacks[eventName] = [callback];
185 |   }
186 | };
187 | 
188 | module.exports = Emitter;
189 | 
190 | },{}],3:[function(_dereq_,module,exports){
191 | /*
192 |  * Copyright 2015 Google Inc. All Rights Reserved.
193 |  * Licensed under the Apache License, Version 2.0 (the "License");
194 |  * you may not use this file except in compliance with the License.
195 |  * You may obtain a copy of the License at
196 |  *
197 |  *     http://www.apache.org/licenses/LICENSE-2.0
198 |  *
199 |  * Unless required by applicable law or agreed to in writing, software
200 |  * distributed under the License is distributed on an "AS IS" BASIS,
201 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
202 |  * See the License for the specific language governing permissions and
203 |  * limitations under the License.
204 |  */
205 | 
206 | var Modes = {
207 |   UNKNOWN: 0,
208 |   // Not fullscreen, just tracking.
209 |   NORMAL: 1,
210 |   // Magic window immersive mode.
211 |   MAGIC_WINDOW: 2,
212 |   // Full screen split screen VR mode.
213 |   VR: 3,
214 | };
215 | 
216 | module.exports = Modes;
217 | 
218 | },{}],4:[function(_dereq_,module,exports){
219 | /*
220 |  * Copyright 2015 Google Inc. All Rights Reserved.
221 |  * Licensed under the Apache License, Version 2.0 (the "License");
222 |  * you may not use this file except in compliance with the License.
223 |  * You may obtain a copy of the License at
224 |  *
225 |  *     http://www.apache.org/licenses/LICENSE-2.0
226 |  *
227 |  * Unless required by applicable law or agreed to in writing, software
228 |  * distributed under the License is distributed on an "AS IS" BASIS,
229 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
230 |  * See the License for the specific language governing permissions and
231 |  * limitations under the License.
232 |  */
233 | 
234 | var Util = {};
235 | 
236 | Util.base64 = function(mimeType, base64) {
237 |   return 'data:' + mimeType + ';base64,' + base64;
238 | };
239 | 
240 | Util.isMobile = function() {
241 |   var check = false;
242 |   (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
243 |   return check;
244 | };
245 | 
246 | Util.isFirefox = function() {
247 |   return /firefox/i.test(navigator.userAgent);
248 | };
249 | 
250 | Util.isIOS = function() {
251 |   return /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
252 | };
253 | 
254 | Util.isIFrame = function() {
255 |   try {
256 |     return window.self !== window.top;
257 |   } catch (e) {
258 |     return true;
259 |   }
260 | };
261 | 
262 | Util.appendQueryParameter = function(url, key, value) {
263 |   // Determine delimiter based on if the URL already GET parameters in it.
264 |   var delimiter = (url.indexOf('?') < 0 ? '?' : '&');
265 |   url += delimiter + key + '=' + value;
266 |   return url;
267 | };
268 | 
269 | // From http://goo.gl/4WX3tg
270 | Util.getQueryParameter = function(name) {
271 |   var name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
272 |   var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
273 |       results = regex.exec(location.search);
274 |   return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
275 | };
276 | 
277 | Util.isLandscapeMode = function() {
278 |   return (window.orientation == 90 || window.orientation == -90);
279 | };
280 | 
281 | Util.getScreenWidth = function() {
282 |   return Math.max(window.screen.width, window.screen.height) *
283 |       window.devicePixelRatio;
284 | };
285 | 
286 | Util.getScreenHeight = function() {
287 |   return Math.min(window.screen.width, window.screen.height) *
288 |       window.devicePixelRatio;
289 | };
290 | 
291 | module.exports = Util;
292 | 
293 | },{}],5:[function(_dereq_,module,exports){
294 | /*
295 |  * Copyright 2015 Google Inc. All Rights Reserved.
296 |  * Licensed under the Apache License, Version 2.0 (the "License");
297 |  * you may not use this file except in compliance with the License.
298 |  * You may obtain a copy of the License at
299 |  *
300 |  *     http://www.apache.org/licenses/LICENSE-2.0
301 |  *
302 |  * Unless required by applicable law or agreed to in writing, software
303 |  * distributed under the License is distributed on an "AS IS" BASIS,
304 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
305 |  * See the License for the specific language governing permissions and
306 |  * limitations under the License.
307 |  */
308 | 
309 | var ButtonManager = _dereq_('./button-manager.js');
310 | var Emitter = _dereq_('./emitter.js');
311 | var Modes = _dereq_('./modes.js');
312 | var Util = _dereq_('./util.js');
313 | 
314 | /**
315 |  * Helper for getting in and out of VR mode.
316 |  */
317 | function WebVRManager(renderer, effect, params) {
318 |   this.params = params || {};
319 | 
320 |   this.mode = Modes.UNKNOWN;
321 | 
322 |   // Set option to hide the button.
323 |   this.hideButton = this.params.hideButton || false;
324 |   // Whether or not the FOV should be distorted or un-distorted. By default, it
325 |   // should be distorted, but in the case of vertex shader based distortion,
326 |   // ensure that we use undistorted parameters.
327 |   this.predistorted = !!this.params.predistorted;
328 | 
329 |   // Save the THREE.js renderer and effect for later.
330 |   this.renderer = renderer;
331 |   this.effect = effect;
332 |   var polyfillWrapper = document.querySelector('.webvr-polyfill-fullscreen-wrapper');
333 |   this.button = new ButtonManager(polyfillWrapper);
334 | 
335 |   this.isFullscreenDisabled = !!Util.getQueryParameter('no_fullscreen');
336 |   this.startMode = Modes.NORMAL;
337 |   var startModeParam = parseInt(Util.getQueryParameter('start_mode'));
338 |   if (!isNaN(startModeParam)) {
339 |     this.startMode = startModeParam;
340 |   }
341 | 
342 |   if (this.hideButton) {
343 |     this.button.setVisibility(false);
344 |   }
345 | 
346 |   // Check if the browser is compatible with WebVR.
347 |   this.getDeviceByType_(VRDisplay).then(function(hmd) {
348 |     this.hmd = hmd;
349 | 
350 |     // Only enable VR mode if there's a VR device attached or we are running the
351 |     // polyfill on mobile.
352 |     if (!this.isVRCompatibleOverride) {
353 |       this.isVRCompatible =  !hmd.isPolyfilled || Util.isMobile();
354 |     }
355 | 
356 |     switch (this.startMode) {
357 |       case Modes.MAGIC_WINDOW:
358 |         this.setMode_(Modes.MAGIC_WINDOW);
359 |         break;
360 |       case Modes.VR:
361 |         this.enterVRMode_();
362 |         this.setMode_(Modes.VR);
363 |         break;
364 |       default:
365 |         this.setMode_(Modes.NORMAL);
366 |     }
367 | 
368 |     this.emit('initialized');
369 |   }.bind(this));
370 | 
371 |   // Hook up button listeners.
372 |   this.button.on('fs', this.onFSClick_.bind(this));
373 |   this.button.on('vr', this.onVRClick_.bind(this));
374 | 
375 |   // Bind to fullscreen events.
376 |   document.addEventListener('webkitfullscreenchange',
377 |       this.onFullscreenChange_.bind(this));
378 |   document.addEventListener('mozfullscreenchange',
379 |       this.onFullscreenChange_.bind(this));
380 |   document.addEventListener('msfullscreenchange',
381 |       this.onFullscreenChange_.bind(this));
382 | 
383 |   // Bind to VR* specific events.
384 |   window.addEventListener('vrdisplaypresentchange',
385 |       this.onVRDisplayPresentChange_.bind(this));
386 |   window.addEventListener('vrdisplaydeviceparamschange',
387 |       this.onVRDisplayDeviceParamsChange_.bind(this));
388 | }
389 | 
390 | WebVRManager.prototype = new Emitter();
391 | 
392 | // Expose these values externally.
393 | WebVRManager.Modes = Modes;
394 | 
395 | WebVRManager.prototype.render = function(scene, camera, timestamp) {
396 |   // Scene may be an array of two scenes, one for each eye.
397 |   if (scene instanceof Array) {
398 |     this.effect.render(scene[0], camera);
399 |   } else {
400 |     this.effect.render(scene, camera);
401 |   }
402 | };
403 | 
404 | WebVRManager.prototype.setVRCompatibleOverride = function(isVRCompatible) {
405 |   this.isVRCompatible = isVRCompatible;
406 |   this.isVRCompatibleOverride = true;
407 | 
408 |   // Don't actually change modes, just update the buttons.
409 |   this.button.setMode(this.mode, this.isVRCompatible);
410 | };
411 | 
412 | WebVRManager.prototype.setFullscreenCallback = function(callback) {
413 |   this.fullscreenCallback = callback;
414 | };
415 | 
416 | WebVRManager.prototype.setVRCallback = function(callback) {
417 |   this.vrCallback = callback;
418 | };
419 | 
420 | WebVRManager.prototype.setExitFullscreenCallback = function(callback) {
421 |   this.exitFullscreenCallback = callback;
422 | }
423 | 
424 | /**
425 |  * Promise returns true if there is at least one HMD device available.
426 |  */
427 | WebVRManager.prototype.getDeviceByType_ = function(type) {
428 |   return new Promise(function(resolve, reject) {
429 |     navigator.getVRDisplays().then(function(displays) {
430 |       // Promise succeeds, but check if there are any displays actually.
431 |       for (var i = 0; i < displays.length; i++) {
432 |         if (displays[i] instanceof type) {
433 |           resolve(displays[i]);
434 |           break;
435 |         }
436 |       }
437 |       resolve(null);
438 |     }, function() {
439 |       // No displays are found.
440 |       resolve(null);
441 |     });
442 |   });
443 | };
444 | 
445 | /**
446 |  * Helper for entering VR mode.
447 |  */
448 | WebVRManager.prototype.enterVRMode_ = function() {
449 |   this.hmd.requestPresent([{
450 |     source: this.renderer.domElement,
451 |     predistorted: this.predistorted
452 |   }]);
453 | };
454 | 
455 | WebVRManager.prototype.setMode_ = function(mode) {
456 |   var oldMode = this.mode;
457 |   if (mode == this.mode) {
458 |     console.warn('Not changing modes, already in %s', mode);
459 |     return;
460 |   }
461 |   // console.log('Mode change: %s => %s', this.mode, mode);
462 |   this.mode = mode;
463 |   this.button.setMode(mode, this.isVRCompatible);
464 | 
465 |   // Emit an event indicating the mode changed.
466 |   this.emit('modechange', mode, oldMode);
467 | };
468 | 
469 | /**
470 |  * Main button was clicked.
471 |  */
472 | WebVRManager.prototype.onFSClick_ = function() {
473 |   switch (this.mode) {
474 |     case Modes.NORMAL:
475 |       // TODO: Remove this hack if/when iOS gets real fullscreen mode.
476 |       // If this is an iframe on iOS, break out and open in no_fullscreen mode.
477 |       if (Util.isIOS() && Util.isIFrame()) {
478 |         if (this.fullscreenCallback) {
479 |           this.fullscreenCallback();
480 |         } else {
481 |           var url = window.location.href;
482 |           url = Util.appendQueryParameter(url, 'no_fullscreen', 'true');
483 |           url = Util.appendQueryParameter(url, 'start_mode', Modes.MAGIC_WINDOW);
484 |           top.location.href = url;
485 |           return;
486 |         }
487 |       }
488 |       this.setMode_(Modes.MAGIC_WINDOW);
489 |       this.requestFullscreen_();
490 |       break;
491 |     case Modes.MAGIC_WINDOW:
492 |       if (this.isFullscreenDisabled) {
493 |         window.history.back();
494 |         return;
495 |       }
496 |       if (this.exitFullscreenCallback) {
497 |         this.exitFullscreenCallback();
498 |       }
499 |       this.setMode_(Modes.NORMAL);
500 |       this.exitFullscreen_();
501 |       break;
502 |   }
503 | };
504 | 
505 | /**
506 |  * The VR button was clicked.
507 |  */
508 | WebVRManager.prototype.onVRClick_ = function() {
509 |   // TODO: Remove this hack when iOS has fullscreen mode.
510 |   // If this is an iframe on iOS, break out and open in no_fullscreen mode.
511 |   if (this.mode == Modes.NORMAL && Util.isIOS() && Util.isIFrame()) {
512 |     if (this.vrCallback) {
513 |       this.vrCallback();
514 |     } else {
515 |       var url = window.location.href;
516 |       url = Util.appendQueryParameter(url, 'no_fullscreen', 'true');
517 |       url = Util.appendQueryParameter(url, 'start_mode', Modes.VR);
518 |       top.location.href = url;
519 |       return;
520 |     }
521 |   }
522 |   this.enterVRMode_();
523 | };
524 | 
525 | WebVRManager.prototype.requestFullscreen_ = function() {
526 |   var canvas = document.body;
527 |   //var canvas = this.renderer.domElement;
528 |   if (canvas.requestFullscreen) {
529 |     canvas.requestFullscreen();
530 |   } else if (canvas.mozRequestFullScreen) {
531 |     canvas.mozRequestFullScreen();
532 |   } else if (canvas.webkitRequestFullscreen) {
533 |     canvas.webkitRequestFullscreen();
534 |   } else if (canvas.msRequestFullscreen) {
535 |     canvas.msRequestFullscreen();
536 |   }
537 | };
538 | 
539 | WebVRManager.prototype.exitFullscreen_ = function() {
540 |   if (document.exitFullscreen) {
541 |     document.exitFullscreen();
542 |   } else if (document.mozCancelFullScreen) {
543 |     document.mozCancelFullScreen();
544 |   } else if (document.webkitExitFullscreen) {
545 |     document.webkitExitFullscreen();
546 |   } else if (document.msExitFullscreen) {
547 |     document.msExitFullscreen();
548 |   }
549 | };
550 | 
551 | WebVRManager.prototype.onVRDisplayPresentChange_ = function(e) {
552 |   console.log('onVRDisplayPresentChange_', e);
553 |   if (this.hmd.isPresenting) {
554 |     this.setMode_(Modes.VR);
555 |   } else {
556 |     this.setMode_(Modes.NORMAL);
557 |   }
558 | };
559 | 
560 | WebVRManager.prototype.onVRDisplayDeviceParamsChange_ = function(e) {
561 |   console.log('onVRDisplayDeviceParamsChange_', e);
562 | };
563 | 
564 | WebVRManager.prototype.onFullscreenChange_ = function(e) {
565 |   // If we leave full-screen, go back to normal mode.
566 |   if (document.webkitFullscreenElement === null ||
567 |       document.mozFullScreenElement === null) {
568 |     this.setMode_(Modes.NORMAL);
569 |   }
570 | };
571 | 
572 | module.exports = WebVRManager;
573 | 
574 | },{"./button-manager.js":1,"./emitter.js":2,"./modes.js":3,"./util.js":4}]},{},[5])(5)
575 | });


--------------------------------------------------------------------------------
/examples/proximity.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <title>Reticulum | Proximity Example</title>
  5 | <meta charset="utf-8">
  6 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | <meta name="mobile-web-app-capable" content="yes">
  8 | <meta name="apple-mobile-web-app-capable" content="yes" />
  9 | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 10 | <style type="text/css">
 11 | 	html, body {
 12 | 		background-color: #000;
 13 | 		margin: 0;
 14 | 		padding: 0; 
 15 | 		overflow: hidden;
 16 | 	}
 17 | </style>
 18 | </head>
 19 | 
 20 | <body>
 21 | 
 22 | <script>
 23 | /*
 24 |  * Debug parameters.
 25 |  */
 26 | WebVRConfig = {
 27 |   /**
 28 |    * webvr-polyfill configuration
 29 |    */
 30 |   // Forces availability of VR mode.
 31 |   //FORCE_ENABLE_VR: true, // Default: false.
 32 |   
 33 |   // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
 34 |   //K_FILTER: 0.98, // Default: 0.98.
 35 |   
 36 |   // How far into the future to predict during fast motion.
 37 |   //PREDICTION_TIME_S: 0.040, // Default: 0.040 (in seconds).
 38 |   
 39 |   // Flag to disable touch panner. In case you have your own touch controls
 40 |   //TOUCH_PANNER_DISABLED: true, // Default: false.
 41 |   
 42 |   // Enable yaw panning only, disabling roll and pitch. This can be useful for
 43 |   // panoramas with nothing interesting above or below.
 44 |   //YAW_ONLY: true, // Default: false.
 45 | 
 46 |   // Enable the deprecated version of the API (navigator.getVRDevices).
 47 |   //ENABLE_DEPRECATED_API: true, // Default: false.
 48 |   
 49 |   // Scales the recommended buffer size reported by WebVR, which can improve
 50 |   // performance. Making this very small can lower the effective resolution of
 51 |   // your scene.
 52 |   BUFFER_SCALE: 0.5, // default: 1.0
 53 |   
 54 |   // Allow VRDisplay.submitFrame to change gl bindings, which is more
 55 |   // efficient if the application code will re-bind it's resources on the
 56 |   // next frame anyway.
 57 |   // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
 58 |   // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
 59 |   // and gl.TEXTURE_BINDING_2D for texture unit 0
 60 |   // Warning: enabling this might lead to rendering issues.
 61 |   //DIRTY_SUBMIT_FRAME_BINDINGS: true // default: false
 62 | };
 63 | </script>
 64 | 
 65 | <!-- THREE library, controls and effects -->
 66 | <script src="./js/lib/three.js"></script>
 67 | <script src="./js/lib/VRControls.js"></script>
 68 | <script src="./js/lib/VREffect.js"></script>
 69 | <!-- WebVR polyfill and manager -->
 70 | <script src="./js/lib/webvr-polyfill.js"></script>
 71 | <script src="./js/lib/webvr-manager.js"></script>
 72 | <!-- A simple gaze interaction manager for VR -->
 73 | <script src="../reticulum.js"></script>
 74 | 
 75 | 
 76 | 
 77 | <script>
 78 | // Setup three.js WebGL renderer
 79 | var renderer = new THREE.WebGLRenderer( { antialias: true } );
 80 | renderer.setPixelRatio( window.devicePixelRatio );
 81 | // Append the canvas element created by the renderer to document body element.
 82 | document.body.appendChild( renderer.domElement );
 83 | 
 84 | //Create a three.js scene
 85 | var scene = new THREE.Scene();
 86 | 
 87 | //Create a three.js camera
 88 | var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.3, 10000);
 89 | //Apply VR headset positional data to camera.
 90 | var controls = new THREE.VRControls( camera );
 91 | controls.standing = true;
 92 | 
 93 | //Apply VR stereo rendering to renderer
 94 | var effect = new THREE.VREffect( renderer );
 95 | effect.setSize( window.innerWidth, window.innerHeight );
 96 | 
 97 | // Create a VR manager helper to enter and exit VR mode.
 98 | var manager = new WebVRManager( renderer, effect, {hideButton: false} );
 99 | 
100 | 
101 | 
102 | var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
103 | hemiLight.position.set(0, 500, 0);
104 | scene.add(hemiLight);
105 | var boxGeometry = new THREE.BoxGeometry( 20, 20, 20 );
106 | 
107 | //Boxes, Planes and spheres
108 | for ( var i = 0; i < 5; i ++ ) {
109 | 	addMesh(boxGeometry);
110 | }
111 | 
112 | 
113 | 
114 | function addMesh(geo) {
115 | 
116 | 	var object = new THREE.Mesh( geo, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
117 | 
118 | 	object.position.x = Math.random() * 1200 - 400;
119 | 	object.position.y = Math.random() * 1200 - 400;
120 | 	object.position.z = Math.random() * 1200 - 400;
121 | 
122 | 	//object.rotation.y = Math.random() * 360;
123 | 
124 | 	
125 | 	// *******************************
126 | 	// --- Reticulum ---
127 | 	// have the object react when user looks at it
128 | 	// track the object
129 | 	Reticulum.add( object, {
130 | 		onGazeOver: function(){
131 | 			// do something when user targets object
132 | 			this.material.emissive.setHex( 0xffcc00 );
133 | 		},
134 | 		onGazeOut: function(){
135 | 			// do something when user moves reticle off targeted object
136 | 			this.material.emissive.setHex( 0xcc0000 );
137 | 		},
138 | 		onGazeLong: function(){
139 | 			// do something user targetes object for specific time
140 | 			this.material.emissive.setHex( 0x0000cc );
141 | 		},
142 | 		onGazeClick: function(){
143 | 			// have the object react when user clicks / taps on targeted object
144 | 			this.material.emissive.setHex( 0x00cccc * Math.random() );
145 | 		}
146 | 	});
147 | 
148 | 	scene.add( object );
149 | 
150 | }
151 | 
152 | 
153 | // *******************************
154 | // --- Reticulum ---
155 | // initiate Reticulum so it loads up 
156 | Reticulum.init(camera, {
157 | 	proximity: true,
158 | 	clickevents: true,
159 | 	reticle: {
160 | 		visible: true,
161 | 		restPoint: 1000, //Defines the reticle's resting point when no object has been targeted
162 | 		color: 0xcc0000,
163 | 		innerRadius: 0.0004,
164 | 		outerRadius: 0.003,
165 | 		hover: {
166 | 			color: 0xcc0000,
167 | 			innerRadius: 0.02,
168 | 			outerRadius: 0.024,
169 | 			speed: 5,
170 | 			vibrate: 50 //Set to 0 or [] to disable
171 | 		}
172 | 	},
173 | 	fuse: {
174 | 		visible: true,
175 | 		duration: 2.5,
176 | 		color: 0x00fff6,
177 | 		innerRadius: 0.045,
178 | 		outerRadius: 0.06,
179 | 		vibrate: 100, //Set to 0 or [] to disable
180 | 		clickCancelFuse: false //If users clicks on targeted object fuse is canceled
181 | 	}
182 | });
183 | 
184 | // IMPORTANT add camera to cene if you want to see a reticle 
185 | scene.add(camera);
186 | 
187 | 
188 | 
189 | 
190 | 
191 | 
192 | function animate(timestamp) {
193 | 	
194 | 
195 | 	// *******************************
196 | 	// --- Reticulum ---
197 | 	// keep checking if user is looking at any tracked objects
198 | 	Reticulum.update();
199 | 
200 | 	controls.update();
201 | 	camera.updateMatrixWorld(); // Required to stop ghosting - must be placed before render update
202 | 	manager.render(scene, camera, timestamp);
203 | 
204 | 
205 | 	requestAnimationFrame(animate);
206 | 	
207 | }
208 | animate();
209 | 
210 | 
211 | 
212 | 
213 | /*
214 | Handle window resizes
215 | */
216 | function onWindowResize() {
217 |   camera.aspect = window.innerWidth / window.innerHeight;
218 |   camera.updateProjectionMatrix();
219 |   effect.setSize( window.innerWidth, window.innerHeight );
220 | }
221 | window.addEventListener( 'resize', onWindowResize, false );
222 | window.addEventListener( 'vrdisplaypresentchange', onWindowResize, true );
223 | </script>
224 | </body>
225 | </html>


--------------------------------------------------------------------------------
/examples/visibility.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <title>Reticulum | Basic VR Example</title>
  5 | <meta charset="utf-8">
  6 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | <meta name="mobile-web-app-capable" content="yes">
  8 | <meta name="apple-mobile-web-app-capable" content="yes" />
  9 | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 10 | <style type="text/css">
 11 | 	html, body {
 12 | 		background-color: #000;
 13 | 		margin: 0;
 14 | 		padding: 0; 
 15 | 		overflow: hidden;
 16 | 	}
 17 | </style>
 18 | </head>
 19 | 
 20 | <body>
 21 | 
 22 | <script>
 23 | /*
 24 |  * Debug parameters.
 25 |  */
 26 | WebVRConfig = {
 27 |   /**
 28 |    * webvr-polyfill configuration
 29 |    */
 30 |   // Forces availability of VR mode.
 31 |   //FORCE_ENABLE_VR: true, // Default: false.
 32 |   
 33 |   // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
 34 |   //K_FILTER: 0.98, // Default: 0.98.
 35 |   
 36 |   // How far into the future to predict during fast motion.
 37 |   //PREDICTION_TIME_S: 0.040, // Default: 0.040 (in seconds).
 38 |   
 39 |   // Flag to disable touch panner. In case you have your own touch controls
 40 |   //TOUCH_PANNER_DISABLED: true, // Default: false.
 41 |   
 42 |   // Enable yaw panning only, disabling roll and pitch. This can be useful for
 43 |   // panoramas with nothing interesting above or below.
 44 |   //YAW_ONLY: true, // Default: false.
 45 | 
 46 |   // Enable the deprecated version of the API (navigator.getVRDevices).
 47 |   //ENABLE_DEPRECATED_API: true, // Default: false.
 48 |   
 49 |   // Scales the recommended buffer size reported by WebVR, which can improve
 50 |   // performance. Making this very small can lower the effective resolution of
 51 |   // your scene.
 52 |   BUFFER_SCALE: 0.5, // default: 1.0
 53 |   
 54 |   // Allow VRDisplay.submitFrame to change gl bindings, which is more
 55 |   // efficient if the application code will re-bind it's resources on the
 56 |   // next frame anyway.
 57 |   // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
 58 |   // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
 59 |   // and gl.TEXTURE_BINDING_2D for texture unit 0
 60 |   // Warning: enabling this might lead to rendering issues.
 61 |   //DIRTY_SUBMIT_FRAME_BINDINGS: true // default: false
 62 | };
 63 | </script>
 64 | 
 65 | <!-- THREE library, controls and effects -->
 66 | <script src="./js/lib/three.js"></script>
 67 | <script src="./js/lib/VRControls.js"></script>
 68 | <script src="./js/lib/VREffect.js"></script>
 69 | <!-- WebVR polyfill and manager -->
 70 | <script src="./js/lib/webvr-polyfill.js"></script>
 71 | <script src="./js/lib/webvr-manager.js"></script>
 72 | <!-- A simple gaze interaction manager for VR -->
 73 | <script src="../reticulum.js"></script>
 74 | 
 75 | 
 76 | 
 77 | <script>
 78 | // Setup three.js WebGL renderer
 79 | var renderer = new THREE.WebGLRenderer( { antialias: true } );
 80 | renderer.setPixelRatio( window.devicePixelRatio );
 81 | // Append the canvas element created by the renderer to document body element.
 82 | document.body.appendChild( renderer.domElement );
 83 | 
 84 | //Create a three.js scene
 85 | var scene = new THREE.Scene();
 86 | 
 87 | //Create a three.js camera
 88 | var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.3, 10000);
 89 | //Apply VR headset positional data to camera.
 90 | var controls = new THREE.VRControls( camera );
 91 | controls.standing = true;
 92 | 
 93 | //Apply VR stereo rendering to renderer
 94 | var effect = new THREE.VREffect( renderer );
 95 | effect.setSize( window.innerWidth, window.innerHeight );
 96 | 
 97 | // Create a VR manager helper to enter and exit VR mode.
 98 | var manager = new WebVRManager( renderer, effect, {hideButton: false} );
 99 | 
100 | 
101 | // *******************************
102 | // --- Reticulum ---
103 | // initiate Reticulum so it loads up 
104 | Reticulum.init(camera, {
105 | 	proximity: false,
106 | 	clickevents: true,
107 | 	reticle: {
108 | 		visible: true,
109 | 		restPoint: 1000, //Defines the reticle's resting point when no object has been targeted
110 | 		color: 0xcc0000,
111 | 		innerRadius: 0.0004,
112 | 		outerRadius: 0.003,
113 | 		hover: {
114 | 			color: 0xcc0000,
115 | 			innerRadius: 0.02,
116 | 			outerRadius: 0.024,
117 | 			speed: 5,
118 | 			vibrate: 50 //Set to 0 or [] to disable
119 | 		}
120 | 	},
121 | 	fuse: {
122 | 		visible: false,
123 | 		duration: 2.5,
124 | 		color: 0x00fff6,
125 | 		innerRadius: 0.045,
126 | 		outerRadius: 0.06,
127 | 		vibrate: 0, //Set to 0 or [] to disable
128 | 		clickCancelFuse: false //If users clicks on targeted object fuse is canceled
129 | 	}
130 | });
131 | 
132 | // IMPORTANT add camera to cene if you want to see a reticle 
133 | scene.add(camera);
134 | 
135 | 
136 | var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
137 | hemiLight.position.set(0, 500, 0);
138 | scene.add(hemiLight);
139 | var boxGeometry = new THREE.BoxGeometry( 1, 1, 1 );
140 | var planeGeometry = new THREE.PlaneGeometry( 1, 1 );
141 | var sphereGeometry = new THREE.SphereGeometry( 2, 1, 1 );
142 | 
143 | var frontColor = Math.random() * 0xffffff;
144 | var behindColor = Math.random() * 0xffffff;
145 | 
146 | //Front 
147 | var front = new THREE.Mesh( boxGeometry, new THREE.MeshLambertMaterial( { color: frontColor } ) );
148 | front.position.set( 0.5, 0, -5 );
149 | front.visible = false;
150 | Reticulum.add( front, {
151 | 	onGazeOver: function(){
152 | 		// do something when user targets object
153 | 		this.material.emissive.setHex( 0xffcc00 );
154 | 	},
155 | 	onGazeOut: function(){
156 | 		// do something when user moves reticle off targeted object
157 | 		this.material.emissive.setHex( frontColor );
158 | 	}
159 | });
160 | scene.add( front );
161 | //Toggle Visiblity of Front Cube
162 | window.setInterval( function(){ front.visible = !front.visible }, 3000 )
163 | 
164 | //Behind - Visible
165 | var behind = new THREE.Mesh( boxGeometry, new THREE.MeshLambertMaterial( { color: behindColor } ) );
166 | behind.position.set( 0, 0, -10 );
167 | behind.visible = true;
168 | Reticulum.add( behind, {
169 | 	onGazeOver: function(){
170 | 		// do something when user targets object
171 | 		this.material.emissive.setHex( 0xffcc00 );
172 | 	},
173 | 	onGazeOut: function(){
174 | 		// do something when user moves reticle off targeted object
175 | 		this.material.emissive.setHex( behindColor );
176 | 	}
177 | });
178 | 
179 | scene.add( behind );
180 | 
181 | 
182 | 
183 | 
184 | 
185 | 
186 | 
187 | function animate(timestamp) {
188 | 
189 | 
190 | 	// *******************************
191 | 	// --- Reticulum ---
192 | 	// keep checking if user is looking at any tracked objects
193 | 	Reticulum.update();
194 | 	
195 | 	controls.update();
196 | 	camera.updateMatrixWorld(); // Required to stop ghosting - must be placed before render update
197 | 	manager.render(scene, camera, timestamp);
198 | 
199 | 	requestAnimationFrame(animate);
200 | 	
201 | }
202 | animate();
203 | 
204 | 
205 | 
206 | /*
207 | Handle window resizes
208 | */
209 | function onWindowResize() {
210 |   camera.aspect = window.innerWidth / window.innerHeight;
211 |   camera.updateProjectionMatrix();
212 |   effect.setSize( window.innerWidth, window.innerHeight );
213 | }
214 | window.addEventListener( 'resize', onWindowResize, false );
215 | window.addEventListener( 'vrdisplaypresentchange', onWindowResize, true );
216 | </script>
217 | </body>
218 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <title>VR Reticulum | A cursor for your vr environment</title>
 5 | <meta charset="utf-8">
 6 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 7 | <meta name="mobile-web-app-capable" content="yes">
 8 | <meta name="apple-mobile-web-app-capable" content="yes" />
 9 | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
10 | <style type="text/css">
11 | 	html, body {
12 | 		background-color: #fefefe;
13 | 		margin: 0;
14 | 		padding: 0; 
15 | 		overflow: hidden;
16 | 	}
17 | </style>
18 | </head>
19 | 
20 | <body>
21 | 
22 | <h1>VR Reticulum</h1>
23 | <p>VR Reticulum attempts to follow Google's interactive pattern for the <a href="http://www.google.com/design/spec-vr/interactive-patterns/display-reticle.html">display reticle</a>. It creates the illusion of depth by projecting spatially onto targeted objects while maintaining a fixed size so that it is easy to see at all times.</p>
24 | <ul>
25 | 	<li><a href="https://github.com/skezo/Reticulum">Github</a></li>
26 | </ul>
27 | 
28 | <h2>Examples</h2>
29 | <ul>
30 | 	<li><a href="./examples/basic.html">Basic</a></li>
31 | 	<li><a href="./examples/proximity.html">Proximity - only display reticle if targeted object is visible</a></li>
32 | 	<li><a href="./examples/depth.html">Depth - hit moving targets </a></li>
33 | 	<li><a href="./examples/groups.html">Objects in Groups - hit object in group, get world values</a></li>
34 | 	<li><a href="./examples/fuse.html">Fuse - custom fuse</a></li>
35 | 	<li><a href="./examples/visibility.html">Visibility - test for hitting only visible objects</a></li>
36 | 	<li><a href="./examples/gazeable.html">Gazeable - test for hitting only gazeable objects</a></li>
37 | </ul>
38 | 
39 | 
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reticulum",
 3 |   "title": "Reticulum",
 4 |   "description": "A gaze interaction manager for VR with three.js, supporting depth.",
 5 |   "version": "1.0.0",
 6 |   "homepage": "https://github.com/skezo/Reticulum",
 7 |   "license": "MIT",
 8 |   "keywords": [
 9 |     "vr",
10 |     "reticle",
11 |     "gaze",
12 |     "cardboard"
13 |   ],
14 |   "author": {
15 |     "name": "Skezo",
16 |     "email": "admin@gqpbj.com"
17 |   },
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "git://github.com/GQPBJ/Reticulum.git"
21 |   },
22 |   "bugs": {
23 |     "url": "https://github.com/skezo/Reticulum/issues"
24 |   },
25 |   "dependencies": {},
26 |   "devDependencies": {},
27 |   "main": "reticulum.js",
28 |   "engines": {
29 |     "node": ">=0.8.0"
30 |   },
31 |   "scripts": {}
32 | }
33 | 


--------------------------------------------------------------------------------
/reticulum.js:
--------------------------------------------------------------------------------
  1 | /*! Reticulum - v2.1.2
  2 |  * http://skezo.github.io/examples/basic.html
  3 |  *
  4 |  * Copyright (c) 2015 Skezo;
  5 |  * Licensed under the MIT license */
  6 | 
  7 | var Reticulum = (function () {
  8 |     var INTERSECTED = null;
  9 | 
 10 |     var collisionList = [];
 11 |     var raycaster;
 12 |     var vector;
 13 |     var clock;
 14 |     var reticle = {};
 15 |     var fuse = {};
 16 | 
 17 |     var frustum;
 18 |     var cameraViewProjectionMatrix;
 19 | 
 20 |     var parentContainer
 21 | 
 22 |     //Settings from user
 23 |     var settings = {
 24 |         camera:             null, //Required
 25 |         proximity:          false,
 26 |         isClickEnabled:     true,
 27 |         lockDistance:       false
 28 |     };
 29 | 
 30 |     //Utilities
 31 |     var utilities = {
 32 |         clampBottom: function ( x, a ) {
 33 |             return x < a ? a : x;
 34 |         }
 35 |     }
 36 | 
 37 |     //Vibrate
 38 |     var vibrate = navigator.vibrate ? navigator.vibrate.bind(navigator) : function(){};
 39 | 
 40 |     //Fuse
 41 |     fuse.initiate = function( options ) {
 42 |         var parameters = options || {};
 43 | 
 44 |         this.visible        = parameters.visible            !== false; //default to true;
 45 |         this.globalDuration = parameters.duration           ||  2.5;
 46 |         this.vibratePattern = parameters.vibrate            ||  100;
 47 |         this.color          = parameters.color              ||  0x00fff6;
 48 |         this.innerRadius    = parameters.innerRadius        ||  reticle.innerRadiusTo;
 49 |         this.outerRadius    = parameters.outerRadius        ||  reticle.outerRadiusTo;
 50 |         this.clickCancel    = parameters.clickCancelFuse    === undefined ? false : parameters.clickCancelFuse; //default to false;
 51 |         this.phiSegments    = 3;
 52 |         this.thetaSegments  = 32;
 53 |         this.thetaStart     = Math.PI/2;
 54 |         this.duration       = this.globalDuration;
 55 |         this.timeDone   = false;
 56 |         //var geometry = new THREE.CircleGeometry( reticle.outerRadiusTo, 32, Math.PI/2, 0 );
 57 |         var geometry = new THREE.RingGeometry( this.innerRadius, this.outerRadius, this.thetaSegments, this.phiSegments, this.thetaStart, Math.PI/2 );
 58 | 
 59 |         //Make Mesh
 60 |         this.mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( {
 61 |             color: this.color,
 62 |             side: THREE.BackSide,
 63 |             fog: false
 64 |             //depthWrite: false,
 65 |             //depthTest: false
 66 |         }));
 67 | 
 68 |         //Set mesh visibility
 69 |         this.mesh.visible = this.visible;
 70 | 
 71 |         //Change position and rotation of fuse
 72 |         this.mesh.position.z = 0.0001; // Keep in front of reticle
 73 |         this.mesh.rotation.y = 180*(Math.PI/180); //Make it clockwise
 74 | 
 75 |         //Add to reticle
 76 |         //reticle.mesh.add( this.mesh );
 77 |         parentContainer.add( this.mesh );
 78 |         //geometry.dispose();
 79 |     };
 80 | 
 81 |     fuse.out = function() {
 82 |         this.active = false;
 83 |         this.mesh.visible = false;
 84 |         this.timeDone = false;
 85 |         this.update(0);
 86 |     }
 87 | 
 88 |     fuse.over = function(duration, visible) {
 89 |         this.duration = duration || this.globalDuration;
 90 |         this.active = true;
 91 |         this.update(0);
 92 |         this.mesh.visible = visible || this.visible;
 93 |     }
 94 | 
 95 |     fuse.update = function(elapsed) {
 96 | 
 97 |         if(!this.active || fuse.timeDone) return;
 98 | 
 99 |         //--RING
100 |         var gazedTime = elapsed/this.duration;
101 |         var thetaLength = gazedTime * (Math.PI*2);
102 | 
103 |         var vertices = this.mesh.geometry.vertices;
104 |         var radius = this.innerRadius;
105 |         var radiusStep = ( ( this.outerRadius - this.innerRadius ) / this.phiSegments );
106 |         var count = 0;
107 | 
108 |         for ( var i = 0; i <= this.phiSegments; i ++ ) {
109 | 
110 |             for ( var o = 0; o <= this.thetaSegments; o++ ) {
111 |                 var vertex = vertices[ count ];
112 |                 var segment = this.thetaStart + o / this.thetaSegments * thetaLength;
113 |                 vertex.x = radius * Math.cos( segment );
114 |                 vertex.y = radius * Math.sin( segment );
115 |                 count++;
116 |             }
117 |             radius += radiusStep;
118 |         }
119 | 
120 |         this.mesh.geometry.verticesNeedUpdate = true;
121 | 
122 |         //Disable fuse if reached 100%
123 |         if(gazedTime >= 1) {
124 |             this.active = false;
125 |         }
126 |         //--RING EOF
127 | 
128 | 
129 |     }
130 | 
131 |     //Reticle
132 |     reticle.initiate = function( options ) {
133 |         var parameters = options || {};
134 | 
135 |         parameters.hover = parameters.hover || {};
136 |         parameters.click = parameters.click || {};
137 | 
138 |         this.active             = true;
139 |         this.visible            = parameters.visible            !== false; //default to true;
140 |         this.restPoint          = parameters.restPoint          || settings.camera.far-10.0;
141 |         this.globalColor        = parameters.color              || 0xcc0000;
142 |         this.innerRadius        = parameters.innerRadius        || 0.0004;
143 |         this.outerRadius        = parameters.outerRadius        || 0.003;
144 |         this.worldPosition      = new THREE.Vector3();
145 |         this.ignoreInvisible    = parameters.ignoreInvisible    !== false; //default to true;
146 | 
147 |         //Hover
148 |         this.innerRadiusTo      = parameters.hover.innerRadius  || 0.02;
149 |         this.outerRadiusTo      = parameters.hover.outerRadius  || 0.024;
150 |         this.globalColorTo      = parameters.hover.color        || this.color;
151 |         this.vibrateHover       = parameters.hover.vibrate      || 50;
152 |         this.hit                = false;
153 |         //Click
154 |         this.vibrateClick       = parameters.click.vibrate      || 50;
155 |         //Animation options
156 |         this.speed              = parameters.hover.speed        || 5;
157 |         this.moveSpeed          = 0;
158 | 
159 |         //Colors
160 |         this.globalColor = new THREE.Color( this.globalColor );
161 |         this.color = this.globalColor.clone();
162 |         this.globalColorTo = new THREE.Color( this.globalColorTo );
163 |         this.colorTo = this.globalColorTo.clone();
164 | 
165 |         //Geometry
166 |         var geometry = new THREE.RingGeometry( this.innerRadius, this.outerRadius, 32, 3, 0, Math.PI * 2 );
167 |         var geometryScale = new THREE.RingGeometry( this.innerRadiusTo, this.outerRadiusTo, 32, 3, 0, Math.PI * 2 );
168 | 
169 |         //Add Morph Targets for scale animation
170 |         geometry.morphTargets.push( { name: "target1", vertices: geometryScale.vertices } );
171 | 
172 |         //Make Mesh
173 |         this.mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( {
174 |             color: this.color,
175 |             morphTargets: true,
176 |             fog: false
177 |             //depthWrite: false,
178 |             //depthTest: false
179 |         }));
180 |         this.mesh.visible = this.visible;
181 | 
182 |         //set depth and scale
183 |         this.setDepthAndScale();
184 | 
185 |         //Add to camera
186 |         //settings.camera.add( this.mesh );
187 |         parentContainer.add( this.mesh );
188 | 
189 |     };
190 | 
191 |     //Sets the depth and scale of the reticle - reduces eyestrain and depth issues 
192 |     reticle.setDepthAndScale = function( depth ) {
193 |         //var crosshair = this.mesh;
194 |         var crosshair = parentContainer;
195 |         var z = Math.abs( depth || this.restPoint ); //Default to user far setting
196 |         var cameraZ =  settings.camera.position.z;
197 |         //Force reticle to appear the same size - scale
198 |         //http://answers.unity3d.com/questions/419342/make-gameobject-size-always-be-the-same.html
199 |         var scale = Math.abs( cameraZ - z ) - Math.abs( cameraZ );
200 | 
201 |         //Set Depth
202 |         crosshair.position.x = 0;
203 |         crosshair.position.y = 0;
204 |         crosshair.position.z = utilities.clampBottom( z, settings.camera.near+0.1 ) * -1;
205 | 
206 |         //Set Scale
207 |         crosshair.scale.set( scale, scale, scale );
208 |     };
209 | 
210 |     reticle.update = function(delta) {
211 |         //If not active
212 |         if(!this.active) return;
213 | 
214 |         var accel = delta * this.speed;
215 | 
216 |         if( this.hit ) {
217 |             this.moveSpeed += accel;
218 |             this.moveSpeed = Math.min(this.moveSpeed, 1);
219 |         } else {
220 |             this.moveSpeed -= accel;
221 |             this.moveSpeed = Math.max(this.moveSpeed, 0);
222 |         }
223 |         //Morph
224 |         this.mesh.morphTargetInfluences[ 0 ] = this.moveSpeed;
225 |         //Set Color
226 |         this.color = this.globalColor.clone();
227 |         //console.log( this.color.lerp( this.colorTo, this.moveSpeed ) )
228 |         this.mesh.material.color = this.color.lerp( this.colorTo, this.moveSpeed );
229 |     };
230 | 
231 |     var initiate = function (camera, options) {
232 |         //Update Settings:
233 |         options = options || {};
234 | 
235 |         settings.camera = camera; //required
236 |         settings.proximity = options.proximity || settings.proximity;
237 |         settings.lockDistance = options.lockDistance || settings.lockDistance;
238 |         settings.isClickEnabled = options.clickevents || settings.isClickEnabled;
239 |         options.reticle = options.reticle || {};
240 |         options.fuse = options.fuse || {};
241 | 
242 |         //Raycaster Setup
243 |         raycaster = new THREE.Raycaster();
244 |         vector = new THREE.Vector2(0, 0);
245 |         //Update Raycaster 
246 |         if(options.near && options.near >= 0 ) {
247 |             raycaster.near = options.near;
248 |         }
249 |         if(options.far && options.far >= 0 ) {
250 |             raycaster.far = options.far;
251 |         }
252 | 
253 |         //Create Parent Object for reticle and fuse
254 |         parentContainer = new THREE.Object3D();
255 |         settings.camera.add( parentContainer );
256 | 
257 |         //Proximity Setup
258 |         if( settings.proximity ) {
259 |             frustum = new THREE.Frustum();
260 |             cameraViewProjectionMatrix = new THREE.Matrix4();
261 |         }
262 | 
263 |         //Enable Click / Tap Events
264 |         if( settings.isClickEnabled ) {
265 |             document.body.addEventListener('touchend', touchClickHandler, false);
266 |             document.body.addEventListener('click', touchClickHandler, false);
267 |         }
268 | 
269 |         //Clock Setup
270 |         clock = new THREE.Clock(true);
271 | 
272 |         //Initiate Reticle
273 |         reticle.initiate(options.reticle);
274 | 
275 |         //Initiate Fuse
276 |         fuse.initiate(options.fuse);
277 |     };
278 | 
279 |     var proximity = function() {
280 |         var camera = settings.camera;
281 |         var showReticle = false;
282 | 
283 |         //Use frustum to see if any targetable object is visible
284 |         //http://stackoverflow.com/questions/17624021/determine-if-a-mesh-is-visible-on-the-viewport-according-to-current-camera
285 |         camera.updateMatrixWorld();
286 |         camera.matrixWorldInverse.getInverse( camera.matrixWorld );
287 |         cameraViewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
288 | 
289 |         frustum.setFromMatrix( cameraViewProjectionMatrix );
290 | 
291 | 
292 |         for( var i =0, l=collisionList.length; i<l; i++) {
293 | 
294 |             var newObj = collisionList[i];
295 | 
296 |             if(!newObj.reticulumData.gazeable) {
297 |                 continue;
298 |             }
299 | 
300 |             if( reticle.ignoreInvisible && !newObj.visible) {
301 |                 continue;
302 |             }
303 | 
304 |             if( frustum.intersectsObject( newObj ) ) {
305 |                 showReticle = true;
306 |                 break;
307 |             }
308 | 
309 |         }
310 |         reticle.mesh.visible = showReticle;
311 | 
312 |     };
313 | 
314 |     var detectHit = function() {
315 |         try {
316 |             raycaster.setFromCamera( vector, settings.camera );
317 |         } catch (e) {
318 |             //Assumes PerspectiveCamera for now... 
319 |             //Support for Three.js < rev70
320 |             raycaster.ray.origin.copy( settings.camera.position );
321 |             raycaster.ray.direction.set( vector.x, vector.y, 0.5 ).unproject( settings.camera ).sub( settings.camera.position ).normalize();
322 |         }
323 | 
324 |         //
325 |         var intersects = raycaster.intersectObjects(collisionList);
326 |         var intersectsCount = intersects.length;
327 |         //Detect
328 |         if (intersectsCount) {
329 | 
330 |             var newObj;
331 | 
332 |             //Check if what we are hitting can be used
333 |             for( var i =0, l=intersectsCount; i<l; i++) {
334 |                 newObj = intersects[ i ].object;
335 |                 //If new object is not gazeable skip it.
336 |                 if (!newObj.reticulumData.gazeable) {
337 |                     if( newObj == INTERSECTED ) { //TO DO: move this else where
338 |                         gazeOut(INTERSECTED)
339 |                     }
340 |                     newObj = null;
341 |                     continue;
342 |                 }
343 |                 //If new object is invisible skip it.
344 |                 if( reticle.ignoreInvisible && !newObj.visible) {
345 |                     newObj = null;
346 |                     continue;
347 |                 }
348 |                 //No issues let use this one
349 |                 break;
350 |             }
351 | 
352 |             //There is no valid object
353 |             if (newObj === null) return;
354 | 
355 |             //Is it a new object?
356 |             if( INTERSECTED != newObj ) {
357 |                 //If old INTERSECTED i.e. not null reset and gazeout 
358 |                 if ( INTERSECTED ) {
359 |                     gazeOut(INTERSECTED);
360 |                 };
361 | 
362 |                 //Updated INTERSECTED with new object
363 |                 INTERSECTED = newObj;
364 |                 //Is the object gazeable?
365 |                 //if (INTERSECTED.gazeable) {
366 |                 //Yes
367 |                 gazeOver(INTERSECTED);
368 |                 //}
369 |             } else {
370 |                 //Ok it looks like we are in love
371 |                 gazeLong(INTERSECTED);
372 |             }
373 | 
374 |         } else {
375 |             //Is the object gazeable?
376 |             //if (INTERSECTED.gazeable) {
377 |             if (INTERSECTED) {
378 |                 //GAZE OUT
379 |                 gazeOut(INTERSECTED);
380 |             }
381 |             //}
382 |             INTERSECTED = null;
383 | 
384 |         }
385 |     };
386 | 
387 |     var setColor = function(threeObject, color) {
388 |         threeObject.material.color.setHex( color );
389 |     };
390 | 
391 |     var gazeOut = function(threeObject) {
392 |         threeObject.userData.hitTime = 0;
393 |         //if(threeObject.fuse) {
394 |         fuse.out();
395 |         //}
396 | 
397 |         reticle.hit = false;
398 |         reticle.setDepthAndScale();
399 | 
400 |         if ( threeObject.onGazeOut != null ) {
401 |             threeObject.onGazeOut();
402 |         }
403 |     };
404 | 
405 |     var gazeOver = function(threeObject) {
406 |         var threeObjectData = threeObject.reticulumData;
407 |         reticle.colorTo = threeObjectData.reticleHoverColor || reticle.globalColorTo;
408 | 
409 |         //Fuse
410 |         fuse.over(threeObjectData.fuseDuration, threeObjectData.fuseVisible);
411 |         if(threeObjectData.fuseColor) {
412 |             setColor(fuse.mesh, threeObjectData.fuseColor);
413 |         }
414 | 
415 |         threeObject.userData.hitTime = clock.getElapsedTime();
416 | 
417 |         //Reticle
418 |         //Vibrate
419 |         vibrate( reticle.vibrateHover );
420 |         //Does object have an action assigned to it?
421 |         if (threeObject.onGazeOver != null) {
422 |             threeObject.onGazeOver();
423 |         }
424 |     };
425 | 
426 |     var gazeLong = function( threeObject ) {
427 |         var distance;
428 |         var elapsed = clock.getElapsedTime();
429 |         var gazeTime = elapsed - threeObject.userData.hitTime;
430 |         //There has to be a better  way...
431 |         //Keep updating distance while user is focused on target
432 |         if( reticle.active ) {
433 | 
434 |             if(!settings.lockDistance){
435 |                 reticle.worldPosition.setFromMatrixPosition( threeObject.matrixWorld );
436 |                 distance = settings.camera.position.distanceTo( reticle.worldPosition );
437 |                 distance -= threeObject.geometry.boundingSphere.radius;
438 |             }
439 | 
440 |             reticle.hit = true;
441 | 
442 |             if(!settings.lockDistance) {
443 |                 reticle.setDepthAndScale(distance);
444 |             }
445 |         }
446 | 
447 |         //Fuse
448 |        
449 |         if( gazeTime >= fuse.duration && !fuse.active  && !fuse.timeDone) {
450 |             //Vibrate
451 |             fuse.timeDone=true;
452 |             fuse.mesh.visible = false;
453 |             vibrate( fuse.vibratePattern );
454 |             //Does object have an action assigned to it?
455 |             if (threeObject.onGazeLong != null) {
456 |                 threeObject.onGazeLong();
457 |             }
458 |             //Reset the clock
459 |             threeObject.userData.hitTime = elapsed;
460 |         } else {
461 |             fuse.update(gazeTime);
462 |         }
463 |     };
464 | 
465 |     var gazeClick = function( threeObject ) {
466 |         var clickCancelFuse = threeObject.reticulumData.clickCancelFuse != null ? threeObject.reticulumData.clickCancelFuse : fuse.clickCancel;
467 |         //Cancel Fuse
468 |         if( clickCancelFuse ) {
469 |             //Reset the clock
470 |             threeObject.userData.hitTime = clock.getElapsedTime();
471 |             //Force gaze to end...this might be to assumptions
472 |             fuse.update( fuse.duration );
473 |         }
474 | 
475 |         //Does object have an action assigned to it?
476 |         if (threeObject.onGazeClick != null) {
477 |             threeObject.onGazeClick();
478 |         }
479 |     };
480 | 
481 |     //This function is called on click or touch events
482 |     var touchClickHandler = function(e) {
483 |         if( reticle.hit && INTERSECTED ) {
484 |             e.preventDefault();
485 |             gazeClick(INTERSECTED);
486 |         }
487 |     }
488 | 
489 | 
490 |     return {
491 |         add: function (threeObject, options) {
492 |             var parameters = options || {};
493 | 
494 |             //Stores object options for reticulum
495 |             threeObject.reticulumData = {};
496 |             threeObject.reticulumData.gazeable = true;
497 |             //Reticle
498 |             threeObject.reticulumData.reticleHoverColor = null;
499 |             if(parameters.reticleHoverColor) {
500 |                 threeObject.reticulumData.reticleHoverColor = new THREE.Color(parameters.reticleHoverColor);
501 |             }
502 |             //Fuse
503 |             threeObject.reticulumData.fuseDuration              = parameters.fuseDuration           || null;
504 |             threeObject.reticulumData.fuseColor                 = parameters.fuseColor              || null;
505 |             threeObject.reticulumData.fuseVisible               = parameters.fuseVisible            === undefined ? null : parameters.fuseVisible;
506 |             threeObject.reticulumData.clickCancelFuse           = parameters.clickCancelFuse        === undefined ? null : parameters.clickCancelFuse;
507 |             //Events
508 |             threeObject.onGazeOver                              = parameters.onGazeOver             || null;
509 |             threeObject.onGazeOut                               = parameters.onGazeOut              || null;
510 |             threeObject.onGazeLong                              = parameters.onGazeLong             || null;
511 |             threeObject.onGazeClick                             = parameters.onGazeClick            || null;
512 | 
513 | 
514 |             //Add object to list
515 |             collisionList.push(threeObject);
516 |         },
517 |         remove: function (threeObject) {
518 |             var index = collisionList.indexOf(threeObject);
519 |             threeObject.reticulumData.gazeable = false;
520 |             if (index > -1) {
521 |                 collisionList.splice(index, 1);
522 |             }
523 |         },
524 |         update: function () {
525 |             var delta = clock.getDelta(); //
526 |             detectHit();
527 | 
528 |             //Proximity
529 |             if(settings.proximity) {
530 |                 proximity();
531 |             }
532 | 
533 |             //Animation
534 |             reticle.update(delta);
535 | 
536 |         },
537 |         init: function (camera, options) {
538 |             var c = camera || null;
539 |             var o = options || {};
540 |             if ( !c instanceof THREE.Camera ) {
541 |                 console.error("ERROR: Camera was not correctly defined. Unable to initiate Reticulum.");
542 |                 return;
543 |             }
544 |             initiate(c, o);
545 |         }
546 |     };
547 | })();
548 | 
549 | export default Reticulum


--------------------------------------------------------------------------------