From 5511659b54a8ddb471e64193c8589b78d27ff9d1 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Mon, 19 Jun 2017 16:17:52 -0700 Subject: [PATCH] Fixed Mirror in VR. --- examples/js/Mirror.js | 34 +++++++++++++++++++--------------- examples/webgl_mirror.html | 14 ++++++++++++-- examples/webvr_sandbox.html | 5 ++++- src/renderers/WebGLRenderer.js | 8 ++++---- 4 files changed, 39 insertions(+), 22 deletions(-) diff --git a/examples/js/Mirror.js b/examples/js/Mirror.js index 09688b8bff..e1a92501a1 100644 --- a/examples/js/Mirror.js +++ b/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; diff --git a/examples/webgl_mirror.html b/examples/webgl_mirror.html index 3694c104c5..8781fc1228 100644 --- a/examples/webgl_mirror.html +++ b/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 ); diff --git a/examples/webvr_sandbox.html b/examples/webvr_sandbox.html index 9fe96d2dee..2e82495bf9 100644 --- a/examples/webvr_sandbox.html +++ b/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; diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js index 81e1f956cb..b52bb530a7 100644 --- a/src/renderers/WebGLRenderer.js +++ b/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 ) { -- GitLab