From c1347c46a786299466e1beab3344da3919975bf7 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 9 Nov 2024 10:12:28 -0500 Subject: [PATCH 1/4] Will high precision floats make lines render on top? --- src/webgl/shaders/line.frag | 3 ++- src/webgl/shaders/line.vert | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/webgl/shaders/line.frag b/src/webgl/shaders/line.frag index f4b5a5c40b..a0ca059040 100644 --- a/src/webgl/shaders/line.frag +++ b/src/webgl/shaders/line.frag @@ -1,4 +1,5 @@ -precision mediump int; +precision highp int; +precision highp float; uniform vec4 uMaterialColor; uniform int uStrokeCap; diff --git a/src/webgl/shaders/line.vert b/src/webgl/shaders/line.vert index 6758cfa54a..0b387392e8 100644 --- a/src/webgl/shaders/line.vert +++ b/src/webgl/shaders/line.vert @@ -18,7 +18,8 @@ #define PROCESSING_LINE_SHADER -precision mediump int; +precision highp int; +precision highp float; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; From 2c01139d8567a36670f6857ebdf5e7409b90dc2b Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Fri, 20 Sep 2024 08:10:52 -0400 Subject: [PATCH 2/4] Merge pull request #7206 from TiborUdvari/fix/line.vert-v1.10.0 Line.vert fix for small units --- src/webgl/shaders/line.vert | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/webgl/shaders/line.vert b/src/webgl/shaders/line.vert index 0b387392e8..958444441e 100644 --- a/src/webgl/shaders/line.vert +++ b/src/webgl/shaders/line.vert @@ -96,13 +96,33 @@ void main() { // Moving vertices slightly toward the camera // to avoid depth-fighting with the fill triangles. - // This prevents popping effects due to half of + // A mix of scaling and offsetting is used based on distance + // Discussion here: + // https://github.com/processing/p5.js/issues/7200 + + // using a scale <1 moves the lines towards nearby camera + // in order to prevent popping effects due to half of // the line disappearing behind the geometry faces. + float zDistance = -posp.z; + float distanceFactor = smoothstep(0.0, 800.0, zDistance); + // Discussed here: + // http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=showflat&Number=252848 + float scale = mix(1., 0.995, facingCamera); + float dynamicScale = mix(scale, 1.0, distanceFactor); // Closer = more scale, farther = less + + posp.xyz = posp.xyz * dynamicScale; + posqIn.xyz = posqIn.xyz * dynamicScale; + posqOut.xyz = posqOut.xyz * dynamicScale; + + // Moving vertices slightly toward camera when far away + // https://github.com/processing/p5.js/issues/6956 float zOffset = mix(-0.00045, -1., facingCamera); - posp.z -= zOffset; - posqIn.z -= zOffset; - posqOut.z -= zOffset; + float dynamicZAdjustment = mix(0.0, zOffset, distanceFactor); // Closer = less zAdjustment, farther = more + + posp.z -= dynamicZAdjustment; + posqIn.z -= dynamicZAdjustment; + posqOut.z -= dynamicZAdjustment; vec4 p = uProjectionMatrix * posp; vec4 qIn = uProjectionMatrix * posqIn; From 990fc33b5caf3d87711c629eedd55392a43291d6 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 9 Nov 2024 12:07:15 -0500 Subject: [PATCH 3/4] Apply no z offset to lines when facing the camera Line.vert fix for small units --- src/webgl/shaders/line.vert | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webgl/shaders/line.vert b/src/webgl/shaders/line.vert index 958444441e..ed8329f8d1 100644 --- a/src/webgl/shaders/line.vert +++ b/src/webgl/shaders/line.vert @@ -117,7 +117,7 @@ void main() { // Moving vertices slightly toward camera when far away // https://github.com/processing/p5.js/issues/6956 - float zOffset = mix(-0.00045, -1., facingCamera); + float zOffset = mix(0., -1., facingCamera); float dynamicZAdjustment = mix(0.0, zOffset, distanceFactor); // Closer = less zAdjustment, farther = more posp.z -= dynamicZAdjustment; From 2b57aa54c442b97e815f8d4ac3054b44adef70a2 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 9 Nov 2024 12:27:47 -0500 Subject: [PATCH 4/4] Add test case for ortho strokes --- test/unit/visual/cases/webgl.js | 13 +++++++++++++ .../000.png | Bin 0 -> 558 bytes .../metadata.json | 3 +++ 3 files changed, 16 insertions(+) create mode 100644 test/unit/visual/screenshots/WebGL/Strokes/Strokes do not cut into fills in ortho mode/000.png create mode 100644 test/unit/visual/screenshots/WebGL/Strokes/Strokes do not cut into fills in ortho mode/metadata.json diff --git a/test/unit/visual/cases/webgl.js b/test/unit/visual/cases/webgl.js index ae013da337..7d3b6d020f 100644 --- a/test/unit/visual/cases/webgl.js +++ b/test/unit/visual/cases/webgl.js @@ -315,4 +315,17 @@ visualSuite('WebGL', function() { screenshot(); }); }); + + visualSuite('Strokes', function() { + visualTest('Strokes do not cut into fills in ortho mode', (p5, screenshot) => { + p5.createCanvas(50, 50, p5.WEBGL); + p5.background(220); + p5.stroke(8); + p5.ortho(); + p5.rotateX(p5.PI/4); + p5.rotateY(p5.PI/4); + p5.box(30); + screenshot(); + }) + }) }); diff --git a/test/unit/visual/screenshots/WebGL/Strokes/Strokes do not cut into fills in ortho mode/000.png b/test/unit/visual/screenshots/WebGL/Strokes/Strokes do not cut into fills in ortho mode/000.png new file mode 100644 index 0000000000000000000000000000000000000000..344fa7ceb82638abc01fca7b1cc62bc871034cd0 GIT binary patch literal 558 zcmV+}0@3}6P)&7Cla2f{MKgb9J@gdWw@UXJws6D`vah}VKA*)4c9)Z8Eu2qd&L z7+MHSkSG9>>-ao1~t_+tWuF zB+Ejy5QIQHGvt}+NSo2wv3nc8+5%$7ZRA%VdWFCQ$=KjULdvqE4z-21w6>8>BR3pFE;q9*ALR=?+%|c>(G; z&DRPNXcY_!0U6Oi-tBfIlp^ooAtRY~A{L-zAI&H$)Mg>Vp~Wf$41iFwGwm=TXhzUN wFj}F};y^dzDFkc_v}CttPrk~_ups;Y1CsA%2ZzUTR{#J207*qoM6N<$f)lUpcmMzZ literal 0 HcmV?d00001 diff --git a/test/unit/visual/screenshots/WebGL/Strokes/Strokes do not cut into fills in ortho mode/metadata.json b/test/unit/visual/screenshots/WebGL/Strokes/Strokes do not cut into fills in ortho mode/metadata.json new file mode 100644 index 0000000000..2d4bfe30da --- /dev/null +++ b/test/unit/visual/screenshots/WebGL/Strokes/Strokes do not cut into fills in ortho mode/metadata.json @@ -0,0 +1,3 @@ +{ + "numScreenshots": 1 +} \ No newline at end of file