From e36eb659be53e41ba05e5af6d9ee00e230a391f5 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Tue, 25 Jun 2019 20:11:30 -0700 Subject: [PATCH 01/19] Add feature to LineMaterial to support toggling screen-space line width --- examples/js/lines/LineMaterial.js | 22 +++++++++++++++++++++- examples/webgl_lines_fat.html | 9 ++++++++- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js index 2e0fb2bcb160e1..d4be621c7dc3af 100644 --- a/examples/js/lines/LineMaterial.js +++ b/examples/js/lines/LineMaterial.js @@ -14,6 +14,7 @@ THREE.UniformsLib.line = { + screenSpaceWidth: { value: 1 }, linewidth: { value: 1 }, resolution: { value: new THREE.Vector2( 1, 1 ) }, dashScale: { value: 1 }, @@ -38,6 +39,7 @@ THREE.ShaderLib[ 'line' ] = { #include #include + uniform float screenSpaceWidth; uniform float linewidth; uniform vec2 resolution; @@ -162,7 +164,7 @@ THREE.ShaderLib[ 'line' ] = { vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; // back to clip space - offset *= clip.w; + offset = mix(offset * 50.0, offset * clip.w, screenSpaceWidth); clip.xy += offset; @@ -272,6 +274,24 @@ THREE.LineMaterial = function ( parameters ) { }, + screenSpaceWidth: { + + enumerable: true, + + get: function () { + + return this.uniforms.screenSpaceWidth.value === 1; + + }, + + set: function ( value ) { + + this.uniforms.screenSpaceWidth.value = value ? 1 : 0; + + } + + }, + linewidth: { enumerable: true, diff --git a/examples/webgl_lines_fat.html b/examples/webgl_lines_fat.html index 79fadd83420d39..54bd062c4e3f85 100644 --- a/examples/webgl_lines_fat.html +++ b/examples/webgl_lines_fat.html @@ -193,6 +193,7 @@ var param = { 'line type': 0, + 'screen space width': true, 'width (px)': 5, 'dashed': false, 'dash scale': 1, @@ -222,7 +223,13 @@ } ); - gui.add( param, 'width (px)', 1, 10 ).onChange( function ( val ) { + gui.add( param, 'screen space width' ).onChange( function ( val ) { + + matLine.screenSpaceWidth = val; + + } ); + + gui.add( param, 'width (px)', 1, 500 ).onChange( function ( val ) { matLine.linewidth = val; From 72fcf4876c3547a5925666c50b4a4d7d6ea7c304 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Tue, 25 Jun 2019 20:12:39 -0700 Subject: [PATCH 02/19] Change lines parameter --- examples/webgl_lines_fat.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/webgl_lines_fat.html b/examples/webgl_lines_fat.html index 54bd062c4e3f85..0073ff9307ac64 100644 --- a/examples/webgl_lines_fat.html +++ b/examples/webgl_lines_fat.html @@ -229,7 +229,7 @@ } ); - gui.add( param, 'width (px)', 1, 500 ).onChange( function ( val ) { + gui.add( param, 'width (px)', 1, 20 ).onChange( function ( val ) { matLine.linewidth = val; From 3c35275e15cdaa2776fc6531494132520d791c91 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Tue, 25 Jun 2019 20:38:25 -0700 Subject: [PATCH 03/19] remove magic number scaling --- examples/js/lines/LineMaterial.js | 4 ++-- examples/webgl_lines_fat.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js index d4be621c7dc3af..b75c2b666827d1 100644 --- a/examples/js/lines/LineMaterial.js +++ b/examples/js/lines/LineMaterial.js @@ -158,13 +158,13 @@ THREE.ShaderLib[ 'line' ] = { offset *= linewidth; // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... - offset /= resolution.y; + if (screenSpaceWidth == 1.0) offset /= resolution.y; // select end vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; // back to clip space - offset = mix(offset * 50.0, offset * clip.w, screenSpaceWidth); + offset = mix(offset * 1.0, offset * clip.w, screenSpaceWidth); clip.xy += offset; diff --git a/examples/webgl_lines_fat.html b/examples/webgl_lines_fat.html index 0073ff9307ac64..62e81f3037a705 100644 --- a/examples/webgl_lines_fat.html +++ b/examples/webgl_lines_fat.html @@ -229,7 +229,7 @@ } ); - gui.add( param, 'width (px)', 1, 20 ).onChange( function ( val ) { + gui.add( param, 'width (px)', 1, 10 ).onChange( function ( val ) { matLine.linewidth = val; From 0ac4b23afb2925f043d6b40abe9b02e340245b68 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Tue, 25 Jun 2019 21:16:33 -0700 Subject: [PATCH 04/19] change if to use mix function --- examples/js/lines/LineMaterial.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js index b75c2b666827d1..4dce1d05627b5f 100644 --- a/examples/js/lines/LineMaterial.js +++ b/examples/js/lines/LineMaterial.js @@ -158,7 +158,7 @@ THREE.ShaderLib[ 'line' ] = { offset *= linewidth; // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... - if (screenSpaceWidth == 1.0) offset /= resolution.y; + offset = mix(offset, offset / resolution.y, screenSpaceWidth); // select end vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; From 0b10552e40277bf0079404f27cf143a49f39db74 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Tue, 25 Jun 2019 21:21:35 -0700 Subject: [PATCH 05/19] build jsm --- examples/jsm/lines/LineMaterial.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index b4a6b740a0fc94..e164f89f8303ee 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -22,6 +22,7 @@ import { UniformsLib.line = { + screenSpaceWidth: { value: 1 }, linewidth: { value: 1 }, resolution: { value: new Vector2( 1, 1 ) }, dashScale: { value: 1 }, @@ -46,6 +47,7 @@ ShaderLib[ 'line' ] = { #include #include + uniform float screenSpaceWidth; uniform float linewidth; uniform vec2 resolution; @@ -164,13 +166,13 @@ ShaderLib[ 'line' ] = { offset *= linewidth; // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... - offset /= resolution.y; + offset = mix(offset, offset / resolution.y, screenSpaceWidth); // select end vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; // back to clip space - offset *= clip.w; + offset = mix(offset * 1.0, offset * clip.w, screenSpaceWidth); clip.xy += offset; @@ -280,6 +282,24 @@ var LineMaterial = function ( parameters ) { }, + screenSpaceWidth: { + + enumerable: true, + + get: function () { + + return this.uniforms.screenSpaceWidth.value === 1; + + }, + + set: function ( value ) { + + this.uniforms.screenSpaceWidth.value = value ? 1 : 0; + + } + + }, + linewidth: { enumerable: true, From b931474bf6b127b2e7d7b95362766f53daef3310 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Mon, 1 Jul 2019 13:42:40 -0700 Subject: [PATCH 06/19] rename variable to size attenuation, use defines --- examples/js/lines/LineMaterial.js | 35 ++++++++++++++++++++++++------- examples/webgl_lines_fat.html | 7 ++++--- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js index 4dce1d05627b5f..1bf7faee717b9d 100644 --- a/examples/js/lines/LineMaterial.js +++ b/examples/js/lines/LineMaterial.js @@ -14,7 +14,7 @@ THREE.UniformsLib.line = { - screenSpaceWidth: { value: 1 }, + sizeAttenuation: { value: 1 }, linewidth: { value: 1 }, resolution: { value: new THREE.Vector2( 1, 1 ) }, dashScale: { value: 1 }, @@ -39,7 +39,7 @@ THREE.ShaderLib[ 'line' ] = { #include #include - uniform float screenSpaceWidth; + uniform float sizeAttenuation; uniform float linewidth; uniform vec2 resolution; @@ -157,14 +157,25 @@ THREE.ShaderLib[ 'line' ] = { // adjust for linewidth offset *= linewidth; - // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... - offset = mix(offset, offset / resolution.y, screenSpaceWidth); // select end vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; + #ifdef SIZE_ATTENUATION + if (!perspective) { + // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... + offset /= resolution.y; + + // back to clip space + offset *= clip.w; + } + #else + // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... + offset /= resolution.y; + // back to clip space - offset = mix(offset * 1.0, offset * clip.w, screenSpaceWidth); + offset *= clip.w; + #endif clip.xy += offset; @@ -274,19 +285,27 @@ THREE.LineMaterial = function ( parameters ) { }, - screenSpaceWidth: { + sizeAttenuation: { enumerable: true, get: function () { - return this.uniforms.screenSpaceWidth.value === 1; + return 'SIZE_ATTENUATION' in this.defines; }, set: function ( value ) { - this.uniforms.screenSpaceWidth.value = value ? 1 : 0; + if ( value === true ) { + + this.defines.SIZE_ATTENUATION = ''; + + } else { + + delete this.defines.SIZE_ATTENUATION; + + } } diff --git a/examples/webgl_lines_fat.html b/examples/webgl_lines_fat.html index 62e81f3037a705..9240260895a6a6 100644 --- a/examples/webgl_lines_fat.html +++ b/examples/webgl_lines_fat.html @@ -193,7 +193,7 @@ var param = { 'line type': 0, - 'screen space width': true, + 'size attenuation': false, 'width (px)': 5, 'dashed': false, 'dash scale': 1, @@ -223,9 +223,10 @@ } ); - gui.add( param, 'screen space width' ).onChange( function ( val ) { + gui.add( param, 'size attenuation' ).onChange( function ( val ) { - matLine.screenSpaceWidth = val; + matLine.sizeAttenuation = val; + matLine.needsUpdate = true; } ); From 8ae2c60bb8647b804a39e58a39cf434cc3dd922f Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Mon, 1 Jul 2019 14:41:08 -0700 Subject: [PATCH 07/19] Add perspective attenuation with width in world units --- examples/js/lines/LineMaterial.js | 50 ++++++++++++++++++++++++------- 1 file changed, 39 insertions(+), 11 deletions(-) diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js index 1bf7faee717b9d..5e42147c34b808 100644 --- a/examples/js/lines/LineMaterial.js +++ b/examples/js/lines/LineMaterial.js @@ -118,6 +118,43 @@ THREE.ShaderLib[ 'line' ] = { } + #ifdef SIZE_ATTENUATION + + // direction + vec2 dir = end.xy - start.xy; + + // account for clip-space aspect ratio + dir = normalize( dir ); + + // perpendicular to dir + vec2 offset = vec2( dir.y, - dir.x ); + + // sign flip + if ( position.x < 0.0 ) offset *= - 1.0; + + // endcaps + if ( position.y < 0.0 ) { + + offset += - dir; + + } else if ( position.y > 1.0 ) { + + offset += dir; + + } + + // adjust for linewidth + offset *= linewidth * 0.5; + + // select end + vec4 clip = ( position.y < 0.5 ) ? start : end; + + clip.xy += offset; + + clip = projectionMatrix * clip; + + #else + // clip space vec4 clipStart = projectionMatrix * start; vec4 clipEnd = projectionMatrix * end; @@ -157,28 +194,19 @@ THREE.ShaderLib[ 'line' ] = { // adjust for linewidth offset *= linewidth; - // select end vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; - #ifdef SIZE_ATTENUATION - if (!perspective) { - // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... - offset /= resolution.y; - - // back to clip space - offset *= clip.w; - } - #else // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... offset /= resolution.y; // back to clip space offset *= clip.w; - #endif clip.xy += offset; + #endif + gl_Position = clip; vec4 mvPosition = ( position.y < 0.5 ) ? start : end; // this is an approximation From 50eb576a8de7fd0cea7b37aa58f57e929253d2d7 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Mon, 1 Jul 2019 14:57:54 -0700 Subject: [PATCH 08/19] Update comments --- examples/js/lines/LineMaterial.js | 2 -- examples/webgl_lines_fat.html | 6 +++--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js index 5e42147c34b808..f8ecee7296380b 100644 --- a/examples/js/lines/LineMaterial.js +++ b/examples/js/lines/LineMaterial.js @@ -122,8 +122,6 @@ THREE.ShaderLib[ 'line' ] = { // direction vec2 dir = end.xy - start.xy; - - // account for clip-space aspect ratio dir = normalize( dir ); // perpendicular to dir diff --git a/examples/webgl_lines_fat.html b/examples/webgl_lines_fat.html index 9240260895a6a6..8885c8318861cd 100644 --- a/examples/webgl_lines_fat.html +++ b/examples/webgl_lines_fat.html @@ -90,7 +90,7 @@ matLine = new LineMaterial( { color: 0xffffff, - linewidth: 5, // in pixels + linewidth: 5, // in world units with size attenuation, pixels otherwise vertexColors: THREE.VertexColors, //resolution: // to be set by renderer, eventually dashed: false @@ -194,7 +194,7 @@ var param = { 'line type': 0, 'size attenuation': false, - 'width (px)': 5, + 'width': 5, 'dashed': false, 'dash scale': 1, 'dash / gap': 1 @@ -230,7 +230,7 @@ } ); - gui.add( param, 'width (px)', 1, 10 ).onChange( function ( val ) { + gui.add( param, 'width', 1, 10 ).onChange( function ( val ) { matLine.linewidth = val; From 0d81ab2971cc241e25deca0079bcb14699745288 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Mon, 1 Jul 2019 15:03:23 -0700 Subject: [PATCH 09/19] Add jsm build --- examples/jsm/lines/LineMaterial.js | 63 +++++++++++++++++++++++++----- 1 file changed, 54 insertions(+), 9 deletions(-) diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index e164f89f8303ee..a5055123279581 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -22,7 +22,7 @@ import { UniformsLib.line = { - screenSpaceWidth: { value: 1 }, + sizeAttenuation: { value: 1 }, linewidth: { value: 1 }, resolution: { value: new Vector2( 1, 1 ) }, dashScale: { value: 1 }, @@ -47,7 +47,7 @@ ShaderLib[ 'line' ] = { #include #include - uniform float screenSpaceWidth; + uniform float sizeAttenuation; uniform float linewidth; uniform vec2 resolution; @@ -126,6 +126,41 @@ ShaderLib[ 'line' ] = { } + #ifdef SIZE_ATTENUATION + + // direction + vec2 dir = end.xy - start.xy; + dir = normalize( dir ); + + // perpendicular to dir + vec2 offset = vec2( dir.y, - dir.x ); + + // sign flip + if ( position.x < 0.0 ) offset *= - 1.0; + + // endcaps + if ( position.y < 0.0 ) { + + offset += - dir; + + } else if ( position.y > 1.0 ) { + + offset += dir; + + } + + // adjust for linewidth + offset *= linewidth * 0.5; + + // select end + vec4 clip = ( position.y < 0.5 ) ? start : end; + + clip.xy += offset; + + clip = projectionMatrix * clip; + + #else + // clip space vec4 clipStart = projectionMatrix * start; vec4 clipEnd = projectionMatrix * end; @@ -165,17 +200,19 @@ ShaderLib[ 'line' ] = { // adjust for linewidth offset *= linewidth; - // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... - offset = mix(offset, offset / resolution.y, screenSpaceWidth); - // select end vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; + // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... + offset /= resolution.y; + // back to clip space - offset = mix(offset * 1.0, offset * clip.w, screenSpaceWidth); + offset *= clip.w; clip.xy += offset; + #endif + gl_Position = clip; vec4 mvPosition = ( position.y < 0.5 ) ? start : end; // this is an approximation @@ -282,19 +319,27 @@ var LineMaterial = function ( parameters ) { }, - screenSpaceWidth: { + sizeAttenuation: { enumerable: true, get: function () { - return this.uniforms.screenSpaceWidth.value === 1; + return 'SIZE_ATTENUATION' in this.defines; }, set: function ( value ) { - this.uniforms.screenSpaceWidth.value = value ? 1 : 0; + if ( value === true ) { + + this.defines.SIZE_ATTENUATION = ''; + + } else { + + delete this.defines.SIZE_ATTENUATION; + + } } From a112b401a8b00a608cf023e351a142c404bfc8e5 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Mon, 1 Jul 2019 15:06:53 -0700 Subject: [PATCH 10/19] revert statement position --- examples/js/lines/LineMaterial.js | 6 +++--- examples/jsm/lines/LineMaterial.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js index f8ecee7296380b..7227a2417b0642 100644 --- a/examples/js/lines/LineMaterial.js +++ b/examples/js/lines/LineMaterial.js @@ -192,12 +192,12 @@ THREE.ShaderLib[ 'line' ] = { // adjust for linewidth offset *= linewidth; - // select end - vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; - // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... offset /= resolution.y; + // select end + vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; + // back to clip space offset *= clip.w; diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index a5055123279581..98eda212f156d7 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -200,12 +200,12 @@ ShaderLib[ 'line' ] = { // adjust for linewidth offset *= linewidth; - // select end - vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; - // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... offset /= resolution.y; + // select end + vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; + // back to clip space offset *= clip.w; From a2f48e05b3f587348b5e899ba8e185e3d731e3a1 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Mon, 1 Jul 2019 15:18:31 -0700 Subject: [PATCH 11/19] Change sizeAttenuation to worldUnits --- examples/js/lines/LineMaterial.js | 14 +++++++------- examples/jsm/lines/LineMaterial.js | 14 +++++++------- examples/webgl_lines_fat.html | 6 +++--- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js index 7227a2417b0642..c682bb6d701365 100644 --- a/examples/js/lines/LineMaterial.js +++ b/examples/js/lines/LineMaterial.js @@ -14,7 +14,7 @@ THREE.UniformsLib.line = { - sizeAttenuation: { value: 1 }, + worldUnits: { value: 1 }, linewidth: { value: 1 }, resolution: { value: new THREE.Vector2( 1, 1 ) }, dashScale: { value: 1 }, @@ -39,7 +39,7 @@ THREE.ShaderLib[ 'line' ] = { #include #include - uniform float sizeAttenuation; + uniform float worldUnits; uniform float linewidth; uniform vec2 resolution; @@ -118,7 +118,7 @@ THREE.ShaderLib[ 'line' ] = { } - #ifdef SIZE_ATTENUATION + #ifdef WORLD_UNITS // direction vec2 dir = end.xy - start.xy; @@ -311,13 +311,13 @@ THREE.LineMaterial = function ( parameters ) { }, - sizeAttenuation: { + worldUnits: { enumerable: true, get: function () { - return 'SIZE_ATTENUATION' in this.defines; + return 'WORLD_UNITS' in this.defines; }, @@ -325,11 +325,11 @@ THREE.LineMaterial = function ( parameters ) { if ( value === true ) { - this.defines.SIZE_ATTENUATION = ''; + this.defines.WORLD_UNITS = ''; } else { - delete this.defines.SIZE_ATTENUATION; + delete this.defines.WORLD_UNITS; } diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index 98eda212f156d7..6ed015a0aaf34f 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -22,7 +22,7 @@ import { UniformsLib.line = { - sizeAttenuation: { value: 1 }, + worldUnits: { value: 1 }, linewidth: { value: 1 }, resolution: { value: new Vector2( 1, 1 ) }, dashScale: { value: 1 }, @@ -47,7 +47,7 @@ ShaderLib[ 'line' ] = { #include #include - uniform float sizeAttenuation; + uniform float worldUnits; uniform float linewidth; uniform vec2 resolution; @@ -126,7 +126,7 @@ ShaderLib[ 'line' ] = { } - #ifdef SIZE_ATTENUATION + #ifdef WORLD_UNITS // direction vec2 dir = end.xy - start.xy; @@ -319,13 +319,13 @@ var LineMaterial = function ( parameters ) { }, - sizeAttenuation: { + worldUnits: { enumerable: true, get: function () { - return 'SIZE_ATTENUATION' in this.defines; + return 'WORLD_UNITS' in this.defines; }, @@ -333,11 +333,11 @@ var LineMaterial = function ( parameters ) { if ( value === true ) { - this.defines.SIZE_ATTENUATION = ''; + this.defines.WORLD_UNITS = ''; } else { - delete this.defines.SIZE_ATTENUATION; + delete this.defines.WORLD_UNITS; } diff --git a/examples/webgl_lines_fat.html b/examples/webgl_lines_fat.html index 8885c8318861cd..13e48b549ae4f2 100644 --- a/examples/webgl_lines_fat.html +++ b/examples/webgl_lines_fat.html @@ -193,7 +193,7 @@ var param = { 'line type': 0, - 'size attenuation': false, + 'world units': false, 'width': 5, 'dashed': false, 'dash scale': 1, @@ -223,9 +223,9 @@ } ); - gui.add( param, 'size attenuation' ).onChange( function ( val ) { + gui.add( param, 'world units' ).onChange( function ( val ) { - matLine.sizeAttenuation = val; + matLine.worldUnits = val; matLine.needsUpdate = true; } ); From d1b0e135db92db53484af3cad0f0850b559e0cd9 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Tue, 2 Jul 2019 19:09:49 -0700 Subject: [PATCH 12/19] Fix endcaps not being perpendicular to line direction --- examples/jsm/lines/LineMaterial.js | 33 ++++++++++++------------------ 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index 6ed015a0aaf34f..bae7b653898a98 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -126,15 +126,26 @@ ShaderLib[ 'line' ] = { } - #ifdef WORLD_UNITS + // clip space + vec4 clipStart = projectionMatrix * start; + vec4 clipEnd = projectionMatrix * end; + + // ndc space + vec2 ndcStart = clipStart.xy / clipStart.w; + vec2 ndcEnd = clipEnd.xy / clipEnd.w; // direction - vec2 dir = end.xy - start.xy; + vec2 dir = ndcEnd - ndcStart; + + // account for clip-space aspect ratio + dir.x *= aspect; dir = normalize( dir ); // perpendicular to dir vec2 offset = vec2( dir.y, - dir.x ); + #ifdef WORLD_UNITS + // sign flip if ( position.x < 0.0 ) offset *= - 1.0; @@ -161,24 +172,6 @@ ShaderLib[ 'line' ] = { #else - // clip space - vec4 clipStart = projectionMatrix * start; - vec4 clipEnd = projectionMatrix * end; - - // ndc space - vec2 ndcStart = clipStart.xy / clipStart.w; - vec2 ndcEnd = clipEnd.xy / clipEnd.w; - - // direction - vec2 dir = ndcEnd - ndcStart; - - // account for clip-space aspect ratio - dir.x *= aspect; - dir = normalize( dir ); - - // perpendicular to dir - vec2 offset = vec2( dir.y, - dir.x ); - // undo aspect ratio adjustment dir.x /= aspect; offset.x /= aspect; From 1a9e0a915b8acbe63b6233bccc987b05136e26c1 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Tue, 2 Jul 2019 19:25:32 -0700 Subject: [PATCH 13/19] Update js examples version --- examples/js/lines/LineMaterial.js | 33 ++++++++++++------------------- 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js index c682bb6d701365..f105685a33b6cd 100644 --- a/examples/js/lines/LineMaterial.js +++ b/examples/js/lines/LineMaterial.js @@ -118,15 +118,26 @@ THREE.ShaderLib[ 'line' ] = { } - #ifdef WORLD_UNITS + // clip space + vec4 clipStart = projectionMatrix * start; + vec4 clipEnd = projectionMatrix * end; + + // ndc space + vec2 ndcStart = clipStart.xy / clipStart.w; + vec2 ndcEnd = clipEnd.xy / clipEnd.w; // direction - vec2 dir = end.xy - start.xy; + vec2 dir = ndcEnd - ndcStart; + + // account for clip-space aspect ratio + dir.x *= aspect; dir = normalize( dir ); // perpendicular to dir vec2 offset = vec2( dir.y, - dir.x ); + #ifdef WORLD_UNITS + // sign flip if ( position.x < 0.0 ) offset *= - 1.0; @@ -153,24 +164,6 @@ THREE.ShaderLib[ 'line' ] = { #else - // clip space - vec4 clipStart = projectionMatrix * start; - vec4 clipEnd = projectionMatrix * end; - - // ndc space - vec2 ndcStart = clipStart.xy / clipStart.w; - vec2 ndcEnd = clipEnd.xy / clipEnd.w; - - // direction - vec2 dir = ndcEnd - ndcStart; - - // account for clip-space aspect ratio - dir.x *= aspect; - dir = normalize( dir ); - - // perpendicular to dir - vec2 offset = vec2( dir.y, - dir.x ); - // undo aspect ratio adjustment dir.x /= aspect; offset.x /= aspect; From 8c128834c4b4bac8a6797adf0a21b1c4f80a0595 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sat, 13 Jul 2019 07:57:12 -0700 Subject: [PATCH 14/19] Make line look like a capsule (#6) --- examples/jsm/lines/LineMaterial.js | 182 +++++++++++++++++++++-------- 1 file changed, 135 insertions(+), 47 deletions(-) diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index bae7b653898a98..6a74e8e64b4a31 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -47,7 +47,6 @@ ShaderLib[ 'line' ] = { #include #include - uniform float worldUnits; uniform float linewidth; uniform vec2 resolution; @@ -58,6 +57,9 @@ ShaderLib[ 'line' ] = { attribute vec3 instanceColorEnd; varying vec2 vUv; + varying vec4 worldPos; + varying vec3 worldStart; + varying vec3 worldEnd; #ifdef USE_DASH @@ -105,6 +107,9 @@ ShaderLib[ 'line' ] = { vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 ); vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 ); + worldStart = start.xyz; + worldEnd = end.xyz; + // special case for perspective projection, and segments that terminate either in, or behind, the camera plane // clearly the gpu firmware has a way of addressing this issue when projecting into ndc space // but we need to perform ndc-space calculations in the shader, so we must address this issue directly @@ -131,78 +136,105 @@ ShaderLib[ 'line' ] = { vec4 clipEnd = projectionMatrix * end; // ndc space - vec2 ndcStart = clipStart.xy / clipStart.w; - vec2 ndcEnd = clipEnd.xy / clipEnd.w; + vec3 ndcStart = clipStart.xyz / clipStart.w; + vec3 ndcEnd = clipEnd.xyz / clipEnd.w; // direction - vec2 dir = ndcEnd - ndcStart; + vec2 dir = ndcEnd.xy - ndcStart.xy; // account for clip-space aspect ratio dir.x *= aspect; dir = normalize( dir ); - // perpendicular to dir - vec2 offset = vec2( dir.y, - dir.x ); - #ifdef WORLD_UNITS - // sign flip - if ( position.x < 0.0 ) offset *= - 1.0; + // perpendicular to dir + vec3 worldDir = normalize( end.xyz - start.xyz ); + vec3 offset; + if ( position.y < 0.5 ) { + + offset = normalize( cross( start.xyz, worldDir ) ); - // endcaps - if ( position.y < 0.0 ) { + } else { - offset += - dir; + offset = normalize( cross( end.xyz, worldDir ) ); - } else if ( position.y > 1.0 ) { + } - offset += dir; + // sign flip + if ( position.x < 0.0 ) offset *= - 1.0; - } + #ifndef USE_DASH - // adjust for linewidth - offset *= linewidth * 0.5; + // extend the line bounds to encompass endcaps + start.xyz += - worldDir * linewidth * 0.5; + end.xyz += worldDir * linewidth * 0.5; - // select end - vec4 clip = ( position.y < 0.5 ) ? start : end; + // shift the position of the quad so it hugs the forward edge of the line + offset.xy -= dir * dot( worldDir, vec3( 0.0, 0.0, 1.0 ) ); - clip.xy += offset; + #endif - clip = projectionMatrix * clip; + // endcaps + if ( position.y > 1.0 ) { + + offset.xy += dir * 2.0; + + } else if ( position.y < 0.0 ) { + + offset.xy -= dir * 2.0; + + } + + // adjust for linewidth + offset *= linewidth * 0.5; + + // set the world position + worldPos = ( position.y < 0.5 ) ? start : end; + worldPos.xyz += offset; + + // project the worldpos + vec4 clip = projectionMatrix * worldPos; + + // shift the depth of the projected points so the line + // segements overlap neatly + vec3 clipPose = ( position.y < 0.5 ) ? ndcStart : ndcEnd; + clip.z = clipPose.z * clip.w; #else - // undo aspect ratio adjustment - dir.x /= aspect; - offset.x /= aspect; + vec2 offset = vec2( dir.y, - dir.x ); + // undo aspect ratio adjustment + dir.x /= aspect; + offset.x /= aspect; - // sign flip - if ( position.x < 0.0 ) offset *= - 1.0; + // sign flip + if ( position.x < 0.0 ) offset *= - 1.0; - // endcaps - if ( position.y < 0.0 ) { + // endcaps + if ( position.y < 0.0 ) { - offset += - dir; + offset += - dir; - } else if ( position.y > 1.0 ) { + } else if ( position.y > 1.0 ) { - offset += dir; + offset += dir; - } + } - // adjust for linewidth - offset *= linewidth; + // adjust for linewidth + offset *= linewidth; - // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... - offset /= resolution.y; + // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... + offset /= resolution.y; - // select end - vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; + // select end + vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; - // back to clip space - offset *= clip.w; + // back to clip space + offset *= clip.w; - clip.xy += offset; + clip.xy += offset; #endif @@ -221,6 +253,7 @@ ShaderLib[ 'line' ] = { ` uniform vec3 diffuse; uniform float opacity; + uniform float linewidth; #ifdef USE_DASH @@ -230,6 +263,9 @@ ShaderLib[ 'line' ] = { #endif varying float vLineDistance; + varying vec4 worldPos; + varying vec3 worldStart; + varying vec3 worldEnd; #include #include @@ -239,6 +275,35 @@ ShaderLib[ 'line' ] = { varying vec2 vUv; + vec2 closestLineToLine(vec3 p1, vec3 p2, vec3 p3, vec3 p4) { + + float mua; + float mub; + + vec3 p13 = p1 - p3; + vec3 p43 = p4 - p3; + + vec3 p21 = p2 - p1; + + float d1343 = dot( p13, p43 ); + float d4321 = dot( p43, p21 ); + float d1321 = dot( p13, p21 ); + float d4343 = dot( p43, p43 ); + float d2121 = dot( p21, p21 ); + + float denom = d2121 * d4343 - d4321 * d4321; + + float numer = d1343 * d4321 - d1321 * d4343; + + mua = numer / denom; + mua = clamp( mua, 0.0, 1.0 ); + mub = ( d1343 + d4321 * ( mua ) ) / d4343; + mub = clamp( mub, 0.0, 1.0 ); + + return vec2( mua, mub ); + + } + void main() { #include @@ -251,15 +316,38 @@ ShaderLib[ 'line' ] = { #endif - if ( abs( vUv.y ) > 1.0 ) { + #ifdef WORLD_UNITS - float a = vUv.x; - float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0; - float len2 = a * a + b * b; + // Find the closest points on the view ray and the line segment + vec3 rayEnd = normalize( worldPos.xyz ) * 1e5; + vec3 lineDir = worldEnd - worldStart; + vec2 params = closestLineToLine( worldStart, worldEnd, vec3( 0.0, 0.0, 0.0 ), rayEnd ); - if ( len2 > 1.0 ) discard; + vec3 p1 = worldStart + lineDir * params.x; + vec3 p2 = rayEnd * params.y; + vec3 delta = p1 - p2; + float len = length( delta ); + float norm = len / linewidth; - } + #ifndef USE_DASH + + if (norm > 0.5) discard; + + #endif + + #else + + if ( abs( vUv.y ) > 1.0 ) { + + float a = vUv.x; + float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0; + float len2 = a * a + b * b; + + if ( len2 > 1.0 ) discard; + + } + + #endif vec4 diffuseColor = vec4( diffuse, opacity ); From baf403afa2a7c9db012199431f56f26cbb6a5cb4 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sat, 13 Jul 2019 08:05:25 -0700 Subject: [PATCH 15/19] update js file --- examples/js/lines/LineMaterial.js | 182 ++++++++++++++++++++++-------- 1 file changed, 135 insertions(+), 47 deletions(-) diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js index f105685a33b6cd..e7d5be0753cb44 100644 --- a/examples/js/lines/LineMaterial.js +++ b/examples/js/lines/LineMaterial.js @@ -39,7 +39,6 @@ THREE.ShaderLib[ 'line' ] = { #include #include - uniform float worldUnits; uniform float linewidth; uniform vec2 resolution; @@ -50,6 +49,9 @@ THREE.ShaderLib[ 'line' ] = { attribute vec3 instanceColorEnd; varying vec2 vUv; + varying vec4 worldPos; + varying vec3 worldStart; + varying vec3 worldEnd; #ifdef USE_DASH @@ -97,6 +99,9 @@ THREE.ShaderLib[ 'line' ] = { vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 ); vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 ); + worldStart = start.xyz; + worldEnd = end.xyz; + // special case for perspective projection, and segments that terminate either in, or behind, the camera plane // clearly the gpu firmware has a way of addressing this issue when projecting into ndc space // but we need to perform ndc-space calculations in the shader, so we must address this issue directly @@ -123,78 +128,105 @@ THREE.ShaderLib[ 'line' ] = { vec4 clipEnd = projectionMatrix * end; // ndc space - vec2 ndcStart = clipStart.xy / clipStart.w; - vec2 ndcEnd = clipEnd.xy / clipEnd.w; + vec3 ndcStart = clipStart.xyz / clipStart.w; + vec3 ndcEnd = clipEnd.xyz / clipEnd.w; // direction - vec2 dir = ndcEnd - ndcStart; + vec2 dir = ndcEnd.xy - ndcStart.xy; // account for clip-space aspect ratio dir.x *= aspect; dir = normalize( dir ); - // perpendicular to dir - vec2 offset = vec2( dir.y, - dir.x ); - #ifdef WORLD_UNITS - // sign flip - if ( position.x < 0.0 ) offset *= - 1.0; + // perpendicular to dir + vec3 worldDir = normalize( end.xyz - start.xyz ); + vec3 offset; + if ( position.y < 0.5 ) { + + offset = normalize( cross( start.xyz, worldDir ) ); - // endcaps - if ( position.y < 0.0 ) { + } else { - offset += - dir; + offset = normalize( cross( end.xyz, worldDir ) ); - } else if ( position.y > 1.0 ) { + } - offset += dir; + // sign flip + if ( position.x < 0.0 ) offset *= - 1.0; - } + #ifndef USE_DASH - // adjust for linewidth - offset *= linewidth * 0.5; + // extend the line bounds to encompass endcaps + start.xyz += - worldDir * linewidth * 0.5; + end.xyz += worldDir * linewidth * 0.5; - // select end - vec4 clip = ( position.y < 0.5 ) ? start : end; + // shift the position of the quad so it hugs the forward edge of the line + offset.xy -= dir * dot( worldDir, vec3( 0.0, 0.0, 1.0 ) ); - clip.xy += offset; + #endif - clip = projectionMatrix * clip; + // endcaps + if ( position.y > 1.0 ) { + + offset.xy += dir * 2.0; + + } else if ( position.y < 0.0 ) { + + offset.xy -= dir * 2.0; + + } + + // adjust for linewidth + offset *= linewidth * 0.5; + + // set the world position + worldPos = ( position.y < 0.5 ) ? start : end; + worldPos.xyz += offset; + + // project the worldpos + vec4 clip = projectionMatrix * worldPos; + + // shift the depth of the projected points so the line + // segements overlap neatly + vec3 clipPose = ( position.y < 0.5 ) ? ndcStart : ndcEnd; + clip.z = clipPose.z * clip.w; #else - // undo aspect ratio adjustment - dir.x /= aspect; - offset.x /= aspect; + vec2 offset = vec2( dir.y, - dir.x ); + // undo aspect ratio adjustment + dir.x /= aspect; + offset.x /= aspect; - // sign flip - if ( position.x < 0.0 ) offset *= - 1.0; + // sign flip + if ( position.x < 0.0 ) offset *= - 1.0; - // endcaps - if ( position.y < 0.0 ) { + // endcaps + if ( position.y < 0.0 ) { - offset += - dir; + offset += - dir; - } else if ( position.y > 1.0 ) { + } else if ( position.y > 1.0 ) { - offset += dir; + offset += dir; - } + } - // adjust for linewidth - offset *= linewidth; + // adjust for linewidth + offset *= linewidth; - // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... - offset /= resolution.y; + // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... + offset /= resolution.y; - // select end - vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; + // select end + vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; - // back to clip space - offset *= clip.w; + // back to clip space + offset *= clip.w; - clip.xy += offset; + clip.xy += offset; #endif @@ -213,6 +245,7 @@ THREE.ShaderLib[ 'line' ] = { ` uniform vec3 diffuse; uniform float opacity; + uniform float linewidth; #ifdef USE_DASH @@ -222,6 +255,9 @@ THREE.ShaderLib[ 'line' ] = { #endif varying float vLineDistance; + varying vec4 worldPos; + varying vec3 worldStart; + varying vec3 worldEnd; #include #include @@ -231,6 +267,35 @@ THREE.ShaderLib[ 'line' ] = { varying vec2 vUv; + vec2 closestLineToLine(vec3 p1, vec3 p2, vec3 p3, vec3 p4) { + + float mua; + float mub; + + vec3 p13 = p1 - p3; + vec3 p43 = p4 - p3; + + vec3 p21 = p2 - p1; + + float d1343 = dot( p13, p43 ); + float d4321 = dot( p43, p21 ); + float d1321 = dot( p13, p21 ); + float d4343 = dot( p43, p43 ); + float d2121 = dot( p21, p21 ); + + float denom = d2121 * d4343 - d4321 * d4321; + + float numer = d1343 * d4321 - d1321 * d4343; + + mua = numer / denom; + mua = clamp( mua, 0.0, 1.0 ); + mub = ( d1343 + d4321 * ( mua ) ) / d4343; + mub = clamp( mub, 0.0, 1.0 ); + + return vec2( mua, mub ); + + } + void main() { #include @@ -243,15 +308,38 @@ THREE.ShaderLib[ 'line' ] = { #endif - if ( abs( vUv.y ) > 1.0 ) { + #ifdef WORLD_UNITS - float a = vUv.x; - float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0; - float len2 = a * a + b * b; + // Find the closest points on the view ray and the line segment + vec3 rayEnd = normalize( worldPos.xyz ) * 1e5; + vec3 lineDir = worldEnd - worldStart; + vec2 params = closestLineToLine( worldStart, worldEnd, vec3( 0.0, 0.0, 0.0 ), rayEnd ); - if ( len2 > 1.0 ) discard; + vec3 p1 = worldStart + lineDir * params.x; + vec3 p2 = rayEnd * params.y; + vec3 delta = p1 - p2; + float len = length( delta ); + float norm = len / linewidth; - } + #ifndef USE_DASH + + if (norm > 0.5) discard; + + #endif + + #else + + if ( abs( vUv.y ) > 1.0 ) { + + float a = vUv.x; + float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0; + float len2 = a * a + b * b; + + if ( len2 > 1.0 ) discard; + + } + + #endif vec4 diffuseColor = vec4( diffuse, opacity ); From 161915d45c674f82ce7e039aa8cb5f5e9f0987bd Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sat, 13 Jul 2019 08:16:26 -0700 Subject: [PATCH 16/19] Update comments --- examples/js/lines/LineMaterial.js | 4 +++- examples/jsm/lines/LineMaterial.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js index e7d5be0753cb44..e675bdac5be711 100644 --- a/examples/js/lines/LineMaterial.js +++ b/examples/js/lines/LineMaterial.js @@ -140,7 +140,7 @@ THREE.ShaderLib[ 'line' ] = { #ifdef WORLD_UNITS - // perpendicular to dir + // get the offset direction as perpendicular to the view vector vec3 worldDir = normalize( end.xyz - start.xyz ); vec3 offset; if ( position.y < 0.5 ) { @@ -156,6 +156,8 @@ THREE.ShaderLib[ 'line' ] = { // sign flip if ( position.x < 0.0 ) offset *= - 1.0; + // don't extend the line if we're rendering dashes because we + // won't be rendering the endcaps #ifndef USE_DASH // extend the line bounds to encompass endcaps diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index 6a74e8e64b4a31..31bd9929a74ef0 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -148,7 +148,7 @@ ShaderLib[ 'line' ] = { #ifdef WORLD_UNITS - // perpendicular to dir + // get the offset direction as perpendicular to the view vector vec3 worldDir = normalize( end.xyz - start.xyz ); vec3 offset; if ( position.y < 0.5 ) { @@ -164,6 +164,8 @@ ShaderLib[ 'line' ] = { // sign flip if ( position.x < 0.0 ) offset *= - 1.0; + // don't extend the line if we're rendering dashes because we + // won't be rendering the endcaps #ifndef USE_DASH // extend the line bounds to encompass endcaps From ab98725dfe1ff7756032d10b145bde3c6eb72efd Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Fri, 19 Jul 2019 15:09:34 -0700 Subject: [PATCH 17/19] Add a tighter containment for capsule --- examples/js/lines/LineMaterial.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js index e675bdac5be711..39d1054c093a9a 100644 --- a/examples/js/lines/LineMaterial.js +++ b/examples/js/lines/LineMaterial.js @@ -156,6 +156,8 @@ THREE.ShaderLib[ 'line' ] = { // sign flip if ( position.x < 0.0 ) offset *= - 1.0; + float forwardOffset = dot( worldDir, vec3( 0.0, 0.0, 1.0 ) ); + // don't extend the line if we're rendering dashes because we // won't be rendering the endcaps #ifndef USE_DASH @@ -165,18 +167,14 @@ THREE.ShaderLib[ 'line' ] = { end.xyz += worldDir * linewidth * 0.5; // shift the position of the quad so it hugs the forward edge of the line - offset.xy -= dir * dot( worldDir, vec3( 0.0, 0.0, 1.0 ) ); + offset.xy -= dir * forwardOffset; #endif // endcaps - if ( position.y > 1.0 ) { - - offset.xy += dir * 2.0; - - } else if ( position.y < 0.0 ) { + if ( position.y > 1.0 || position.y < 0.0 ) { - offset.xy -= dir * 2.0; + offset.xy += dir * 2.0 * forwardOffset; } From 8deda2fa58e114c5c3bd0b484200250c288cfc2f Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Fri, 19 Jul 2019 15:12:33 -0700 Subject: [PATCH 18/19] update module --- examples/jsm/lines/LineMaterial.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index 31bd9929a74ef0..67f666c6155fe0 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -164,6 +164,8 @@ ShaderLib[ 'line' ] = { // sign flip if ( position.x < 0.0 ) offset *= - 1.0; + float forwardOffset = dot( worldDir, vec3( 0.0, 0.0, 1.0 ) ); + // don't extend the line if we're rendering dashes because we // won't be rendering the endcaps #ifndef USE_DASH @@ -173,18 +175,14 @@ ShaderLib[ 'line' ] = { end.xyz += worldDir * linewidth * 0.5; // shift the position of the quad so it hugs the forward edge of the line - offset.xy -= dir * dot( worldDir, vec3( 0.0, 0.0, 1.0 ) ); + offset.xy -= dir * forwardOffset; #endif // endcaps - if ( position.y > 1.0 ) { - - offset.xy += dir * 2.0; - - } else if ( position.y < 0.0 ) { + if ( position.y > 1.0 || position.y < 0.0 ) { - offset.xy -= dir * 2.0; + offset.xy += dir * 2.0 * forwardOffset; } From 678087c299438e9d74072f9d644e4e6b7bf052b7 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Tue, 10 Aug 2021 08:42:44 -0700 Subject: [PATCH 19/19] small adjustment --- examples/jsm/lines/LineMaterial.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index 61721ecdb4b00e..23bebd91c5567a 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -18,7 +18,6 @@ import { Vector2 } from "../../../build/three.module.js"; -// TODO: fix clipping when UniformsLib.line = { @@ -176,6 +175,7 @@ ShaderLib[ 'line' ] = { // shift the position of the quad so it hugs the forward edge of the line offset.xy -= dir * forwardOffset; + offset.z += 0.5; #endif