[all] Optimizes various shaders

This commit replaces varying with uniforms where possible. This impacts
the node.circle program, and the three currently existing node program
packages.

packages/node-border/src/shader-frag.ts

@@ -6,7 +6,6 @@ export default function getFragmentShader({ borders }: CreateNodeBorderProgramOp
 precision highp float;
 
 varying vec2 v_diffVector;
-varying float v_aaBorder;
 varying float v_radius;
 ${borders.map((_, i) => `varying float v_borderSize_${i + 1};`).join("\n")}
 
@@ -17,10 +16,14 @@ varying vec4 v_color;
 ${borders.map((_, i) => `varying vec4 v_borderColor_${i + 1};`).join("\n")}
 #endif
 
+uniform float u_correctionRatio;
+
+const float bias = 255.0 / 254.0;
 const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
 
 void main(void) {
   float dist = length(v_diffVector);
+  float aaBorder = 2.0 * u_correctionRatio;
   float v_borderSize_0 = v_radius;
   vec4 v_borderColor_0 = transparent;
 
@@ -36,8 +39,8 @@ void main(void) {
     gl_FragColor = v_borderColor_0;
   } else ${borders
     .map(
-      (_, i) => `if (dist > v_borderSize_${i} - v_aaBorder) {
-    gl_FragColor = mix(v_borderColor_${i + 1}, v_borderColor_${i}, (dist - v_borderSize_${i} + v_aaBorder) / v_aaBorder);
+      (_, i) => `if (dist > v_borderSize_${i} - aaBorder) {
+    gl_FragColor = mix(v_borderColor_${i + 1}, v_borderColor_${i}, (dist - v_borderSize_${i} + aaBorder) / aaBorder);
   } else if (dist > v_borderSize_${i + 1}) {
     gl_FragColor = v_borderColor_${i + 1};
   } else `,

packages/node-border/src/shader-vert.ts

@@ -17,7 +17,6 @@ uniform float u_correctionRatio;
 ${borders.flatMap(({ color }, i) => ("value" in color ? [`uniform vec4 u_borderColor_${i + 1};`] : [])).join("\n")}
 
 varying vec2 v_diffVector;
-varying float v_aaBorder;
 varying float v_radius;
 ${borders.map((_, i) => `varying float v_borderSize_${i + 1};`).join("\n")}
 
@@ -42,7 +41,6 @@ void main() {
   );
 
   v_radius = size / 2.0;
-  v_aaBorder = u_correctionRatio * 2.0;
   v_diffVector = diffVector;
 
   // Let's first compute the size of "non-fill" borders:

packages/node-image/src/shader-frag.ts

@@ -5,10 +5,10 @@ precision highp float;
 varying vec4 v_color;
 varying vec2 v_diffVector;
 varying float v_radius;
-varying float v_border;
 varying vec4 v_texture;
 
 uniform sampler2D u_atlas;
+uniform float u_correctionRatio;
 uniform float u_cameraAngle;
 uniform float u_percentagePadding;
 uniform bool u_colorizeImages;
@@ -19,8 +19,8 @@ const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
 const float radius = 0.5;
 
 void main(void) {
+  float border = 2.0 * u_correctionRatio;
   float dist = length(v_diffVector);
-  float border = v_border;
   vec4 color = gl_FragColor;
 
   float c = cos(-u_cameraAngle);

packages/node-image/src/shader-vert.ts

@@ -14,7 +14,6 @@ uniform float u_correctionRatio;
 varying vec4 v_color;
 varying vec2 v_diffVector;
 varying float v_radius;
-varying float v_border;
 varying vec4 v_texture;
 
 const float bias = 255.0 / 254.0;
@@ -30,7 +29,6 @@ void main() {
     1
   );
 
-  v_border = u_correctionRatio;
   v_diffVector = diffVector;
   v_radius = size / 2.0 / marginRatio;
 

packages/node-piechart/src/shader-frag.ts

@@ -6,9 +6,7 @@ export default function getFragmentShader({ slices, offset }: CreateNodePiechart
 precision highp float;
 
 varying vec2 v_diffVector;
-varying float v_aaBorder;
 varying float v_radius;
-varying vec4 v_defaultColor;
 ${slices.map((_, i) => `varying float v_sliceValue_${i + 1};`).join("\n")}
 ${"attribute" in offset ? "varying float v_offset;\n" : ""}
 
@@ -19,12 +17,16 @@ varying vec4 v_color;
 ${slices.map((_, i) => `varying vec4 v_sliceColor_${i + 1};`).join("\n")}
 #endif
 
+uniform vec4 u_defaultColor;
 uniform float u_cameraAngle;
+uniform float u_correctionRatio;
 ${"value" in offset ? "uniform float u_offset;\n" : ""}
 
+const float bias = 255.0 / 254.0;
 const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
 
 void main(void) {
+  float aaBorder = u_correctionRatio * 2.0;;
   float dist = length(v_diffVector);
   float offset = ${"attribute" in offset ? "v_offset" : "u_offset"};
   float angle = atan(v_diffVector.y / v_diffVector.x);
@@ -43,17 +45,17 @@ void main(void) {
 
   #else
   float total = ${slices.map((_, i) => `v_sliceValue_${i + 1}`).join(" + ")};
-  vec4 color = v_defaultColor;
+  vec4 color = u_defaultColor * bias;
   float angle_0 = 0.0;
   if (total > 0.0) {
 ${slices.map((_, i) => `    float angle_${i + 1} = angle_${i} + v_sliceValue_${i + 1} * ${2 * Math.PI} / total;`).join("\n")}
     ${slices.map((_, i) => `if (angle < angle_${i + 1}) color = v_sliceColor_${i + 1};`).join("\n    else ")}
   }
 
-  if (dist < v_radius - v_aaBorder) {
+  if (dist < v_radius - aaBorder) {
     gl_FragColor = color;
   } else if (dist < v_radius) {
-    gl_FragColor = mix(transparent, color, (v_radius - dist) / v_aaBorder);
+    gl_FragColor = mix(transparent, color, (v_radius - dist) / aaBorder);
   }
   #endif
 }

packages/node-piechart/src/shader-vert.ts

@@ -14,19 +14,16 @@ ${slices.flatMap(({ color }, i) => ("attribute" in color ? [`attribute vec4 a_sl
 uniform mat3 u_matrix;
 uniform float u_sizeRatio;
 uniform float u_correctionRatio;
-uniform vec4 u_defaultColor;
 ${slices.flatMap(({ color }, i) => ("value" in color ? [`uniform vec4 u_sliceColor_${i + 1};`] : [])).join("\n")}
 
 varying vec2 v_diffVector;
-varying float v_aaBorder;
 varying float v_radius;
 ${slices.map((_, i) => `varying float v_sliceValue_${i + 1};`).join("\n")}
 ${"attribute" in offset ? "varying float v_offset;\n" : ""}
 
 #ifdef PICKING_MODE
 varying vec4 v_color;
 #else
-varying vec4 v_defaultColor;
 // For normal mode, we use the border colors defined in the program:
 ${slices.map((_, i) => `varying vec4 v_sliceColor_${i + 1};`).join("\n")}
 #endif
@@ -45,7 +42,6 @@ void main() {
   );
 
   v_radius = size / 2.0;
-  v_aaBorder = u_correctionRatio * 2.0;
   v_diffVector = diffVector;
   ${"attribute" in offset ? "v_offset = a_offset;\n" : ""}
 
@@ -60,8 +56,6 @@ ${slices
   v_color = a_id;
   v_color.a *= bias;
   #else
-  v_defaultColor = u_defaultColor;
-  v_defaultColor.a *= bias;
 ${slices
   .map(({ color }, i) => {
     const res: string[] = [];

packages/sigma/src/rendering/programs/node-circle/frag.glsl.ts

@@ -5,26 +5,28 @@ precision highp float;
 varying vec4 v_color;
 varying vec2 v_diffVector;
 varying float v_radius;
-varying float v_border;
+
+uniform float u_correctionRatio;
 
 const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
 
 void main(void) {
-  float dist = length(v_diffVector) - v_radius + v_border;
+  float border = u_correctionRatio * 2.0;
+  float dist = length(v_diffVector) - v_radius + border;
 
   // No antialiasing for picking mode:
   #ifdef PICKING_MODE
-  if (dist > v_border)
+  if (dist > border)
     gl_FragColor = transparent;
   else
     gl_FragColor = v_color;
 
   #else
   float t = 0.0;
-  if (dist > v_border)
+  if (dist > border)
     t = 1.0;
   else if (dist > 0.0)
-    t = dist / v_border;
+    t = dist / border;
 
   gl_FragColor = mix(v_color, transparent, t);
   #endif

packages/sigma/src/rendering/programs/node-circle/vert.glsl.ts

@@ -27,7 +27,6 @@ void main() {
     1
   );
 
-  v_border = u_correctionRatio * 2.0;
   v_diffVector = diffVector;
   v_radius = size / 2.0;