Use getDrawingBufferSize instead of canvas directly and minor functions renaming and restyling

src/renderers/WebGLRenderer.js

@@ -1724,7 +1724,7 @@ function WebGLRenderer( parameters ) {
 
 			if ( program.numMultiviewViews > 0 ) {
 
-				multiview.updateCameraProjectionMatrices( camera, p_uniforms );
+				multiview.updateCameraProjectionMatricesUniform( camera, p_uniforms );
 
 			} else {
 
@@ -1780,7 +1780,7 @@ function WebGLRenderer( parameters ) {
 
 				if ( program.numMultiviewViews > 0 ) {
 
-					multiview.updateCameraViewMatrices( camera, p_uniforms );
+					multiview.updateCameraViewMatricesUniform( camera, p_uniforms );
 
 				} else {
 
@@ -1986,7 +1986,7 @@ function WebGLRenderer( parameters ) {
 
 		if ( program.numMultiviewViews > 0 ) {
 
-			multiview.updateObjectMatrices( object, camera, p_uniforms );
+			multiview.updateObjectMatricesUniforms( object, camera, p_uniforms );
 
 		} else {
 

src/renderers/webgl/WebGLMultiview.js

@@ -6,6 +6,7 @@
 import { WebGLMultiviewRenderTarget } from '../WebGLMultiviewRenderTarget.js';
 import { Matrix3 } from '../../math/Matrix3.js';
 import { Matrix4 } from '../../math/Matrix4.js';
+import { Vector2 } from '../../math/Vector2.js';
 
 function WebGLMultiview( renderer, requested, options ) {
 
@@ -13,20 +14,19 @@ function WebGLMultiview( renderer, requested, options ) {
 
 	var DEFAULT_NUMVIEWS = 2;
 	var gl = renderer.context;
-	var canvas = renderer.domElement;
 	var capabilities = renderer.capabilities;
 	var properties = renderer.properties;
 
 	var renderTarget, currentRenderTarget;
-	var mat3, mat4, cameraArray;
+	var mat3, mat4, cameraArray, renderSize;
 
-	this.getMaxViews = function () {
+	function getMaxViews() {
 
 		return capabilities.maxMultiviewViews;
 
-	};
+	}
 
-	this.getNumViews = function () {
+	function getNumViews() {
 
 		if ( renderTarget && renderer.getRenderTarget() === renderTarget ) {
 
@@ -36,8 +36,7 @@ function WebGLMultiview( renderer, requested, options ) {
 
 		return 0;
 
-	};
-
+	}
 
 	function getCameraArray( camera ) {
 
@@ -51,25 +50,25 @@ function WebGLMultiview( renderer, requested, options ) {
 
 	//
 
-	this.isAvailable = function () {
+	function isAvailable() {
 
 		return capabilities.multiview;
 
-	};
+	}
 
-	this.isEnabled = function () {
+	function isEnabled() {
 
-		return requested && this.isAvailable();
+		return requested && isAvailable();
 
-	};
+	}
 
 	if ( options.debug ) {
 
-		if ( requested && ! this.isAvailable() ) {
+		if ( requested && ! isAvailable() ) {
 
 			console.warn( 'WebGLRenderer: Multiview requested but not supported by the browser' );
 
-		} else if ( requested !== false && this.isAvailable() ) {
+		} else if ( requested !== false && isAvailable() ) {
 
 			console.info( 'WebGLRenderer: Multiview enabled' );
 
@@ -78,7 +77,7 @@ function WebGLMultiview( renderer, requested, options ) {
 	}
 
 
-	this.updateCameraProjectionMatrices = function ( camera, uniforms ) {
+	function updateCameraProjectionMatricesUniform( camera, uniforms ) {
 
 		var cameras = getCameraArray( camera );
 
@@ -90,9 +89,9 @@ function WebGLMultiview( renderer, requested, options ) {
 
 		uniforms.setValue( gl, 'projectionMatrices', mat4 );
 
-	};
+	}
 
-	this.updateCameraViewMatrices = function ( camera, uniforms ) {
+	function updateCameraViewMatricesUniform( camera, uniforms ) {
 
 		var cameras = getCameraArray( camera );
 
@@ -104,9 +103,9 @@ function WebGLMultiview( renderer, requested, options ) {
 
 		uniforms.setValue( gl, 'viewMatrices', mat4 );
 
-	};
+	}
 
-	this.updateObjectMatrices = function ( object, camera, uniforms ) {
+	function updateObjectMatricesUniforms( object, camera, uniforms ) {
 
 		var cameras = getCameraArray( camera );
 
@@ -120,84 +119,98 @@ function WebGLMultiview( renderer, requested, options ) {
 		uniforms.setValue( gl, 'modelViewMatrices', mat4 );
 		uniforms.setValue( gl, 'normalMatrices', mat3 );
 
-	};
+	}
+
 
-	this.attachRenderTarget = function ( camera ) {
+	function resizeRenderTarget( camera ) {
 
-		currentRenderTarget = renderer.getRenderTarget();
+		if ( currentRenderTarget ) {
+
+			renderSize.set( currentRenderTarget.width, currentRenderTarget.height );
+
+		} else {
+
+			renderer.getDrawingBufferSize( renderSize );
 
-		// Resize if needed
-		var width = canvas.width;
-		var height = canvas.height;
+		}
 
 		if ( camera.isArrayCamera ) {
 
-			// Every camera must have the same size, so we just get the size from the first one
 			var bounds = camera.cameras[ 0 ].bounds;
 
-			width *= bounds.z;
-			height *= bounds.w;
-
+			renderTarget.setSize( bounds.z * renderSize.x, bounds.w * renderSize.y );
 			renderTarget.setNumViews( camera.cameras.length );
 
 		} else {
 
+			renderTarget.setSize( renderSize.x, renderSize.y );
 			renderTarget.setNumViews( DEFAULT_NUMVIEWS );
 
 		}
 
-		renderTarget.setSize( width, height );
+	}
+
+	function attachRenderTarget( camera ) {
 
+		currentRenderTarget = renderer.getRenderTarget();
+		resizeRenderTarget( camera );
 		renderer.setRenderTarget( renderTarget );
 
-	};
+	}
+
+	function detachRenderTarget( camera ) {
+
+		renderer.setRenderTarget( currentRenderTarget );
+		flush( camera );
 
-	this.detachRenderTarget = function ( camera ) {
+	}
 
-		var viewFramebuffers = properties.get( renderTarget ).__webglViewFramebuffers;
+	function flush( camera ) {
 
-		// @todo Use actual framebuffer
-		gl.bindFramebuffer( gl.FRAMEBUFFER, null );
+		var srcRenderTarget = renderTarget;
+		var numViews = srcRenderTarget.numViews;
+
+		var srcFramebuffers = properties.get( srcRenderTarget ).__webglViewFramebuffers;
+
+		var viewWidth = srcRenderTarget.width;
+		var viewHeight = srcRenderTarget.height;
 
 		if ( camera.isArrayCamera ) {
 
-			for ( var i = 0; i < camera.cameras.length; i ++ ) {
+			for ( var i = 0; i < numViews; i ++ ) {
 
 				var bounds = camera.cameras[ i ].bounds;
 
-				var x = bounds.x * canvas.width;
-				var y = bounds.y * canvas.height;
-				var width = bounds.z * canvas.width;
-				var height = bounds.w * canvas.height;
+				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;
 
-				gl.bindFramebuffer( gl.READ_FRAMEBUFFER, viewFramebuffers[ i ] );
-				gl.blitFramebuffer( 0, 0, width, height, x, y, x + width, y + height, gl.COLOR_BUFFER_BIT, gl.NEAREST );
+				gl.bindFramebuffer( gl.READ_FRAMEBUFFER, srcFramebuffers[ i ] );
+				gl.blitFramebuffer( 0, 0, viewWidth, viewHeight, x1, y1, x2, y2, gl.COLOR_BUFFER_BIT, gl.NEAREST );
 
 			}
 
 		} else {
 
-			// If no array camera, blit just one view
-			gl.bindFramebuffer( gl.READ_FRAMEBUFFER, viewFramebuffers[ 0 ] );
-			gl.blitFramebuffer( 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height, gl.COLOR_BUFFER_BIT, gl.NEAREST );
+			gl.bindFramebuffer( gl.READ_FRAMEBUFFER, srcFramebuffers[ 0 ] );
+			gl.blitFramebuffer( 0, 0, viewWidth, viewHeight, 0, 0, renderSize.x, renderSize.y, gl.COLOR_BUFFER_BIT, gl.NEAREST );
 
 		}
 
-		renderer.setRenderTarget( currentRenderTarget );
-
-	};
+	}
 
 
-	if ( this.isEnabled() ) {
+	if ( isEnabled() ) {
 
-		renderTarget = new WebGLMultiviewRenderTarget( canvas.width, canvas.height, this.numViews );
+		renderTarget = new WebGLMultiviewRenderTarget( 0, 0, DEFAULT_NUMVIEWS );
 
-		// Auxiliary matrices to be used when updating arrays of uniforms
+		renderSize = new Vector2();
 		mat4 = [];
 		mat3 = [];
 		cameraArray = [];
 
-		for ( var i = 0; i < this.getMaxViews(); i ++ ) {
+		for ( var i = 0; i < getMaxViews(); i ++ ) {
 
 			mat4[ i ] = new Matrix4();
 			mat3[ i ] = new Matrix3();
@@ -206,6 +219,16 @@ function WebGLMultiview( renderer, requested, options ) {
 
 	}
 
+
+	this.attachRenderTarget = attachRenderTarget;
+	this.detachRenderTarget = detachRenderTarget;
+	this.isAvailable = isAvailable;
+	this.isEnabled = isEnabled;
+	this.getNumViews = getNumViews;
+	this.updateCameraProjectionMatricesUniform = updateCameraProjectionMatricesUniform;
+	this.updateCameraViewMatricesUniform = updateCameraViewMatricesUniform;
+	this.updateObjectMatricesUniforms = updateObjectMatricesUniforms;
+
 }
 
 export { WebGLMultiview };

src/renderers/webgl/WebGLTextures.js

@@ -1260,4 +1260,4 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 }
 
-export { WebGLTextures };
+export { WebGLTextures };