Fixed Mirror in VR.

examples/js/Mirror.js

@@ -27,10 +27,13 @@ THREE.Mirror = function ( width, height, options ) {
 	var lookAtPosition = new THREE.Vector3( 0, 0, - 1 );
 	var clipPlane = new THREE.Vector4();
 
+	var view = new THREE.Vector3();
+	var target = new THREE.Vector3();
+	var q = new THREE.Vector4();
+
 	var textureMatrix = new THREE.Matrix4();
 
 	var mirrorCamera = new THREE.PerspectiveCamera();
-	mirrorCamera.matrixAutoUpdate = true;
 
 	var parameters = {
 		minFilter: THREE.LinearFilter,
@@ -106,11 +109,6 @@ THREE.Mirror = function ( width, height, options ) {
 
 	function updateTextureMatrix( camera ) {
 
-		camera.updateMatrixWorld();
-
-		mirrorCamera.copy( camera );
-		mirrorCamera.updateProjectionMatrix();
-
 		scope.updateMatrixWorld();
 
 		mirrorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
@@ -121,7 +119,7 @@ THREE.Mirror = function ( width, height, options ) {
 		normal.set( 0, 0, 1 );
 		normal.applyMatrix4( rotationMatrix );
 
-		var view = mirrorWorldPosition.clone().sub( cameraWorldPosition );
+		view.subVectors( mirrorWorldPosition, cameraWorldPosition );
 		view.reflect( normal ).negate();
 		view.add( mirrorWorldPosition );
 
@@ -131,7 +129,7 @@ THREE.Mirror = function ( width, height, options ) {
 		lookAtPosition.applyMatrix4( rotationMatrix );
 		lookAtPosition.add( cameraWorldPosition );
 
-		var target = mirrorWorldPosition.clone().sub( lookAtPosition );
+		target.subVectors( mirrorWorldPosition, lookAtPosition );
 		target.reflect( normal ).negate();
 		target.add( mirrorWorldPosition );
 
@@ -141,8 +139,11 @@ THREE.Mirror = function ( width, height, options ) {
 		mirrorCamera.up.reflect( normal ).negate();
 		mirrorCamera.lookAt( target );
 
-		mirrorCamera.updateProjectionMatrix();
+		mirrorCamera.near = camera.near;
+		mirrorCamera.far = camera.far;
+
 		mirrorCamera.updateMatrixWorld();
+		mirrorCamera.updateProjectionMatrix();
 
 		// Update the texture matrix
 		textureMatrix.set(
@@ -161,7 +162,6 @@ THREE.Mirror = function ( width, height, options ) {
 
 		clipPlane.set( mirrorPlane.normal.x, mirrorPlane.normal.y, mirrorPlane.normal.z, mirrorPlane.constant );
 
-		var q = new THREE.Vector4();
 		var projectionMatrix = mirrorCamera.projectionMatrix;
 
 		q.x = ( Math.sign( clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
@@ -170,13 +170,13 @@ THREE.Mirror = function ( width, height, options ) {
 		q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
 
 		// Calculate the scaled plane vector
-		var c = clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
+		clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
 
 		// Replacing the third row of the projection matrix
-		projectionMatrix.elements[ 2 ] = c.x;
-		projectionMatrix.elements[ 6 ] = c.y;
-		projectionMatrix.elements[ 10 ] = c.z + 1.0 - clipBias;
-		projectionMatrix.elements[ 14 ] = c.w;
+		projectionMatrix.elements[ 2 ] = clipPlane.x;
+		projectionMatrix.elements[ 6 ] = clipPlane.y;
+		projectionMatrix.elements[ 10 ] = clipPlane.z + 1.0 - clipBias;
+		projectionMatrix.elements[ 14 ] = clipPlane.w;
 
 	}
 
@@ -186,9 +186,13 @@ THREE.Mirror = function ( width, height, options ) {
 
 		scope.visible = false;
 
+		var currentVrEnabled = renderer.vr.enabled;
 		var currentRenderTarget = renderer.getRenderTarget();
 
+		renderer.vr.enabled = false; // Avoid camera modification and recursion
 		renderer.render( scene, mirrorCamera, renderTarget, true );
+
+		renderer.vr.enabled = currentVrEnabled;
 		renderer.setRenderTarget( currentRenderTarget );
 
 		scope.visible = true;

examples/webgl_mirror.html

@@ -88,11 +88,21 @@
 
 				// MIRROR planes
 
-				var groundMirror = new THREE.Mirror( 100, 100, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT, color: 0x777777 } );
+				var groundMirror = new THREE.Mirror( 100, 100, {
+					clipBias: 0.003,
+					textureWidth: WIDTH * window.devicePixelRatio,
+					textureHeight: HEIGHT * window.devicePixelRatio,
+					color: 0x777777
+				} );
 				groundMirror.rotateX( - Math.PI / 2 );
 				scene.add( groundMirror );
 
-				var verticalMirror = new THREE.Mirror( 60, 60, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT, color:0x889999 } );
+				var verticalMirror = new THREE.Mirror( 60, 60, {
+					clipBias: 0.003,
+					textureWidth: WIDTH * window.devicePixelRatio,
+					textureHeight: HEIGHT * window.devicePixelRatio,
+					color: 0x889999
+				} );
 				verticalMirror.position.y = 35;
 				verticalMirror.position.z = -45;
 				scene.add( verticalMirror );

examples/webvr_sandbox.html

@@ -87,7 +87,10 @@
 
 				//
 
-				mirror = new THREE.Mirror( 1.4, 1.4, { textureWidth: window.innerWidth, textureHeight: window.innerHeight } );
+				mirror = new THREE.Mirror( 1.4, 1.4, {
+					textureWidth: window.innerWidth * window.devicePixelRatio,
+					textureHeight: window.innerHeight * window.devicePixelRatio
+				} );
 				mirror.position.x = 1;
 				mirror.position.y = 0.5;
 				mirror.position.z = -3;

src/renderers/WebGLRenderer.js

@@ -1474,8 +1474,6 @@ function WebGLRenderer( parameters ) {
 			var material = overrideMaterial === undefined ? renderItem.material : overrideMaterial;
 			var group = renderItem.group;
 
-			object.onBeforeRender( _this, scene, camera, geometry, material, group );
-
 			if ( camera.isArrayCamera ) {
 
 				var cameras = camera.cameras;
@@ -1504,8 +1502,6 @@ function WebGLRenderer( parameters ) {
 
 			}
 
-			object.onAfterRender( _this, scene, camera, geometry, material, group );
-
 		}
 
 	}
@@ -1515,6 +1511,8 @@ function WebGLRenderer( parameters ) {
 		object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
 		object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
 
+		object.onBeforeRender( _this, scene, camera, geometry, material, group );
+
 		if ( object.isImmediateRenderObject ) {
 
 			state.setMaterial( material );
@@ -1531,6 +1529,8 @@ function WebGLRenderer( parameters ) {
 
 		}
 
+		object.onAfterRender( _this, scene, camera, geometry, material, group );
+
 	}
 
 	function initMaterial( material, fog, object ) {