Switch from camera.bounds to viewport

examples/webgl_multiple_views_multiview.html

@@ -51,6 +51,7 @@
 			var container, clock, stats;
 			var camera, scene, renderer, panel, balls;
 			var radius = 0.08;
+			var AMOUNT = 2;
 
 			var mixers = [];
 			var cameras = [];
@@ -79,7 +80,6 @@
 
 
 				var ASPECT_RATIO = window.innerWidth / window.innerHeight;
-				var AMOUNT = 2;
 				var SIZE = 1 / AMOUNT;
 				var WIDTH = ( window.innerWidth / AMOUNT ) * window.devicePixelRatio;
 				var HEIGHT = ( window.innerHeight / AMOUNT ) * window.devicePixelRatio;
@@ -89,7 +89,7 @@
 					for ( var x = 0; x < AMOUNT; x ++ ) {
 
 						var subcamera = new THREE.PerspectiveCamera( 40 + (x + y) * 20, ASPECT_RATIO, 0.25, 100 );
-						subcamera.bounds = new THREE.Vector4( x / AMOUNT, y / AMOUNT, SIZE, SIZE );
+						subcamera.viewport = new THREE.Vector4( Math.floor( x * WIDTH ), Math.floor( y * HEIGHT ), Math.ceil( WIDTH ), Math.ceil( HEIGHT ) );
 
 						subcamera.position.x = ( x / AMOUNT ) * 5 - 0.5;
 						subcamera.position.y = ( y / AMOUNT ) * 5 + 1;
@@ -147,7 +147,7 @@
 
 				var geometry = new THREE.IcosahedronBufferGeometry( radius, 2 );
 
-				var numObjects = urlParams.get('num') || 1000;
+				var numObjects = urlParams.get('num') || 1000;
 
 				for ( var i = 0; i < numObjects; i ++ ) {
 
@@ -212,13 +212,27 @@
 
 			function onWindowResize() {
 
-				camera.aspect = window.innerWidth / window.innerHeight;
+				var ASPECT_RATIO = window.innerWidth / window.innerHeight;
+				var WIDTH = ( window.innerWidth / AMOUNT ) * window.devicePixelRatio;
+				var HEIGHT = ( window.innerHeight / AMOUNT ) * window.devicePixelRatio;
+
+				camera.aspect = ASPECT_RATIO;
 				camera.updateProjectionMatrix();
 
-				for ( var i = 0; i < cameras.length; i ++ ) {
+				for ( var y = 0; y < AMOUNT; y ++ ) {
+
+					for ( var x = 0; x < AMOUNT; x ++ ) {
 
-					cameras[ i ].aspect = camera.aspect;
-					cameras[ i ].updateProjectionMatrix();
+						var subcamera = camera.cameras[ AMOUNT * y + x ];
+						subcamera.viewport.set(
+							Math.floor( x * WIDTH ),
+							Math.floor( y * HEIGHT ),
+							Math.ceil( WIDTH ),
+							Math.ceil( HEIGHT ) );
+						subcamera.aspect = ASPECT_RATIO;
+						subcamera.updateProjectionMatrix();
+
+					}
 
 				}
 
@@ -291,4 +305,4 @@
 		</script>
 
 	</body>
-</html>
+</html>

src/renderers/WebGLRenderer.js

@@ -1408,22 +1408,7 @@ function WebGLRenderer( parameters ) {
 
 					if ( object.layers.test( camera2.layers ) ) {
 
-						if ( 'viewport' in camera2 ) { // XR
-
-							state.viewport( _currentViewport.copy( camera2.viewport ) );
-
-						} else {
-
-							var bounds = camera2.bounds;
-
-							var x = bounds.x * _width;
-							var y = bounds.y * _height;
-							var width = bounds.z * _width;
-							var height = bounds.w * _height;
-
-							state.viewport( _currentViewport.set( x, y, width, height ).multiplyScalar( _pixelRatio ) );
-
-						}
+						state.viewport( _currentViewport.copy( camera2.viewport ) );
 
 						currentRenderState.setupLights( camera2 );
 

src/renderers/webgl/WebGLMultiview.js

@@ -15,11 +15,11 @@ function WebGLMultiview( renderer, requested, options ) {
 	var DEFAULT_NUMVIEWS = 2;
 	var gl = renderer.context;
 
-	var maxNumViews = capabilities.maxMultiviewViews;
-
 	var capabilities = renderer.capabilities;
 	var properties = renderer.properties;
 
+	var maxNumViews = capabilities.maxMultiviewViews;
+
 	var renderTarget, currentRenderTarget;
 	var mat3, mat4, cameraArray, renderSize;
 
@@ -133,8 +133,8 @@ function WebGLMultiview( renderer, requested, options ) {
 
 		for ( var i = 1, il = cameras.length; i < il; i ++ ) {
 
-			if ( cameras[ 0 ].bounds.z !== cameras[ i ].bounds.z ||
-				cameras[ 0 ].bounds.w !== cameras[ i ].bounds.w ) return false;
+			if ( cameras[ 0 ].viewport.z !== cameras[ i ].viewport.z ||
+				cameras[ 0 ].viewport.w !== cameras[ i ].viewport.w ) return false;
 
 		}
 
@@ -156,9 +156,10 @@ function WebGLMultiview( renderer, requested, options ) {
 
 		if ( camera.isArrayCamera ) {
 
-			var bounds = camera.cameras[ 0 ].bounds;
+			var viewport = camera.cameras[ 0 ].viewport;
+
+			renderTarget.setSize( viewport.z, viewport.w );
 
-			renderTarget.setSize( bounds.z * renderSize.x, bounds.w * renderSize.y );
 			renderTarget.setNumViews( camera.cameras.length );
 
 		} else {
@@ -203,12 +204,12 @@ function WebGLMultiview( renderer, requested, options ) {
 
 			for ( var i = 0; i < numViews; i ++ ) {
 
-				var bounds = camera.cameras[ i ].bounds;
+				var viewport = camera.cameras[ i ].viewport;
 
-				var x1 = bounds.x * renderSize.x;
-				var y1 = bounds.y * renderSize.y;
-				var x2 = x1 + bounds.z * renderSize.x;
-				var y2 = y1 + bounds.w * renderSize.y;
+				var x1 = viewport.x;
+				var y1 = viewport.y;
+				var x2 = x1 + viewport.z;
+				var y2 = y1 + viewport.w;
 
 				gl.bindFramebuffer( gl.READ_FRAMEBUFFER, srcFramebuffers[ i ] );
 				gl.blitFramebuffer( 0, 0, viewWidth, viewHeight, x1, y1, x2, y2, gl.COLOR_BUFFER_BIT, gl.NEAREST );