From 148f9b139a19e5ea2000ab411ee2339bdf86e042 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Wed, 15 May 2024 06:11:15 +0900 Subject: [PATCH] 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 --- examples/jsm/lines/LineMaterial.js | 16 +--------------- examples/jsm/lines/LineSegments2.js | 15 +++++++++++++++ examples/jsm/lines/Wireframe.js | 17 ++++++++++++++++- examples/webgl_lines_fat.html | 7 ------- examples/webgl_lines_fat_raycasting.html | 6 ------ examples/webgl_lines_fat_wireframe.html | 7 ------- 6 files changed, 32 insertions(+), 36 deletions(-) diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index 6ca42271740c5..565f2c2c2af31 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -1,25 +1,11 @@ -/** - * parameters = { - * color: , - * linewidth: , - * dashed: , - * dashScale: , - * dashSize: , - * dashOffset: , - * gapSize: , - * resolution: , // to be set by renderer - * } - */ - import { ShaderLib, ShaderMaterial, UniformsLib, UniformsUtils, - Vector2 + Vector2, } from 'three'; - UniformsLib.line = { worldUnits: { value: 1 }, diff --git a/examples/jsm/lines/LineSegments2.js b/examples/jsm/lines/LineSegments2.js index e2a3e2a14b9a2..93deee4b552d9 100644 --- a/examples/jsm/lines/LineSegments2.js +++ b/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 }; diff --git a/examples/jsm/lines/Wireframe.js b/examples/jsm/lines/Wireframe.js index cfa65aa6d62dc..d67c232d237b3 100644 --- a/examples/jsm/lines/Wireframe.js +++ b/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 }; diff --git a/examples/webgl_lines_fat.html b/examples/webgl_lines_fat.html index 76897c3c65288..ec52a35a40b9a 100644 --- a/examples/webgl_lines_fat.html +++ b/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 ); diff --git a/examples/webgl_lines_fat_raycasting.html b/examples/webgl_lines_fat_raycasting.html index 9f568afab6c6f..d779862cf511f 100644 --- a/examples/webgl_lines_fat_raycasting.html +++ b/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 ) { diff --git a/examples/webgl_lines_fat_wireframe.html b/examples/webgl_lines_fat_wireframe.html index 974129a0fae6b..4607dd9fd868e 100644 --- a/examples/webgl_lines_fat_wireframe.html +++ b/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 );