Changed AnaglyphWebGLRenderer & co to AnaglyphEffect & co. Fixes #1760.

Anaglyph and ParallaxBarrier could also be merged somehow, as the only change is the fragment shader.

build/custom/ThreeDOM.js

@@ -79,7 +79,7 @@ this.x=a.x*d;this.y=a.y*d;this.z=a.z*d;this.w=Math.cos(c);return this},setFromRo
 Math.abs(this.x);this.y=a.elements[8]-a.elements[2]<0?-Math.abs(this.y):Math.abs(this.y);this.z=a.elements[1]-a.elements[4]<0?-Math.abs(this.z):Math.abs(this.z);this.normalize();return this},calculateW:function(){this.w=-Math.sqrt(Math.abs(1-this.x*this.x-this.y*this.y-this.z*this.z));return this},inverse:function(){this.x=this.x*-1;this.y=this.y*-1;this.z=this.z*-1;return this},length:function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w)},normalize:function(){var a=
 Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w);if(a===0)this.w=this.z=this.y=this.x=0;else{a=1/a;this.x=this.x*a;this.y=this.y*a;this.z=this.z*a;this.w=this.w*a}return this},multiply:function(a,b){this.x=a.x*b.w+a.y*b.z-a.z*b.y+a.w*b.x;this.y=-a.x*b.z+a.y*b.w+a.z*b.x+a.w*b.y;this.z=a.x*b.y-a.y*b.x+a.z*b.w+a.w*b.z;this.w=-a.x*b.x-a.y*b.y-a.z*b.z+a.w*b.w;return this},multiplySelf:function(a){var b=this.x,c=this.y,d=this.z,e=this.w,f=a.x,g=a.y,i=a.z,a=a.w;this.x=b*a+e*f+c*i-d*g;this.y=
 c*a+e*g+d*f-b*i;this.z=d*a+e*i+b*g-c*f;this.w=e*a-b*f-c*g-d*i;return this},multiplyVector3:function(a,b){b||(b=a);var c=a.x,d=a.y,e=a.z,f=this.x,g=this.y,i=this.z,k=this.w,j=k*c+g*e-i*d,h=k*d+i*c-f*e,m=k*e+f*d-g*c,c=-f*c-g*d-i*e;b.x=j*k+c*-f+h*-i-m*-g;b.y=h*k+c*-g+m*-f-j*-i;b.z=m*k+c*-i+j*-g-h*-f;return b},clone:function(){return new THREE.Quaternion(this.x,this.y,this.z,this.w)}};
-THREE.Quaternion.slerp=function(a,b,c,d){var e=a.w*b.w+a.x*b.x+a.y*b.y+a.z*b.z;if(e<0){c.w=-b.w;c.x=-b.x;c.y=-b.y;c.z=-b.z;e=-e}else c.copy(b);if(Math.abs(e)>=1){c.w=a.w;c.x=a.x;c.y=a.y;c.z=a.z;return c}var f=Math.acos(e),e=Math.sqrt(1-e*e);if(Math.abs(e)<0.0010){c.w=0.5*(a.w+b.w);c.x=0.5*(a.x+b.x);c.y=0.5*(a.y+b.y);c.z=0.5*(a.z+b.z);return c}b=Math.sin((1-d)*f)/e;d=Math.sin(d*f)/e;c.w=a.w*b+c.w*d;c.x=a.x*b+c.x*d;c.y=a.y*b+c.y*d;c.z=a.z*b+c.z*d;return c};THREE.Vertex=function(){console.warn("THREE.Vertex has been DEPRECATED. Use THREE.Vector3 instead.")};
+THREE.Quaternion.slerp=function(a,b,c,d){var e=a.w*b.w+a.x*b.x+a.y*b.y+a.z*b.z;if(e<0){c.w=-b.w;c.x=-b.x;c.y=-b.y;c.z=-b.z;e=-e}else c.copy(b);if(Math.abs(e)>=1){c.w=a.w;c.x=a.x;c.y=a.y;c.z=a.z;return c}var f=Math.acos(e),e=Math.sqrt(1-e*e);if(Math.abs(e)<0.001){c.w=0.5*(a.w+b.w);c.x=0.5*(a.x+b.x);c.y=0.5*(a.y+b.y);c.z=0.5*(a.z+b.z);return c}b=Math.sin((1-d)*f)/e;d=Math.sin(d*f)/e;c.w=a.w*b+c.w*d;c.x=a.x*b+c.x*d;c.y=a.y*b+c.y*d;c.z=a.z*b+c.z*d;return c};THREE.Vertex=function(){console.warn("THREE.Vertex has been DEPRECATED. Use THREE.Vector3 instead.")};
 THREE.Face3=function(a,b,c,d,e,f){this.a=a;this.b=b;this.c=c;this.normal=d instanceof THREE.Vector3?d:new THREE.Vector3;this.vertexNormals=d instanceof Array?d:[];this.color=e instanceof THREE.Color?e:new THREE.Color;this.vertexColors=e instanceof Array?e:[];this.vertexTangents=[];this.materialIndex=f;this.centroid=new THREE.Vector3};
 THREE.Face3.prototype={constructor:THREE.Face3,clone:function(){var a=new THREE.Face3(this.a,this.b,this.c);a.normal.copy(this.normal);a.color.copy(this.color);a.centroid.copy(this.centroid);a.materialIndex=this.materialIndex;var b,c;b=0;for(c=this.vertexNormals.length;b<c;b++)a.vertexNormals[b]=this.vertexNormals[b].clone();b=0;for(c=this.vertexColors.length;b<c;b++)a.vertexColors[b]=this.vertexColors[b].clone();b=0;for(c=this.vertexTangents.length;b<c;b++)a.vertexTangents[b]=this.vertexTangents[b].clone();
 return a}};THREE.Face4=function(a,b,c,d,e,f,g){this.a=a;this.b=b;this.c=c;this.d=d;this.normal=e instanceof THREE.Vector3?e:new THREE.Vector3;this.vertexNormals=e instanceof Array?e:[];this.color=f instanceof THREE.Color?f:new THREE.Color;this.vertexColors=f instanceof Array?f:[];this.vertexTangents=[];this.materialIndex=g;this.centroid=new THREE.Vector3};

examples/webgl_materials_cars_anaglyph.html

@@ -137,7 +137,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer;
+			var camera, scene, renderer, effect;
 
 			var m, mi;
 
@@ -200,10 +200,12 @@
 
 				//
 
-				renderer = new THREE.AnaglyphWebGLRenderer();
-				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer = new THREE.WebGLRenderer();
 				renderer.setFaceCulling( 0 );
 
+				effect = new THREE.AnaglyphEffect( renderer );
+				effect.setSize( window.innerWidth, window.innerHeight );
+
 				container.appendChild( renderer.domElement );
 
 				if ( STATS_ENABLED ) {
@@ -602,7 +604,7 @@
 
 				camera.lookAt( scene.position );
 
-				renderer.render( scene, camera );
+				effect.render( scene, camera );
 
 				if ( STATS_ENABLED ) stats.update();
 

examples/webgl_materials_cars_camaro_crosseyed.html

@@ -48,7 +48,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer;
+			var camera, scene, renderer, effect;
 
 			var lightMesh;
 
@@ -97,12 +97,14 @@
 				scene.add( lightMesh );
 
 
-				renderer = new THREE.CrosseyedWebGLRenderer( { separation: 20, antialias: true } );
-				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setFaceCulling( 0 );
-
 				container.appendChild( renderer.domElement );
 
+				effect = new THREE.CrosseyedEffect( renderer );
+				effect.setSize( window.innerWidth, window.innerHeight );
+				effect.separation = 20;
+
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
@@ -207,14 +209,14 @@
 				switch( event.keyCode ) {
 
 					/* O */
-					case 79: renderer.separation -= 0.5; break;
+					case 79: effect.separation -= 0.5; break;
 
 					/* P */
-					case 80: renderer.separation += 0.5; break;
+					case 80: effect.separation += 0.5; break;
 
 				}
 
-				console.log( renderer.separation );
+				console.log( effect.separation );
 
 			};
 
@@ -241,7 +243,7 @@
 				lightMesh.position.x = 1500 * Math.cos( timer );
 				lightMesh.position.z = 1500 * Math.sin( timer );
 
-				renderer.render( scene, camera );
+				effect.render( scene, camera );
 
 			}
 

examples/webgl_materials_cars_parallaxbarrier.html

@@ -57,8 +57,6 @@
 
 		<script src="../build/Three.js"></script>
 
-		<script src="../src/extras/renderers/ParallaxBarrierWebGLRenderer.js"></script>
-
 		<script src="js/Detector.js"></script>
 		<script src="js/Stats.js"></script>
 
@@ -139,7 +137,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer;
+			var camera, scene, renderer, effect;
 
 			var m, mi;
 
@@ -203,12 +201,13 @@
 
 				//
 
-				renderer = new THREE.ParallaxBarrierWebGLRenderer();
-				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer = new THREE.WebGLRenderer();
 				renderer.setFaceCulling( 0 );
-
 				container.appendChild( renderer.domElement );
 
+				effect = new THREE.ParallaxBarrierEffect( renderer );
+				effect.setSize( window.innerWidth, window.innerHeight );				
+
 				if ( STATS_ENABLED ) {
 
 					stats = new Stats();
@@ -603,7 +602,7 @@
 
 				camera.lookAt( scene.position );
 
-				renderer.render( scene, camera );
+				effect.render( scene, camera );
 
 				if ( STATS_ENABLED ) stats.update();
 

examples/webgl_materials_cubemap_balls_reflection_anaglyph.html

@@ -45,7 +45,7 @@
 
 			var container;
 
-			var camera, scene, renderer;
+			var camera, scene, renderer, effect;
 
 			var mesh, lightMesh, geometry;
 			var spheres = [];
@@ -122,10 +122,12 @@
 
 				//
 
-				renderer = new THREE.AnaglyphWebGLRenderer();
-				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer = new THREE.WebGLRenderer();
 				container.appendChild( renderer.domElement );
 
+				effect = new THREE.AnaglyphEffect( renderer );
+				effect.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function onDocumentMouseMove(event) {
@@ -163,7 +165,7 @@
 
 				}
 
-				renderer.render( scene, camera );
+				effect.render( scene, camera );
 
 			}
 

examples/webgl_materials_cubemap_balls_refraction_crosseyed.html

@@ -48,7 +48,7 @@
 
 			var container;
 
-			var camera, scene, renderer;
+			var camera, scene, renderer, effect;
 
 			var mesh, lightMesh, geometry;
 			var spheres = [];
@@ -122,10 +122,13 @@
 
 				//
 
-				renderer = new THREE.CrosseyedWebGLRenderer( { separation: 90 } );
-				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer = new THREE.WebGLRenderer();
 				container.appendChild( renderer.domElement );
 
+				effect = new THREE.CrosseyedEffect( renderer );
+				effect.setSize( window.innerWidth, window.innerHeight );
+				effect.separation = 90;
+				
 				document.addEventListener( 'keydown', onKeyDown, false );
 
 			}
@@ -142,14 +145,14 @@
 				switch( event.keyCode ) {
 
 					/* O */
-					case 79: renderer.separation -= 0.5; break;
+					case 79: effect.separation -= 0.5; break;
 
 					/* P */
-					case 80: renderer.separation += 0.5; break;
+					case 80: effect.separation += 0.5; break;
 
 				}
 
-				console.log( renderer.separation );
+				console.log( effect.separation );
 
 			};
 
@@ -179,7 +182,7 @@
 
 				}
 
-				renderer.render( scene, camera );
+				effect.render( scene, camera );
 
 			}
 

src/extras/renderers/AnaglyphWebGLRenderer.js

-/**
- * @author mrdoob / http://mrdoob.com/
- * @author marklundin / http://mark-lundin.com/
- * @author alteredq / http://alteredqualia.com/
- */
-
-if ( THREE.WebGLRenderer ) {
-
-	THREE.AnaglyphWebGLRenderer = function ( parameters ) {
-
-		THREE.WebGLRenderer.call( this, parameters );
-
-		this.autoUpdateScene = false;
-
-		var _this = this, _setSize = this.setSize, _render = this.render;
-
-		var _cameraL = new THREE.PerspectiveCamera(),
-			_cameraR = new THREE.PerspectiveCamera();
-
-		var eyeRight = new THREE.Matrix4(),
-			eyeLeft = new THREE.Matrix4(),
-			focalLength = 125,
-			_aspect, _near, _far, _fov;
-
-		_cameraL.matrixAutoUpdate = _cameraR.matrixAutoUpdate = false;
-
-		var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
-
-		var _renderTargetL = new THREE.WebGLRenderTarget( 512, 512, _params ),
-			_renderTargetR = new THREE.WebGLRenderTarget( 512, 512, _params );
-
-		var _camera = new THREE.PerspectiveCamera( 53, 1, 1, 10000 );
-		_camera.position.z = 2;
-
-		var _material = new THREE.ShaderMaterial( {
-
-			uniforms: {
-
-				"mapLeft": { type: "t", value: 0, texture: _renderTargetL },
-				"mapRight": { type: "t", value: 1, texture: _renderTargetR }
-
-			},
-
-			vertexShader: [
-
-				"varying vec2 vUv;",
-
-				"void main() {",
-
-					"vUv = vec2( uv.x, 1.0 - uv.y );",
-					"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-
-				"}"
-
-			].join("\n"),
-
-			fragmentShader: [
-
-				"uniform sampler2D mapLeft;",
-				"uniform sampler2D mapRight;",
-				"varying vec2 vUv;",
-
-				"void main() {",
-
-					"vec4 colorL, colorR;",
-					"vec2 uv = vUv;",
-
-					"colorL = texture2D( mapLeft, uv );",
-					"colorR = texture2D( mapRight, uv );",
-
-					// http://3dtv.at/Knowhow/AnaglyphComparison_en.aspx
-
-					"gl_FragColor = vec4( colorL.g * 0.7 + colorL.b * 0.3, colorR.g, colorR.b, colorL.a + colorR.a ) * 1.1;",
-
-				"}"
-
-				].join("\n")
-
-		} );
-
-		var _scene = new THREE.Scene();
-
-		var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), _material );
-		mesh.rotation.x = Math.PI / 2;
-
-		_scene.add( mesh );
-
-		_scene.add( _camera );
-
-		this.setSize = function ( width, height ) {
-
-			_setSize.call( _this, width, height );
-
-			_renderTargetL.width = width;
-			_renderTargetL.height = height;
-
-			_renderTargetR.width = width;
-			_renderTargetR.height = 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, renderTarget, forceClear ) {
-
-			scene.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(),
-					eyeSep = focalLength / 30 * 0.5,
-					eyeSepOnProjection = eyeSep * _near / focalLength,
-					ymax = _near * Math.tan( _fov * Math.PI / 360 ),
-					xmin, xmax;
-
-				// translate xOffset
-
-				eyeRight.elements[12] = eyeSep;
-				eyeLeft.elements[12] = -eyeSep;
-
-				// 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 );
-
-			}
-
-			_cameraL.matrixWorld.copy( camera.matrixWorld ).multiplySelf( eyeLeft );
-			_cameraL.position.copy( camera.position );
-			_cameraL.near = camera.near;
-			_cameraL.far = camera.far;
-
-			_render.call( _this, scene, _cameraL, _renderTargetL, true );
-
-			_cameraR.matrixWorld.copy( camera.matrixWorld ).multiplySelf( eyeRight );
-			_cameraR.position.copy( camera.position );
-			_cameraR.near = camera.near;
-			_cameraR.far = camera.far;
-
-			_render.call( _this, scene, _cameraR, _renderTargetR, true );
-
-			_scene.updateMatrixWorld();
-			_render.call( _this, _scene, _camera );
-
-		};
-
-	};
-
-};

src/extras/renderers/CrosseyedWebGLRenderer.js

-/**
- * @author alteredq / http://alteredqualia.com/
- */
-
-if ( THREE.WebGLRenderer ) {
-
-	THREE.CrosseyedWebGLRenderer = function ( parameters ) {
-
-		THREE.WebGLRenderer.call( this, parameters );
-
-		this.autoClear = false;
-
-		var _this = this, _setSize = this.setSize, _render = this.render;
-
-		var _width, _height;
-
-		var _cameraL = new THREE.PerspectiveCamera();
-		_cameraL.target = new THREE.Vector3( 0, 0, 0 );
-
-		var _cameraR = new THREE.PerspectiveCamera();
-		_cameraR.target = new THREE.Vector3( 0, 0, 0 );
-
-		_this.separation = 10;
-		if ( parameters && parameters.separation !== undefined ) _this.separation = parameters.separation;
-
-		var SCREEN_WIDTH  = window.innerWidth;
-		var SCREEN_HEIGHT = window.innerHeight;
-		var HALF_WIDTH = SCREEN_WIDTH / 2;
-
-		this.setSize = function ( width, height ) {
-
-			_setSize.call( _this, width, height );
-
-			_width = width/2;
-			_height = height;
-
-		};
-
-		this.render = function ( scene, camera, renderTarget, forceClear ) {
-
-			this.clear();
-
-			_cameraL.fov = camera.fov;
-			_cameraL.aspect = 0.5 * camera.aspect;
-			_cameraL.near = camera.near;
-			_cameraL.far = camera.far;
-			_cameraL.updateProjectionMatrix();
-
-			_cameraL.position.copy( camera.position );
-			_cameraL.target.copy( camera.target );
-			_cameraL.translateX( _this.separation );
-			_cameraL.lookAt( _cameraL.target );
-
-			_cameraR.projectionMatrix = _cameraL.projectionMatrix;
-
-			_cameraR.position.copy( camera.position );
-			_cameraR.target.copy( camera.target );
-			_cameraR.translateX( - _this.separation );
-			_cameraR.lookAt( _cameraR.target );
-
-			this.setViewport( 0, 0, _width, _height );
-			_render.call( _this, scene, _cameraL );
-
-			this.setViewport( _width, 0, _width, _height );
-			_render.call( _this, scene, _cameraR, false );
-
-		};
-
-	};
-
-}

src/extras/renderers/ParallaxBarrierWebGLRenderer.js

-/**
- * @author mrdoob / http://mrdoob.com/
- * @author marklundin / http://mark-lundin.com/
- * @author alteredq / http://alteredqualia.com/
- */
-
-if ( THREE.WebGLRenderer ) {
-
-	THREE.ParallaxBarrierWebGLRenderer = function ( parameters ) {
-
-		THREE.WebGLRenderer.call( this, parameters );
-
-		this.autoUpdateScene = false;
-
-		var _this = this, _setSize = this.setSize, _render = this.render;
-
-		var _cameraL = new THREE.PerspectiveCamera(),
-			_cameraR = new THREE.PerspectiveCamera();
-
-		var eyeRight = new THREE.Matrix4(),
-			eyeLeft = new THREE.Matrix4(),
-			focalLength = 125,
-			_aspect, _near, _far, _fov;
-
-		_cameraL.matrixAutoUpdate = _cameraR.matrixAutoUpdate = false;
-
-		var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
-
-		var _renderTargetL = new THREE.WebGLRenderTarget( 512, 512, _params ),
-			_renderTargetR = new THREE.WebGLRenderTarget( 512, 512, _params );
-
-		var _camera = new THREE.PerspectiveCamera( 53, 1, 1, 10000 );
-		_camera.position.z = 2;
-
-		var _material = new THREE.ShaderMaterial( {
-
-			uniforms: {
-
-				"mapLeft": { type: "t", value: 0, texture: _renderTargetL },
-				"mapRight": { type: "t", value: 1, texture: _renderTargetR }
-
-			},
-
-			vertexShader: [
-
-				"varying vec2 vUv;",
-
-				"void main() {",
-
-					"vUv = vec2( uv.x, 1.0 - uv.y );",
-					"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-
-				"}"
-
-			].join("\n"),
-
-			fragmentShader: [
-
-				"uniform sampler2D mapLeft;",
-				"uniform sampler2D mapRight;",
-				"varying vec2 vUv;",
-
-				"void main() {",
-
-					"vec2 uv = vUv;",
-
-					"if ( ( mod(gl_FragCoord.x, 2.0) ) > 1.00 ) {",
-
-						"gl_FragColor = texture2D( mapLeft, uv );",
-
-					"} else {",
-
-						"gl_FragColor = texture2D( mapRight, uv );",
-
-					"}",
-
-				"}"
-
-				].join("\n")
-
-		} );
-
-		var _scene = new THREE.Scene();
-
-		var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), _material );
-		mesh.rotation.x = Math.PI / 2;
-
-		_scene.add( mesh );
-
-		_scene.add( _camera );
-
-		this.setSize = function ( width, height ) {
-
-			_setSize.call( _this, width, height );
-
-			_renderTargetL.width = width;
-			_renderTargetL.height = height;
-
-			_renderTargetR.width = width;
-			_renderTargetR.height = 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, renderTarget, forceClear ) {
-
-			scene.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(),
-					eyeSep = focalLength / 30 * 0.5,
-					eyeSepOnProjection = eyeSep * _near / focalLength,
-					ymax = _near * Math.tan( _fov * Math.PI / 360 ),
-					xmin, xmax;
-
-				// translate xOffset
-
-				eyeRight.elements[12] = eyeSep;
-				eyeLeft.elements[12] = -eyeSep;
-
-				// 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 );
-
-			}
-
-			_cameraL.matrixWorld.copy( camera.matrixWorld ).multiplySelf( eyeLeft );
-			_cameraL.position.copy( camera.position );
-			_cameraL.near = camera.near;
-			_cameraL.far = camera.far;
-
-			_render.call( _this, scene, _cameraL, _renderTargetL, true );
-
-			_cameraR.matrixWorld.copy( camera.matrixWorld ).multiplySelf( eyeRight );
-			_cameraR.position.copy( camera.position );
-			_cameraR.near = camera.near;
-			_cameraR.far = camera.far;
-
-			_render.call( _this, scene, _cameraR, _renderTargetR, true );
-
-			_scene.updateMatrixWorld();
-			_render.call( _this, _scene, _camera );
-
-		};
-
-	};
-
-};

src/extras/renderers/effects/AnaglyphEffect.js

+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author marklundin / http://mark-lundin.com/
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.AnaglyphEffect = 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 _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 );
+	var _renderTargetR = new THREE.WebGLRenderTarget( 512, 512, _params );
+
+	var _material = new THREE.ShaderMaterial( {
+
+		uniforms: {
+
+			"mapLeft": { type: "t", value: 0, texture: _renderTargetL },
+			"mapRight": { type: "t", value: 1, texture: _renderTargetR }
+
+		},
+
+		vertexShader: [
+
+			"varying vec2 vUv;",
+
+			"void main() {",
+
+			"	vUv = vec2( uv.x, 1.0 - uv.y );",
+			"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+			"}"
+
+		].join("\n"),
+
+		fragmentShader: [
+
+			"uniform sampler2D mapLeft;",
+			"uniform sampler2D mapRight;",
+			"varying vec2 vUv;",
+
+			"void main() {",
+
+			"	vec4 colorL, colorR;",
+			"	vec2 uv = vUv;",
+
+			"	colorL = texture2D( mapLeft, uv );",
+			"	colorR = texture2D( mapRight, uv );",
+
+				// http://3dtv.at/Knowhow/AnaglyphComparison_en.aspx
+
+			"	gl_FragColor = vec4( colorL.g * 0.7 + colorL.b * 0.3, colorR.g, colorR.b, colorL.a + colorR.a ) * 1.1;",
+
+			"}"
+
+			].join("\n")
+
+	} );
+
+	var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), _material );
+	mesh.rotation.x = Math.PI / 2;
+	_scene.add( mesh );
+
+	this.setSize = function ( width, height ) {
+
+		_renderTargetL.width = width;
+		_renderTargetL.height = height;
+
+		_renderTargetR.width = width;
+		_renderTargetR.height = height;
+
+		renderer.setSize( 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();
+
+		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( _fov * Math.PI / 360 );
+			var xmin, xmax;
+
+			// translate xOffset
+
+			eyeRight.elements[12] = eyeSep;
+			eyeLeft.elements[12] = -eyeSep;
+
+			// 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 );
+
+		}
+
+		_cameraL.matrixWorld.copy( camera.matrixWorld ).multiplySelf( 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 ).multiplySelf( eyeRight );
+		_cameraR.position.copy( camera.position );
+		_cameraR.near = camera.near;
+		_cameraR.far = camera.far;
+
+		renderer.render( scene, _cameraR, _renderTargetR, true );
+
+		_scene.updateMatrixWorld();
+
+		renderer.render( _scene, _camera );
+
+	};
+
+};

src/extras/renderers/effects/CrosseyedEffect.js

+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.CrosseyedEffect = function ( renderer ) {
+
+	var _width, _height;
+
+	var _cameraL = new THREE.PerspectiveCamera();
+	_cameraL.target = new THREE.Vector3();
+
+	var _cameraR = new THREE.PerspectiveCamera();
+	_cameraR.target = new THREE.Vector3();
+
+	var SCREEN_WIDTH  = window.innerWidth;
+	var SCREEN_HEIGHT = window.innerHeight;
+	var HALF_WIDTH = SCREEN_WIDTH / 2;
+
+	this.separation = 10;
+
+	renderer.autoClear = false;
+
+	this.setSize = function ( width, height ) {
+
+		_width = width / 2;
+		_height = height;
+
+		renderer.setSize( width, height );
+
+	};
+
+	this.render = function ( scene, camera ) {
+
+		_cameraL.fov = camera.fov;
+		_cameraL.aspect = 0.5 * camera.aspect;
+		_cameraL.near = camera.near;
+		_cameraL.far = camera.far;
+		_cameraL.updateProjectionMatrix();
+
+		_cameraL.position.copy( camera.position );
+		_cameraL.target.copy( camera.target );
+		_cameraL.translateX( this.separation );
+		_cameraL.lookAt( _cameraL.target );
+
+		_cameraR.projectionMatrix = _cameraL.projectionMatrix;
+
+		_cameraR.position.copy( camera.position );
+		_cameraR.target.copy( camera.target );
+		_cameraR.translateX( - this.separation );
+		_cameraR.lookAt( _cameraR.target );
+
+		renderer.clear();
+
+		renderer.setViewport( 0, 0, _width, _height );
+		renderer.render( scene, _cameraL );
+
+		renderer.setViewport( _width, 0, _width, _height );
+		renderer.render( scene, _cameraR, false );
+
+	};
+
+};

src/extras/renderers/effects/ParallaxBarrierEffect.js

+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author marklundin / http://mark-lundin.com/
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+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 _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 );
+	var _renderTargetR = new THREE.WebGLRenderTarget( 512, 512, _params );
+
+	var _material = new THREE.ShaderMaterial( {
+
+		uniforms: {
+
+			"mapLeft": { type: "t", value: 0, texture: _renderTargetL },
+			"mapRight": { type: "t", value: 1, texture: _renderTargetR }
+
+		},
+
+		vertexShader: [
+
+			"varying vec2 vUv;",
+
+			"void main() {",
+
+			"	vUv = vec2( uv.x, 1.0 - uv.y );",
+			"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+			"}"
+
+		].join("\n"),
+
+		fragmentShader: [
+
+			"uniform sampler2D mapLeft;",
+			"uniform sampler2D mapRight;",
+			"varying vec2 vUv;",
+
+			"void main() {",
+
+			"	vec2 uv = vUv;",
+
+			"	if ( ( mod( gl_FragCoord.x, 2.0 ) ) > 1.00 ) {",
+
+			"		gl_FragColor = texture2D( mapLeft, uv );",
+
+			"	} else {",
+
+			"		gl_FragColor = texture2D( mapRight, uv );",
+
+			"	}",
+
+			"}"
+
+			].join("\n")
+
+	} );
+
+	var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), _material );
+	mesh.rotation.x = Math.PI / 2;
+
+	_scene.add( mesh );
+
+	this.setSize = function ( width, height ) {
+
+		_renderTargetL.width = width;
+		_renderTargetL.height = height;
+
+		_renderTargetR.width = width;
+		_renderTargetR.height = height;
+
+		renderer.setSize( 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, renderTarget, forceClear ) {
+
+		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( _fov * Math.PI / 360 );
+			var xmin, xmax;
+
+			// translate xOffset
+
+			eyeRight.elements[12] = eyeSep;
+			eyeLeft.elements[12] = -eyeSep;
+
+			// 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 );
+
+		}
+
+		_cameraL.matrixWorld.copy( camera.matrixWorld ).multiplySelf( 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 ).multiplySelf( eyeRight );
+		_cameraR.position.copy( camera.position );
+		_cameraR.near = camera.near;
+		_cameraR.far = camera.far;
+
+		renderer.render( scene, _cameraR, _renderTargetR, true );
+
+		_scene.updateMatrixWorld();
+
+		renderer.render( _scene, _camera );
+
+	};
+
+};

utils/build.py

@@ -133,12 +133,13 @@ EXTRAS_FILES = [
 'extras/objects/ImmediateRenderObject.js',
 'extras/objects/LensFlare.js',
 'extras/objects/MorphBlendMesh.js',
+'extras/renderers/effects/AnaglyphEffect.js',
+'extras/renderers/effects/CrosseyedEffect.js',
+'extras/renderers/effects/ParallaxBarrierEffect.js',
 'extras/renderers/plugins/LensFlarePlugin.js',
 'extras/renderers/plugins/ShadowMapPlugin.js',
 'extras/renderers/plugins/SpritePlugin.js',
 'extras/renderers/plugins/DepthPassPlugin.js',
-'extras/renderers/AnaglyphWebGLRenderer.js',
-'extras/renderers/CrosseyedWebGLRenderer.js',
 'extras/shaders/ShaderFlares.js',
 'extras/shaders/ShaderSprite.js'
 ]