Examples: Remove need for manually assigning Line2 material resolution (#28343)

* Remove need for assigning line2 material resolution

* Move use to `Line2` object

* Fix wireframe mesh

* Move callback from `Line2` to `LineSegments2`

* Remove another use of "resolution"

* Remove comments

* Multiply out the pixel ratio

* use "getViewport"

* Remove outdated comments

* Accommodate WebGPURenderer

* Accommodate WebGPURenderer

---------

Co-authored-by: WestLangley <[email protected]>

examples/jsm/lines/LineMaterial.js

@@ -1,25 +1,11 @@
-/**
- * parameters = {
- *  color: <hex>,
- *  linewidth: <float>,
- *  dashed: <boolean>,
- *  dashScale: <float>,
- *  dashSize: <float>,
- *  dashOffset: <float>,
- *  gapSize: <float>,
- *  resolution: <Vector2>, // to be set by renderer
- * }
- */
-
 import {
 	ShaderLib,
 	ShaderMaterial,
 	UniformsLib,
 	UniformsUtils,
-	Vector2
+	Vector2,
 } from 'three';
 
-
 UniformsLib.line = {
 
 	worldUnits: { value: 1 },

examples/jsm/lines/LineSegments2.js

@@ -13,6 +13,8 @@ import {
 import { LineSegmentsGeometry } from '../lines/LineSegmentsGeometry.js';
 import { LineMaterial } from '../lines/LineMaterial.js';
 
+const _viewport = new Vector4();
+
 const _start = new Vector3();
 const _end = new Vector3();
 
@@ -356,6 +358,19 @@ class LineSegments2 extends Mesh {
 
 	}
 
+	onBeforeRender( renderer ) {
+
+		const uniforms = this.material.uniforms;
+
+		if ( uniforms && uniforms.resolution ) {
+
+			renderer.getViewport( _viewport );
+			this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w );
+
+		}
+
+	}
+
 }
 
 export { LineSegments2 };

examples/jsm/lines/Wireframe.js

@@ -2,13 +2,15 @@ import {
 	InstancedInterleavedBuffer,
 	InterleavedBufferAttribute,
 	Mesh,
-	Vector3
+	Vector3,
+	Vector4
 } from 'three';
 import { LineSegmentsGeometry } from '../lines/LineSegmentsGeometry.js';
 import { LineMaterial } from '../lines/LineMaterial.js';
 
 const _start = new Vector3();
 const _end = new Vector3();
+const _viewport = new Vector4();
 
 class Wireframe extends Mesh {
 
@@ -51,6 +53,19 @@ class Wireframe extends Mesh {
 
 	}
 
+	onBeforeRender( renderer ) {
+
+		const uniforms = this.material.uniforms;
+
+		if ( uniforms && uniforms.resolution ) {
+
+			renderer.getViewport( _viewport );
+			this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w );
+
+		}
+
+	}
+
 }
 
 export { Wireframe };

examples/webgl_lines_fat.html

@@ -108,7 +108,6 @@
 					linewidth: 5, // in world units with size attenuation, pixels otherwise
 					vertexColors: true,
 
-					//resolution:  // to be set by renderer, eventually
 					dashed: false,
 					alphaToCoverage: true,
 
@@ -175,9 +174,6 @@
 
 				controls.update();
 
-				// renderer will set this eventually
-				matLine.resolution.set( window.innerWidth, window.innerHeight ); // resolution of the viewport
-
 				gpuPanel.startQuery();
 				renderer.render( scene, camera );
 				gpuPanel.endQuery();
@@ -197,9 +193,6 @@
 				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 );

examples/webgl_lines_fat_raycasting.html

@@ -60,7 +60,6 @@
 				worldUnits: true,
 				vertexColors: true,
 
-				//resolution:  // to be set by renderer, eventually
 				alphaToCoverage: true,
 
 			} );
@@ -75,7 +74,6 @@
 				opacity: 0.2,
 				depthTest: false,
 				visible: false,
-				//resolution:  // to be set by renderer, eventually
 
 			} );
 
@@ -213,10 +211,6 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				// renderer will set this eventually
-				matLine.resolution.set( window.innerWidth, window.innerHeight );
-				matThresholdLine.resolution.set( window.innerWidth, window.innerHeight );
-
 			}
 
 			function onPointerMove( event ) {

examples/webgl_lines_fat_wireframe.html

@@ -78,7 +78,6 @@
 
 					color: 0x4080ff,
 					linewidth: 5, // in pixels
-					//resolution:  // to be set by renderer, eventually
 					dashed: false
 
 				} );
@@ -136,9 +135,6 @@
 
 				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
@@ -156,9 +152,6 @@
 				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 );