StereoCamera: Updated effects and examples.

examples/canvas_effects_stereo.html

@@ -50,7 +50,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.StereoCamera( 60, window.innerWidth / window.innerHeight / 2, 1, 10000 );
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
@@ -102,7 +102,7 @@
 				windowHalfX = window.innerWidth / 2;
 				windowHalfY = window.innerHeight / 2;
 
-				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.aspect = window.innerWidth / window.innerHeight / 2;
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/js/effects/AnaglyphEffect.js

@@ -6,17 +6,6 @@
 
 THREE.AnaglyphEffect = function ( renderer, width, height ) {
 
-	var eyeRight = new THREE.Matrix4();
-	var eyeLeft = new THREE.Matrix4();
-	var focalLength = 125;
-	var _aspect, _near, _far, _fov;
-
-	var _cameraL = new THREE.PerspectiveCamera();
-	_cameraL.matrixAutoUpdate = false;
-
-	var _cameraR = new THREE.PerspectiveCamera();
-	_cameraR.matrixAutoUpdate = false;
-
 	var _camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 
 	var _scene = new THREE.Scene();
@@ -87,77 +76,21 @@ THREE.AnaglyphEffect = function ( renderer, width, height ) {
 
 	};
 
-	/*
-	 * Renderer now uses an asymmetric perspective projection
-	 * (http://paulbourke.net/miscellaneous/stereographics/stereorender/).
-	 *
-	 * Each camera is offset by the eye seperation and its projection matrix is
-	 * also skewed asymetrically back to converge on the same projection plane.
-	 * Added a focal length parameter to, this is where the parallax is equal to 0.
-	 */
-
 	this.render = function ( scene, camera ) {
 
-		scene.updateMatrixWorld();
-
-		if ( camera.parent === null ) camera.updateMatrixWorld();
-
-		var hasCameraChanged = ( _aspect !== camera.aspect ) || ( _near !== camera.near ) || ( _far !== camera.far ) || ( _fov !== camera.fov );
-
-		if ( hasCameraChanged ) {
-
-			_aspect = camera.aspect;
-			_near = camera.near;
-			_far = camera.far;
-			_fov = camera.fov;
-
-			var projectionMatrix = camera.projectionMatrix.clone();
-			var eyeSep = focalLength / 30 * 0.5;
-			var eyeSepOnProjection = eyeSep * _near / focalLength;
-			var ymax = _near * Math.tan( THREE.Math.degToRad( _fov * 0.5 ) );
-			var xmin, xmax;
-
-			// translate xOffset
-
-			eyeRight.elements[ 12 ] = eyeSep;
-			eyeLeft.elements[ 12 ] = - eyeSep;
+		if ( camera instanceof THREE.StereoCamera === false ) {
 
-			// for left eye
-
-			xmin = - ymax * _aspect + eyeSepOnProjection;
-			xmax = ymax * _aspect + eyeSepOnProjection;
-
-			projectionMatrix.elements[ 0 ] = 2 * _near / ( xmax - xmin );
-			projectionMatrix.elements[ 8 ] = ( xmax + xmin ) / ( xmax - xmin );
-
-			_cameraL.projectionMatrix.copy( projectionMatrix );
-
-			// for right eye
-
-			xmin = - ymax * _aspect - eyeSepOnProjection;
-			xmax = ymax * _aspect - eyeSepOnProjection;
-
-			projectionMatrix.elements[ 0 ] = 2 * _near / ( xmax - xmin );
-			projectionMatrix.elements[ 8 ] = ( xmax + xmin ) / ( xmax - xmin );
-
-			_cameraR.projectionMatrix.copy( projectionMatrix );
+			console.error( 'THREE.StereoCamera.render(): camera should now be an insteance of THREE.StereoCamera.' );
+			return;
 
 		}
 
-		_cameraL.matrixWorld.copy( camera.matrixWorld ).multiply( eyeLeft );
-		_cameraL.position.copy( camera.position );
-		_cameraL.near = camera.near;
-		_cameraL.far = camera.far;
-
-		renderer.render( scene, _cameraL, _renderTargetL, true );
-
-		_cameraR.matrixWorld.copy( camera.matrixWorld ).multiply( eyeRight );
-		_cameraR.position.copy( camera.position );
-		_cameraR.near = camera.near;
-		_cameraR.far = camera.far;
+		scene.updateMatrixWorld();
 
-		renderer.render( scene, _cameraR, _renderTargetR, true );
+		if ( camera.parent === null ) camera.updateMatrixWorld();
 
+		renderer.render( scene, camera.cameraL, _renderTargetL, true );
+		renderer.render( scene, camera.cameraR, _renderTargetR, true );
 		renderer.render( _scene, _camera );
 
 	};
@@ -167,6 +100,6 @@ THREE.AnaglyphEffect = function ( renderer, width, height ) {
 		if ( _renderTargetL ) _renderTargetL.dispose();
 		if ( _renderTargetR ) _renderTargetR.dispose();
 
-	}
+	};
 
 };

examples/js/effects/ParallaxBarrierEffect.js

@@ -6,23 +6,10 @@
 
 THREE.ParallaxBarrierEffect = function ( renderer ) {
 
-	var eyeRight = new THREE.Matrix4();
-	var eyeLeft = new THREE.Matrix4();
-	var focalLength = 125;
-	var _aspect, _near, _far, _fov;
-
-	var _cameraL = new THREE.PerspectiveCamera();
-	_cameraL.matrixAutoUpdate = false;
-
-	var _cameraR = new THREE.PerspectiveCamera();
-	_cameraR.matrixAutoUpdate = false;
+	var _camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 
 	var _scene = new THREE.Scene();
 
-	var _camera = new THREE.PerspectiveCamera( 53, 1, 1, 10000 );
-	_camera.position.z = 2;
-	_scene.add( _camera );
-
 	var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
 
 	var _renderTargetL = new THREE.WebGLRenderTarget( 512, 512, _params );
@@ -88,79 +75,21 @@ THREE.ParallaxBarrierEffect = function ( renderer ) {
 
 	};
 
-	/*
-	 * Renderer now uses an asymmetric perspective projection
-	 * (http://paulbourke.net/miscellaneous/stereographics/stereorender/).
-	 *
-	 * Each camera is offset by the eye seperation and its projection matrix is
-	 * also skewed asymetrically back to converge on the same projection plane.
-	 * Added a focal length parameter to, this is where the parallax is equal to 0.
-	 */
-
 	this.render = function ( scene, camera ) {
 
-		scene.updateMatrixWorld();
-
-		if ( camera.parent === null ) camera.updateMatrixWorld();
-
-		var hasCameraChanged = ( _aspect !== camera.aspect ) || ( _near !== camera.near ) || ( _far !== camera.far ) || ( _fov !== camera.fov );
-
-		if ( hasCameraChanged ) {
-
-			_aspect = camera.aspect;
-			_near = camera.near;
-			_far = camera.far;
-			_fov = camera.fov;
-
-			var projectionMatrix = camera.projectionMatrix.clone();
-			var eyeSep = focalLength / 30 * 0.5;
-			var eyeSepOnProjection = eyeSep * _near / focalLength;
-			var ymax = _near * Math.tan( THREE.Math.degToRad( _fov * 0.5 ) );
-			var xmin, xmax;
-
-			// translate xOffset
-
-			eyeRight.elements[ 12 ] = eyeSep;
-			eyeLeft.elements[ 12 ] = - eyeSep;
+		if ( camera instanceof THREE.StereoCamera === false ) {
 
-			// for left eye
-
-			xmin = - ymax * _aspect + eyeSepOnProjection;
-			xmax = ymax * _aspect + eyeSepOnProjection;
-
-			projectionMatrix.elements[ 0 ] = 2 * _near / ( xmax - xmin );
-			projectionMatrix.elements[ 8 ] = ( xmax + xmin ) / ( xmax - xmin );
-
-			_cameraL.projectionMatrix.copy( projectionMatrix );
-
-			// for right eye
-
-			xmin = - ymax * _aspect - eyeSepOnProjection;
-			xmax = ymax * _aspect - eyeSepOnProjection;
-
-			projectionMatrix.elements[ 0 ] = 2 * _near / ( xmax - xmin );
-			projectionMatrix.elements[ 8 ] = ( xmax + xmin ) / ( xmax - xmin );
-
-			_cameraR.projectionMatrix.copy( projectionMatrix );
+			console.error( 'THREE.StereoCamera.render(): camera should now be an insteance of THREE.StereoCamera.' );
+			return;
 
 		}
 
-		_cameraL.matrixWorld.copy( camera.matrixWorld ).multiply( eyeLeft );
-		_cameraL.position.copy( camera.position );
-		_cameraL.near = camera.near;
-		_cameraL.far = camera.far;
-
-		renderer.render( scene, _cameraL, _renderTargetL, true );
-
-		_cameraR.matrixWorld.copy( camera.matrixWorld ).multiply( eyeRight );
-		_cameraR.position.copy( camera.position );
-		_cameraR.near = camera.near;
-		_cameraR.far = camera.far;
-
-		renderer.render( scene, _cameraR, _renderTargetR, true );
+		scene.updateMatrixWorld();
 
-		_scene.updateMatrixWorld();
+		if ( camera.parent === null ) camera.updateMatrixWorld();
 
+		renderer.render( scene, camera.cameraL, _renderTargetL, true );
+		renderer.render( scene, camera.cameraR, _renderTargetR, true );
 		renderer.render( _scene, _camera );
 
 	};

examples/js/effects/StereoEffect.js

@@ -3,64 +3,12 @@
  * @authod mrdoob / http://mrdoob.com/
  * @authod arodic / http://aleksandarrodic.com/
  * @authod fonserbc / http://fonserbc.github.io/
- *
- * Off-axis stereoscopic effect based on http://paulbourke.net/stereographics/stereorender/
- */
+*/
 
 THREE.StereoEffect = function ( renderer ) {
 
-	// API
-
-	var scope = this;
-
-	this.eyeSeparation = 3;
-	this.focalLength = 15; 	// Distance to the non-parallax or projection plane
-
-	Object.defineProperties( this, {
-		separation: {
-			get: function () {
-
-				return scope.eyeSeparation;
-
-			},
-			set: function ( value ) {
-
-				console.warn( 'THREE.StereoEffect: .separation is now .eyeSeparation.' );
-				scope.eyeSeparation = value;
-
-			}
-		},
-		targetDistance: {
-			get: function () {
-
-				return scope.focalLength;
-
-			},
-			set: function ( value ) {
-
-				console.warn( 'THREE.StereoEffect: .targetDistance is now .focalLength.' );
-				scope.focalLength = value;
-
-			}
-		}
-	} );
-
-	// internals
-
 	var _width, _height;
 
-	var _position = new THREE.Vector3();
-	var _quaternion = new THREE.Quaternion();
-	var _scale = new THREE.Vector3();
-
-	var _cameraL = new THREE.PerspectiveCamera();
-	var _cameraR = new THREE.PerspectiveCamera();
-
-	var _fov;
-	var _outer, _inner, _top, _bottom;
-	var _ndfl, _halfFocalWidth, _halfFocalHeight;
-	var _innerFactor, _outerFactor;
-
 	// initialization
 
 	renderer.autoClear = false;
@@ -76,70 +24,27 @@ THREE.StereoEffect = function ( renderer ) {
 
 	this.render = function ( scene, camera ) {
 
-		scene.updateMatrixWorld();
-
-		if ( camera.parent === null ) camera.updateMatrixWorld();
-
-		camera.matrixWorld.decompose( _position, _quaternion, _scale );
-
-		// Effective fov of the camera
-
-		_fov = THREE.Math.radToDeg( 2 * Math.atan( Math.tan( THREE.Math.degToRad( camera.fov ) * 0.5 ) / camera.zoom ) );
-
-		_ndfl = camera.near / this.focalLength;
-		_halfFocalHeight = Math.tan( THREE.Math.degToRad( _fov ) * 0.5 ) * this.focalLength;
-		_halfFocalWidth = _halfFocalHeight * 0.5 * camera.aspect;
+		if ( camera instanceof THREE.StereoCamera === false ) {
 
-		_top = _halfFocalHeight * _ndfl;
-		_bottom = - _top;
-		_innerFactor = ( _halfFocalWidth + this.eyeSeparation / 2.0 ) / ( _halfFocalWidth * 2.0 );
-		_outerFactor = 1.0 - _innerFactor;
+			console.error( 'THREE.StereoCamera.render(): camera should now be an insteance of THREE.StereoCamera.' );
+			return;
 
-		_outer = _halfFocalWidth * 2.0 * _ndfl * _outerFactor;
-		_inner = _halfFocalWidth * 2.0 * _ndfl * _innerFactor;
-
-		// left
-
-		_cameraL.projectionMatrix.makeFrustum(
-			- _outer,
-			_inner,
-			_bottom,
-			_top,
-			camera.near,
-			camera.far
-		);
-
-		_cameraL.position.copy( _position );
-		_cameraL.quaternion.copy( _quaternion );
-		_cameraL.translateX( - this.eyeSeparation / 2.0 );
-
-		// right
-
-		_cameraR.projectionMatrix.makeFrustum(
-			- _inner,
-			_outer,
-			_bottom,
-			_top,
-			camera.near,
-			camera.far
-		);
+		}
 
-		_cameraR.position.copy( _position );
-		_cameraR.quaternion.copy( _quaternion );
-		_cameraR.translateX( this.eyeSeparation / 2.0 );
+		scene.updateMatrixWorld();
 
-		//
+		if ( camera.parent === null ) camera.updateMatrixWorld();
 
 		renderer.clear();
 		renderer.enableScissorTest( true );
 
 		renderer.setScissor( 0, 0, _width, _height );
 		renderer.setViewport( 0, 0, _width, _height );
-		renderer.render( scene, _cameraL );
+		renderer.render( scene, camera.cameraL );
 
 		renderer.setScissor( _width, 0, _width, _height );
 		renderer.setViewport( _width, 0, _width, _height );
-		renderer.render( scene, _cameraR );
+		renderer.render( scene, camera.cameraR );
 
 		renderer.enableScissorTest( false );
 

examples/webgl_effects_anaglyph.html

@@ -70,7 +70,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.StereoCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
 
 				scene = new THREE.Scene();

examples/webgl_effects_parallaxbarrier.html

@@ -161,7 +161,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.StereoCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
 				scene = new THREE.Scene();
 

examples/webgl_effects_stereo.html

@@ -71,7 +71,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.StereoCamera( 60, window.innerWidth / window.innerHeight / 2, 1, 100000 );
 				camera.position.z = 3200;
 
 				scene = new THREE.Scene();
@@ -140,7 +140,7 @@
 				windowHalfX = window.innerWidth / 2,
 				windowHalfY = window.innerHeight / 2,
 
-				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.aspect = window.innerWidth / window.innerHeight / 2;
 				camera.updateProjectionMatrix();
 
 				effect.setSize( window.innerWidth, window.innerHeight );