Browse Source

Fixed examples relying on inverted-y setViewport()

Mr.doob 8 years ago
parent
commit
447f8e4189

+ 1 - 4
examples/webgl_camera_array.html

@@ -36,11 +36,8 @@
 
 
 					for ( var x = 0; x < AMOUNT; x ++ ) {
 					for ( var x = 0; x < AMOUNT; x ++ ) {
 
 
-						var xx = x / AMOUNT;
-						var yy = 1 - ( ( y + 1 ) / AMOUNT ); // TODO Make this saner in WebGLRenderer?
-
 						var subcamera = new THREE.PerspectiveCamera( 40, ASPECT_RATIO, 0.1, 10 );
 						var subcamera = new THREE.PerspectiveCamera( 40, ASPECT_RATIO, 0.1, 10 );
-						subcamera.bounds = new THREE.Vector4( xx, yy, SIZE, SIZE );
+						subcamera.bounds = new THREE.Vector4( x / AMOUNT, y / AMOUNT, SIZE, SIZE );
 						subcamera.position.z = 3;
 						subcamera.position.z = 3;
 						subcamera.updateMatrixWorld();
 						subcamera.updateMatrixWorld();
 						cameras.push( subcamera );
 						cameras.push( subcamera );

+ 3 - 3
examples/webgl_multiple_elements.html

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

+ 8 - 5
examples/webgl_multiple_elements_text.html

@@ -115,8 +115,10 @@
 				var balls = 20;
 				var balls = 20;
 				var size = .25;
 				var size = .25;
 
 
-				var colors = [ 'rgb(0,127,255)', 'rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,255,255)',
-        				       'rgb(255,0,255)', 'rgb(255,0,127)', 'rgb(255,255,0)', 'rgb(0,255,127)' ];
+				var colors = [
+					'rgb(0,127,255)', 'rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,255,255)',
+					'rgb(255,0,255)', 'rgb(255,0,127)', 'rgb(255,255,0)', 'rgb(0,255,127)'
+				];
 
 
 				canvas = document.getElementById( 'c' );
 				canvas = document.getElementById( 'c' );
 
 
@@ -244,9 +246,10 @@
 					var width  = rect.right - rect.left;
 					var width  = rect.right - rect.left;
 					var height = rect.bottom - rect.top;
 					var height = rect.bottom - rect.top;
 					var left   = rect.left;
 					var left   = rect.left;
-					var bottom = renderer.domElement.clientHeight - rect.bottom;
-					renderer.setViewport( left, bottom, width, height );
-					renderer.setScissor( left, bottom, width, height );
+					var top    = rect.top;
+
+					renderer.setViewport( left, top, width, height );
+					renderer.setScissor( left, top, width, height );
 
 
 					renderer.render( scene, scene.userData.camera );
 					renderer.render( scene, scene.userData.camera );
 
 

+ 7 - 7
examples/webgl_multiple_views.html

@@ -23,7 +23,6 @@
 			}
 			}
 
 
 			a {
 			a {
-
 				color: #0080ff;
 				color: #0080ff;
 			}
 			}
 
 
@@ -56,7 +55,7 @@
 			var views = [
 			var views = [
 				{
 				{
 					left: 0,
 					left: 0,
-					bottom: 0,
+					top: 0,
 					width: 0.5,
 					width: 0.5,
 					height: 1.0,
 					height: 1.0,
 					background: new THREE.Color().setRGB( 0.5, 0.5, 0.7 ),
 					background: new THREE.Color().setRGB( 0.5, 0.5, 0.7 ),
@@ -71,7 +70,7 @@
 				},
 				},
 				{
 				{
 					left: 0.5,
 					left: 0.5,
-					bottom: 0,
+					top: 0.5,
 					width: 0.5,
 					width: 0.5,
 					height: 0.5,
 					height: 0.5,
 					background: new THREE.Color().setRGB( 0.7, 0.5, 0.5 ),
 					background: new THREE.Color().setRGB( 0.7, 0.5, 0.5 ),
@@ -86,7 +85,7 @@
 				},
 				},
 				{
 				{
 					left: 0.5,
 					left: 0.5,
-					bottom: 0.5,
+					top: 0,
 					width: 0.5,
 					width: 0.5,
 					height: 0.5,
 					height: 0.5,
 					background: new THREE.Color().setRGB( 0.5, 0.7, 0.7 ),
 					background: new THREE.Color().setRGB( 0.5, 0.7, 0.7 ),
@@ -276,11 +275,12 @@
 					view.updateCamera( camera, scene, mouseX, mouseY );
 					view.updateCamera( camera, scene, mouseX, mouseY );
 
 
 					var left   = Math.floor( windowWidth  * view.left );
 					var left   = Math.floor( windowWidth  * view.left );
-					var bottom = Math.floor( windowHeight * view.bottom );
+					var top    = Math.floor( windowHeight * view.top );
 					var width  = Math.floor( windowWidth  * view.width );
 					var width  = Math.floor( windowWidth  * view.width );
 					var height = Math.floor( windowHeight * view.height );
 					var height = Math.floor( windowHeight * view.height );
-					renderer.setViewport( left, bottom, width, height );
-					renderer.setScissor( left, bottom, width, height );
+
+					renderer.setViewport( left, top, width, height );
+					renderer.setScissor( left, top, width, height );
 					renderer.setScissorTest( true );
 					renderer.setScissorTest( true );
 					renderer.setClearColor( view.background );
 					renderer.setClearColor( view.background );