StereoCamera: Use layers for rendering per-eye content. See #6437

examples/js/effects/VREffect.js

@@ -86,7 +86,10 @@ THREE.VREffect = function ( renderer, onError ) {
 	// render
 
 	var cameraL = new THREE.PerspectiveCamera();
+	cameraL.layers.enable( 1 );
+
 	var cameraR = new THREE.PerspectiveCamera();
+	cameraR.layers.enable( 2 );
 
 	this.render = function ( scene, camera ) {
 
@@ -100,17 +103,10 @@ THREE.VREffect = function ( renderer, onError ) {
 			eyeFOVL = eyeParamsL.recommendedFieldOfView;
 			eyeFOVR = eyeParamsR.recommendedFieldOfView;
 
-			var sceneL, sceneR;
-
 			if ( Array.isArray( scene ) ) {
 
-				sceneL = scene[ 0 ];
-				sceneR = scene[ 1 ];
-
-			} else {
-
-				sceneL = scene;
-				sceneR = scene;
+				console.warn( 'THREE.VREffect.render() no longer supports arrays. Use object.layers.set() instead.' );
+				scene = scene[ 0 ];
 
 			}
 
@@ -134,12 +130,12 @@ THREE.VREffect = function ( renderer, onError ) {
 			// render left eye
 			renderer.setViewport( 0, 0, size.width, size.height );
 			renderer.setScissor( 0, 0, size.width, size.height );
-			renderer.render( sceneL, cameraL );
+			renderer.render( scene, cameraL );
 
 			// render right eye
 			renderer.setViewport( size.width, 0, size.width, size.height );
 			renderer.setScissor( size.width, 0, size.width, size.height );
-			renderer.render( sceneR, cameraR );
+			renderer.render( scene, cameraR );
 
 			renderer.enableScissorTest( false );
 
@@ -149,8 +145,6 @@ THREE.VREffect = function ( renderer, onError ) {
 
 		// Regular render mode if not HMD
 
-		if ( Array.isArray( scene ) ) scene = scene[ 0 ];
-
 		renderer.render( scene, camera );
 
 	};

examples/vr_video.html

@@ -36,7 +36,7 @@
 
 		<script>
 
-			var camera, sceneLeft, sceneRight, renderer;
+			var camera, scene, renderer;
 			var video, texture;
 
 			var controls, effect;
@@ -55,6 +55,7 @@
 				} );
 
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera.layers.enable( 1 ); // render left view when no stereo available
 
 				// video
 
@@ -68,9 +69,9 @@
 				texture.format = THREE.RGBFormat;
 				texture.generateMipmaps = false;
 
-				// left
+				scene = new THREE.Scene();
 
-				sceneLeft = new THREE.Scene();
+				// left
 
 				var geometry = new THREE.SphereGeometry( 500, 60, 40 );
 				geometry.scale( - 1, 1, 1 );
@@ -91,12 +92,11 @@
 
 				var mesh = new THREE.Mesh( geometry, material );
 				mesh.rotation.y = - Math.PI / 2;
-				sceneLeft.add( mesh );
+				mesh.layers.set( 1 ); // render for left eye only
+				scene.add( mesh );
 
 				// right
 
-				sceneRight = new THREE.Scene();
-
 				var geometry = new THREE.SphereGeometry( 500, 60, 40 );
 				geometry.scale( - 1, 1, 1 );
 
@@ -117,7 +117,8 @@
 
 				var mesh = new THREE.Mesh( geometry, material );
 				mesh.rotation.y = - Math.PI / 2;
-				sceneRight.add( mesh );
+				mesh.layers.set( 2 ); // render for right eye only
+				scene.add( mesh );
 
 				//
 
@@ -161,7 +162,7 @@
 
 				controls.update();
 
-				effect.render( [ sceneLeft, sceneRight ], camera );
+				effect.render( scene, camera );
 
 			}
 

src/cameras/StereoCamera.js

@@ -11,9 +11,11 @@ THREE.StereoCamera = function ( fov, aspect, near, far ) {
 	this.focalLength = 125;
 
 	this.cameraL = new THREE.PerspectiveCamera();
+	this.cameraL.layers.enable( 1 );
 	this.cameraL.matrixAutoUpdate = false;
 
 	this.cameraR = new THREE.PerspectiveCamera();
+	this.cameraR.layers.enable( 2 );
 	this.cameraR.matrixAutoUpdate = false;
 
 };