From 5c960c89a75dea01427ea34c1668ed9d0944eb4c Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sun, 12 May 2024 08:59:41 +0900 Subject: [PATCH 01/11] Remove need for assigning line2 material resolution --- examples/jsm/lines/LineMaterial.js | 11 ++++++++++- examples/webgl_lines_fat.html | 3 --- examples/webgl_lines_fat_raycasting.html | 4 ---- examples/webgl_lines_fat_wireframe.html | 6 ------ 4 files changed, 10 insertions(+), 14 deletions(-) diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index 6ca42271740c50..68bf3e559decd8 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -16,9 +16,11 @@ import { ShaderMaterial, UniformsLib, UniformsUtils, - Vector2 + Vector2, + Vector4, } from 'three'; +const _viewport = new Vector4(); UniformsLib.line = { @@ -440,6 +442,13 @@ class LineMaterial extends ShaderMaterial { } + onBeforeRender( renderer ) { + + renderer.getCurrentViewport( _viewport ); + this.uniforms.resolution.value.set( _viewport.z, _viewport.w ); + + } + get color() { return this.uniforms.diffuse.value; diff --git a/examples/webgl_lines_fat.html b/examples/webgl_lines_fat.html index 76897c3c652886..b67ae12f206100 100644 --- a/examples/webgl_lines_fat.html +++ b/examples/webgl_lines_fat.html @@ -175,9 +175,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(); diff --git a/examples/webgl_lines_fat_raycasting.html b/examples/webgl_lines_fat_raycasting.html index 9f568afab6c6f8..0ebe0d3c0c18a3 100644 --- a/examples/webgl_lines_fat_raycasting.html +++ b/examples/webgl_lines_fat_raycasting.html @@ -213,10 +213,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 974129a0fae6b9..45c6a5abe12afb 100644 --- a/examples/webgl_lines_fat_wireframe.html +++ b/examples/webgl_lines_fat_wireframe.html @@ -136,9 +136,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 +153,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 ); From 37e52aa8b448b8dfa3faabaa0a0dd85152259e69 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sun, 12 May 2024 09:11:12 +0900 Subject: [PATCH 02/11] Move use to `Line2` object --- examples/jsm/lines/Line2.js | 13 +++++++++++++ examples/jsm/lines/LineMaterial.js | 10 ---------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/examples/jsm/lines/Line2.js b/examples/jsm/lines/Line2.js index cdd1ddfd9bd0c5..ef2106b4cce156 100644 --- a/examples/jsm/lines/Line2.js +++ b/examples/jsm/lines/Line2.js @@ -1,7 +1,9 @@ import { LineSegments2 } from '../lines/LineSegments2.js'; import { LineGeometry } from '../lines/LineGeometry.js'; import { LineMaterial } from '../lines/LineMaterial.js'; +import { Vector4 } from 'three'; +const _viewport = new Vector4(); class Line2 extends LineSegments2 { constructor( geometry = new LineGeometry(), material = new LineMaterial( { color: Math.random() * 0xffffff } ) ) { @@ -14,6 +16,17 @@ class Line2 extends LineSegments2 { } + onBeforeRender( renderer ) { + + if ( this.material.uniforms.resolution ) { + + renderer.getCurrentViewport( _viewport ); + this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w ); + + } + + } + } export { Line2 }; diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index 68bf3e559decd8..c509c3d64bb403 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -17,11 +17,8 @@ import { UniformsLib, UniformsUtils, Vector2, - Vector4, } from 'three'; -const _viewport = new Vector4(); - UniformsLib.line = { worldUnits: { value: 1 }, @@ -442,13 +439,6 @@ class LineMaterial extends ShaderMaterial { } - onBeforeRender( renderer ) { - - renderer.getCurrentViewport( _viewport ); - this.uniforms.resolution.value.set( _viewport.z, _viewport.w ); - - } - get color() { return this.uniforms.diffuse.value; From 8b65951093a96b622acd34087116ccf35da7b12c Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sun, 12 May 2024 09:31:16 +0900 Subject: [PATCH 03/11] Fix wireframe mesh --- examples/jsm/lines/Wireframe.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/examples/jsm/lines/Wireframe.js b/examples/jsm/lines/Wireframe.js index cfa65aa6d62dcb..ffbeb2f128d5ad 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,17 @@ class Wireframe extends Mesh { } + onBeforeRender( renderer ) { + + if ( this.material.uniforms.resolution ) { + + renderer.getCurrentViewport( _viewport ); + this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w ); + + } + + } + } export { Wireframe }; From 58c1b698ed6eae8ea857b567a635e799c3eef3a0 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sun, 12 May 2024 09:32:54 +0900 Subject: [PATCH 04/11] Move callback from `Line2` to `LineSegments2` --- examples/jsm/lines/Line2.js | 13 ------------- examples/jsm/lines/LineSegments2.js | 13 +++++++++++++ 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/examples/jsm/lines/Line2.js b/examples/jsm/lines/Line2.js index ef2106b4cce156..cdd1ddfd9bd0c5 100644 --- a/examples/jsm/lines/Line2.js +++ b/examples/jsm/lines/Line2.js @@ -1,9 +1,7 @@ import { LineSegments2 } from '../lines/LineSegments2.js'; import { LineGeometry } from '../lines/LineGeometry.js'; import { LineMaterial } from '../lines/LineMaterial.js'; -import { Vector4 } from 'three'; -const _viewport = new Vector4(); class Line2 extends LineSegments2 { constructor( geometry = new LineGeometry(), material = new LineMaterial( { color: Math.random() * 0xffffff } ) ) { @@ -16,17 +14,6 @@ class Line2 extends LineSegments2 { } - onBeforeRender( renderer ) { - - if ( this.material.uniforms.resolution ) { - - renderer.getCurrentViewport( _viewport ); - this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w ); - - } - - } - } export { Line2 }; diff --git a/examples/jsm/lines/LineSegments2.js b/examples/jsm/lines/LineSegments2.js index e2a3e2a14b9a24..c8f35de0e235cf 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,17 @@ class LineSegments2 extends Mesh { } + onBeforeRender( renderer ) { + + if ( this.material.uniforms.resolution ) { + + renderer.getCurrentViewport( _viewport ); + this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w ); + + } + + } + } export { LineSegments2 }; From b2ceb61ec4a0eb84344ab52c558e67b132f5c105 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sun, 12 May 2024 11:33:12 +0900 Subject: [PATCH 05/11] Remove another use of "resolution" --- examples/webgl_lines_fat.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/examples/webgl_lines_fat.html b/examples/webgl_lines_fat.html index b67ae12f206100..de3deb3bc0e6cf 100644 --- a/examples/webgl_lines_fat.html +++ b/examples/webgl_lines_fat.html @@ -194,9 +194,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 ); From 1a597c6553933a1a2ee8ce732b5b4a1c807fda04 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sun, 12 May 2024 12:30:09 +0900 Subject: [PATCH 06/11] Remove comments --- examples/jsm/lines/LineMaterial.js | 2 +- examples/webgl_lines_fat.html | 1 - examples/webgl_lines_fat_raycasting.html | 2 -- examples/webgl_lines_fat_wireframe.html | 1 - 4 files changed, 1 insertion(+), 5 deletions(-) diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index c509c3d64bb403..e125145224d2e5 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -7,7 +7,7 @@ * dashSize: , * dashOffset: , * gapSize: , - * resolution: , // to be set by renderer + * resolution: , * } */ diff --git a/examples/webgl_lines_fat.html b/examples/webgl_lines_fat.html index de3deb3bc0e6cf..ec52a35a40b9a4 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, diff --git a/examples/webgl_lines_fat_raycasting.html b/examples/webgl_lines_fat_raycasting.html index 0ebe0d3c0c18a3..d779862cf511fd 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 } ); diff --git a/examples/webgl_lines_fat_wireframe.html b/examples/webgl_lines_fat_wireframe.html index 45c6a5abe12afb..4607dd9fd868ee 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 } ); From fc29a0e516850c2a99aa1f5793d4c736efe0c3e3 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Mon, 13 May 2024 12:59:57 +0900 Subject: [PATCH 07/11] Multiply out the pixel ratio --- examples/jsm/lines/LineSegments2.js | 2 +- examples/jsm/lines/Wireframe.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/jsm/lines/LineSegments2.js b/examples/jsm/lines/LineSegments2.js index c8f35de0e235cf..b8954b257c45b4 100644 --- a/examples/jsm/lines/LineSegments2.js +++ b/examples/jsm/lines/LineSegments2.js @@ -362,7 +362,7 @@ class LineSegments2 extends Mesh { if ( this.material.uniforms.resolution ) { - renderer.getCurrentViewport( _viewport ); + renderer.getCurrentViewport( _viewport ).multiplyScalar( 1 / renderer.getPixelRatio() ); this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w ); } diff --git a/examples/jsm/lines/Wireframe.js b/examples/jsm/lines/Wireframe.js index ffbeb2f128d5ad..17332013dea39d 100644 --- a/examples/jsm/lines/Wireframe.js +++ b/examples/jsm/lines/Wireframe.js @@ -57,7 +57,7 @@ class Wireframe extends Mesh { if ( this.material.uniforms.resolution ) { - renderer.getCurrentViewport( _viewport ); + renderer.getCurrentViewport( _viewport ).multiplyScalar( 1 / renderer.getPixelRatio() ); this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w ); } From 8e597306f8c149cda87046c208e2b45b263ee5fb Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Tue, 14 May 2024 20:38:40 +0900 Subject: [PATCH 08/11] use "getViewport" --- examples/jsm/lines/LineSegments2.js | 2 +- examples/jsm/lines/Wireframe.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/jsm/lines/LineSegments2.js b/examples/jsm/lines/LineSegments2.js index b8954b257c45b4..d40a46e517051a 100644 --- a/examples/jsm/lines/LineSegments2.js +++ b/examples/jsm/lines/LineSegments2.js @@ -362,7 +362,7 @@ class LineSegments2 extends Mesh { if ( this.material.uniforms.resolution ) { - renderer.getCurrentViewport( _viewport ).multiplyScalar( 1 / renderer.getPixelRatio() ); + renderer.getViewport( _viewport ); this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w ); } diff --git a/examples/jsm/lines/Wireframe.js b/examples/jsm/lines/Wireframe.js index 17332013dea39d..55ef56929078d9 100644 --- a/examples/jsm/lines/Wireframe.js +++ b/examples/jsm/lines/Wireframe.js @@ -57,7 +57,7 @@ class Wireframe extends Mesh { if ( this.material.uniforms.resolution ) { - renderer.getCurrentViewport( _viewport ).multiplyScalar( 1 / renderer.getPixelRatio() ); + renderer.getViewport( _viewport ); this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w ); } From 8c3bebd5cad12fd4ac32acff1730981edfec61e7 Mon Sep 17 00:00:00 2001 From: WestLangley Date: Tue, 14 May 2024 13:11:48 -0400 Subject: [PATCH 09/11] Remove outdated comments --- examples/jsm/lines/LineMaterial.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index e125145224d2e5..565f2c2c2af31b 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -1,16 +1,3 @@ -/** - * parameters = { - * color: , - * linewidth: , - * dashed: , - * dashScale: , - * dashSize: , - * dashOffset: , - * gapSize: , - * resolution: , - * } - */ - import { ShaderLib, ShaderMaterial, From 96d4736a7e5ca1616eebed5424d84562b8bd1914 Mon Sep 17 00:00:00 2001 From: WestLangley Date: Tue, 14 May 2024 16:38:13 -0400 Subject: [PATCH 10/11] Accommodate WebGPURenderer --- examples/jsm/lines/LineSegments2.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/jsm/lines/LineSegments2.js b/examples/jsm/lines/LineSegments2.js index d40a46e517051a..93deee4b552d92 100644 --- a/examples/jsm/lines/LineSegments2.js +++ b/examples/jsm/lines/LineSegments2.js @@ -360,7 +360,9 @@ class LineSegments2 extends Mesh { onBeforeRender( renderer ) { - if ( this.material.uniforms.resolution ) { + const uniforms = this.material.uniforms; + + if ( uniforms && uniforms.resolution ) { renderer.getViewport( _viewport ); this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w ); From 36b1499bd46880a8157f074eae588cd95869c04a Mon Sep 17 00:00:00 2001 From: WestLangley Date: Tue, 14 May 2024 16:39:53 -0400 Subject: [PATCH 11/11] Accommodate WebGPURenderer --- examples/jsm/lines/Wireframe.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/jsm/lines/Wireframe.js b/examples/jsm/lines/Wireframe.js index 55ef56929078d9..d67c232d237b3b 100644 --- a/examples/jsm/lines/Wireframe.js +++ b/examples/jsm/lines/Wireframe.js @@ -55,7 +55,9 @@ class Wireframe extends Mesh { onBeforeRender( renderer ) { - if ( this.material.uniforms.resolution ) { + const uniforms = this.material.uniforms; + + if ( uniforms && uniforms.resolution ) { renderer.getViewport( _viewport ); this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w );