Fix issues with stroke depth ordering (#7369)

* Will high precision floats make lines render on top?

* Merge pull request #7206 from TiborUdvari/fix/line.vert-v1.10.0

Line.vert fix for small units

* Apply no z offset to lines when facing the camera

Line.vert fix for small units

* Add test case for ortho strokes

src/webgl/shaders/line.frag

@@ -1,4 +1,5 @@
-precision mediump int;
+precision highp int;
+precision highp float;
 
 uniform vec4 uMaterialColor;
 uniform int uStrokeCap;

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;

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();
+    })
+  })
 });

test/unit/visual/screenshots/WebGL/Strokes/Strokes do not cut into fills in ortho mode/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}