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..ed8329f8d1 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; @@ -95,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); - float zOffset = mix(-0.00045, -1., facingCamera); - posp.z -= zOffset; - posqIn.z -= zOffset; - posqOut.z -= zOffset; + // 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., -1., facingCamera); + 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; 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 0000000000..344fa7ceb8 Binary files /dev/null and b/test/unit/visual/screenshots/WebGL/Strokes/Strokes do not cut into fills in ortho mode/000.png differ 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