Merge pull request #13593 from WestLangley/dev-viewport

Make WebGLRenderer.setViewport(), setScissor() relative to lower-left corner

Author: WestLangley

examples/webgl_lines_fat.html

@@ -205,9 +205,9 @@
 
 				renderer.setScissorTest( true );
 
-				renderer.setScissor( 20, window.innerHeight - insetHeight - 20, insetWidth, insetHeight );
+				renderer.setScissor( 20, 20, insetWidth, insetHeight );
 
-				renderer.setViewport( 20, window.innerHeight - insetHeight - 20, insetWidth, insetHeight );
+				renderer.setViewport( 20, 20, insetWidth, insetHeight );
 
 				camera2.position.copy( camera.position );
 				camera2.quaternion.copy( camera.quaternion );

examples/webgl_multiple_elements.html

@@ -224,10 +224,10 @@
 					var width = rect.right - rect.left;
 					var height = rect.bottom - rect.top;
 					var left = rect.left;
-					var top = rect.top;
+					var bottom = renderer.domElement.clientHeight - rect.bottom;
 
-					renderer.setViewport( left, top, width, height );
-					renderer.setScissor( left, top, width, height );
+					renderer.setViewport( left, bottom, width, height );
+					renderer.setScissor( left, bottom, width, height );
 
 					var camera = scene.userData.camera;
 

examples/webgl_multiple_elements_text.html

@@ -252,10 +252,10 @@
 					var width = rect.right - rect.left;
 					var height = rect.bottom - rect.top;
 					var left = rect.left;
-					var top = rect.top;
+					var bottom = renderer.domElement.clientHeight - rect.bottom;
 
-					renderer.setViewport( left, top, width, height );
-					renderer.setScissor( left, top, width, height );
+					renderer.setViewport( left, bottom, width, height );
+					renderer.setScissor( left, bottom, width, height );
 
 					renderer.render( scene, scene.userData.camera );
 

examples/webgl_multiple_views.html

@@ -57,7 +57,7 @@
 			var views = [
 				{
 					left: 0,
-					top: 0,
+					bottom: 0,
 					width: 0.5,
 					height: 1.0,
 					background: new THREE.Color( 0.5, 0.5, 0.7 ),
@@ -74,7 +74,7 @@
 				},
 				{
 					left: 0.5,
-					top: 0.5,
+					bottom: 0,
 					width: 0.5,
 					height: 0.5,
 					background: new THREE.Color( 0.7, 0.5, 0.5 ),
@@ -91,7 +91,7 @@
 				},
 				{
 					left: 0.5,
-					top: 0,
+					bottom: 0.5,
 					width: 0.5,
 					height: 0.5,
 					background: new THREE.Color( 0.5, 0.7, 0.7 ),
@@ -280,12 +280,12 @@
 					view.updateCamera( camera, scene, mouseX, mouseY );
 
 					var left = Math.floor( windowWidth * view.left );
-					var top = Math.floor( windowHeight * view.top );
+					var bottom = Math.floor( windowHeight * view.bottom );
 					var width = Math.floor( windowWidth * view.width );
 					var height = Math.floor( windowHeight * view.height );
 
-					renderer.setViewport( left, top, width, height );
-					renderer.setScissor( left, top, width, height );
+					renderer.setViewport( left, bottom, width, height );
+					renderer.setScissor( left, bottom, width, height );
 					renderer.setScissorTest( true );
 					renderer.setClearColor( view.background );
 

src/renderers/WebGLRenderer.js

@@ -426,14 +426,14 @@ function WebGLRenderer( parameters ) {
 
 	this.setViewport = function ( x, y, width, height ) {
 
-		_viewport.set( x, _height - y - height, width, height );
+		_viewport.set( x, y, width, height );
 		state.viewport( _currentViewport.copy( _viewport ).multiplyScalar( _pixelRatio ) );
 
 	};
 
 	this.setScissor = function ( x, y, width, height ) {
 
-		_scissor.set( x, _height - y - height, width, height );
+		_scissor.set( x, y, width, height );
 		state.scissor( _currentScissor.copy( _scissor ).multiplyScalar( _pixelRatio ) );
 
 	};