Simplified CrosseyedWebGLRenderer: using viewports instead of FBOs.

Now it's possible to have antialiased stereo.

examples/webgl_materials_cars_camaro_crosseyed.html

@@ -67,8 +67,8 @@
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
 				camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
 				camera.position.z = 1000;
@@ -104,7 +104,7 @@
 				scene.addObject(lightMesh);
 
 
-				webglRenderer = new THREE.CrosseyedWebGLRenderer( { separation: 20 } );
+				webglRenderer = new THREE.CrosseyedWebGLRenderer( { separation: 20, antialias: true } );
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( webglRenderer.domElement );
 

src/extras/renderers/CrosseyedWebGLRenderer.js

@@ -6,64 +6,39 @@ 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.Camera(), 
 		_cameraR = new THREE.Camera();
 
-	var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
-	
-	var _renderTargetL = new THREE.WebGLRenderTarget( 256, 512, _params ), 
-		_renderTargetR = new THREE.WebGLRenderTarget( 256, 512, _params );
-
 	_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;
-
-	var _orthoCamera = new THREE.Camera();
-	_orthoCamera.projectionMatrix = THREE.Matrix4.makeOrtho( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
 	
 	var _camera = new THREE.Camera( 53, HALF_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 	_camera.position.z = -10;
-
-	var base = THREE.ShaderUtils.lib[ "screen" ];
-	
-	var uniformsL = THREE.UniformsUtils.clone( base.uniforms );
-	var uniformsR = THREE.UniformsUtils.clone( base.uniforms );
-	
-	uniformsL.tDiffuse.texture = _renderTargetL;
-	uniformsR.tDiffuse.texture = _renderTargetR;
 	
-	var screenMaterialL = new THREE.MeshShaderMaterial( { fragmentShader: base.fragmentShader, vertexShader: base.vertexShader, uniforms: uniformsL } );
-	var screenMaterialR = new THREE.MeshShaderMaterial( { fragmentShader: base.fragmentShader, vertexShader: base.vertexShader, uniforms: uniformsR } );
-	
-	var _left  = new THREE.Mesh( new THREE.Plane( HALF_WIDTH, SCREEN_HEIGHT ), screenMaterialL );
-	var _right = new THREE.Mesh( new THREE.Plane( HALF_WIDTH, SCREEN_HEIGHT ), screenMaterialR );
-	
-	_left.position.x  = -HALF_WIDTH/2;
-	_right.position.x =  HALF_WIDTH/2;
-	
-	var _scene = new THREE.Scene();
-	_scene.addObject( _left );
-	_scene.addObject( _right );
 
 	this.setSize = function ( width, height ) {
 
 		_setSize.call( _this, width, height );
 
-		_renderTargetL.width = width/2;
-		_renderTargetL.height = height;
-
-		_renderTargetR.width = width/2;
-		_renderTargetR.height = 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;
@@ -80,10 +55,11 @@ THREE.CrosseyedWebGLRenderer = function ( parameters ) {
 		_cameraR.target.position.copy( camera.target.position );
 		_cameraR.translateX( - _this.separation );
 
-		_render.call( _this, scene, _cameraL, _renderTargetL );
-		_render.call( _this, scene, _cameraR, _renderTargetR );
-
-		_render.call( _this, _scene, _orthoCamera );
+		this.setViewport( 0, 0, _width, _height );
+		_render.call( _this, scene, _cameraL );
+		
+		this.setViewport( _width, 0, _width, _height );
+		_render.call( _this, scene, _cameraR, false );
 
 	};