Node Editor: Visual tweaks to node links

Several visual tweaks to node links to make them overall fit in
better with the look of the node editor:

- Change the link thickness with the zoom level to a certain degree.
- Remove the fuzziness of the node link and its shadow/outline.
- The link outline color can now be made transparent.
- Add circles at the end of dragged links when connecting to sockets.
- Improve the banding of the color interpolation along the link.
- Adjust the spacing of dashes along straight node links.

Reviewed By: Pablo Vazquez, Hans Goudey

Differential Revision: http://developer.blender.org/D15036

1 files changed, 30 insertions, 28 deletions

diff --git a/source/blender/gpu/shaders/gpu_shader_2D_nodelink_vert.glsl b/source/blender/gpu/shaders/gpu_shader_2D_nodelink_vert.glsl
index 779bcc59487..794af5b69a5 100644
--- a/source/blender/gpu/shaders/gpu_shader_2D_nodelink_vert.glsl
+++ b/source/blender/gpu/shaders/gpu_shader_2D_nodelink_vert.glsl
@@ -12,10 +12,8 @@
 
 void main(void)
 {
-  /* Define where along the noodle the gradient will starts and ends.
-   * Use 0.25 instead of 0.35-0.65, because of a visual shift issue. */
-  const float start_gradient_threshold = 0.25;
-  const float end_gradient_threshold = 0.55;
+  const float start_gradient_threshold = 0.35;
+  const float end_gradient_threshold = 0.65;
 
 #ifdef USE_INSTANCE
 #  define colStart (colid_doarrow[0] < 3 ? start_color : node_link_data.colors[colid_doarrow[0]])
@@ -40,6 +38,31 @@ void main(void)
   vec4 colEnd = node_link_data.colors[2];
 #endif
 
+  float line_thickness = thickness;
+
+  if (gl_VertexID < MID_VERTEX) {
+    /* Outline pass. */
+    finalColor = colShadow;
+  }
+  else {
+    /* Second pass. */
+    if (uv.x < start_gradient_threshold) {
+      finalColor = colStart;
+    }
+    else if (uv.x > end_gradient_threshold) {
+      finalColor = colEnd;
+    }
+    else {
+      float mixFactor = (uv.x - start_gradient_threshold) /
+                        (end_gradient_threshold - start_gradient_threshold);
+      finalColor = mix(colStart, colEnd, mixFactor);
+    }
+    line_thickness *= 0.65f;
+    if (doMuted) {
+      finalColor[3] = 0.65;
+    }
+  }
+
   /* Parameters for the dashed line. */
   isMainLine = expand.y != 1.0 ? 0 : 1;
   dashFactor = dash_factor;
@@ -76,35 +99,14 @@ void main(void)
   exp_axis = ModelViewProjectionMatrix[0].xy * exp_axis.xx +
              ModelViewProjectionMatrix[1].xy * exp_axis.yy;
 
-  float expand_dist = (uv.y * 2.0 - 1.0);
+  float expand_dist = line_thickness * (uv.y * 2.0 - 1.0);
   colorGradient = expand_dist;
-
-  if (gl_VertexID < MID_VERTEX) {
-    /* Shadow pass */
-    finalColor = colShadow;
-  }
-  else {
-    /* Second pass */
-    if (uv.x < start_gradient_threshold) {
-      finalColor = colStart;
-    }
-    else if (uv.x > end_gradient_threshold) {
-      finalColor = colEnd;
-    }
-    else {
-      /* Add 0.1 to avoid a visual shift issue. */
-      finalColor = mix(colStart, colEnd, uv.x + 0.1);
-    }
-    expand_dist *= 0.5;
-    if (doMuted) {
-      finalColor[3] = 0.65;
-    }
-  }
+  lineThickness = line_thickness;
 
   finalColor[3] *= dim_factor;
 
   /* Expand into a line */
-  gl_Position.xy += exp_axis * node_link_data.expandSize * expand_dist * thickness;
+  gl_Position.xy += exp_axis * node_link_data.expandSize * expand_dist;
 
   /* If the link is not muted or is not a reroute arrow the points are squashed to the center of
    * the line. Magic numbers are defined in drawnode.c */