Merge pull request #13734 from WestLangley/dev-fat_lines

Fat Lines Example: Experiment with different aspect ratio for inset viewport

examples/webgl_lines_fat.html

@@ -57,7 +57,7 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var line, renderer, scene, camera, controls;
+			var line, renderer, scene, camera, camera2, controls;
 			var line1;
 			var matLine, matLineBasic, matLineDashed;
 			var stats;
@@ -83,6 +83,9 @@
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( - 40, 0, 60 );
 
+				camera2 = new THREE.PerspectiveCamera( 40, 1, 1, 1000 );
+				camera2.position.copy( camera.position );
+
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 10;
 				controls.maxDistance = 500;
@@ -165,9 +168,12 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				insetWidth = window.innerWidth / 4;
+				insetWidth = window.innerHeight / 4; // square
 				insetHeight = window.innerHeight / 4;
 
+				camera2.aspect = insetWidth / insetHeight;
+				camera2.updateProjectionMatrix();
+
 			}
 
 			function animate() {
@@ -178,17 +184,18 @@
 
 				// main scene
 
-				// renderer will set this eventually
-				matLine.resolution.set( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000, 0 );
 
 				renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
 
+				// renderer will set this eventually
+				matLine.resolution.set( window.innerWidth, window.innerHeight ); // resolution of the viewport
+
 				renderer.render( scene, camera );
 
 				// inset scene
 
-				// renderer will set this eventually
-				//matLine.resolution.set( insetWidth, insetHeight ); // not sure what behavior we want here...
+				renderer.setClearColor( 0x222222, 1 );
 
 				renderer.clearDepth(); // important!
 
@@ -198,7 +205,13 @@
 
 				renderer.setViewport( 20, window.innerHeight - insetHeight - 20, insetWidth, insetHeight );
 
-				renderer.render( scene, camera );
+				camera2.position.copy( camera.position );
+				camera2.quaternion.copy( camera.quaternion );
+
+				// renderer will set this eventually
+				matLine.resolution.set( insetWidth, insetHeight ); // resolution of the inset viewport
+
+				renderer.render( scene, camera2 );
 
 				renderer.setScissorTest( false );