[all] Improves depths management

The main update here is that there is no more sort to determine the
items depths, that are simply interpolated between their extents
instead.

Details:
- Directly interpolate the depth between min and max when processing the
  nodes and edges
- Removes maxNodesDepth and maxEdgesDepth from the RenderParams
- Adapts all existing programs to those changes

packages/edge-curve/src/factory.ts

@@ -38,7 +38,6 @@ export default function createEdgeCurveProgram<
           "u_feather",
           "u_minEdgeThickness",
           ...(arrowHead ? ["u_lengthToThicknessRatio", "u_widenessToThicknessRatio"] : []),
-          ...(this.hasDepth ? ["a_maxDepth"] : []),
         ],
         ATTRIBUTES: [
           { name: "a_source", size: 2, type: FLOAT },
@@ -107,8 +106,6 @@ export default function createEdgeCurveProgram<
       gl.uniform2f(u_dimensions, params.width * params.pixelRatio, params.height * params.pixelRatio);
       gl.uniform1f(u_minEdgeThickness, params.minEdgeThickness);
 
-      if (this.hasDepth) gl.uniform1f(uniformLocations.a_maxDepth, params.maxEdgesDepth);
-
       if (arrowHead) {
         const { u_lengthToThicknessRatio, u_widenessToThicknessRatio } = uniformLocations;
 

packages/edge-curve/src/shader-vert.ts

@@ -13,6 +13,10 @@ attribute float a_current;
 attribute float a_curvature;
 ${arrowHead ? "attribute float a_targetSize;\n" : ""}
 
+#ifdef HAS_DEPTH
+attribute float a_depth;
+#endif
+
 uniform mat3 u_matrix;
 uniform float u_sizeRatio;
 uniform float u_pixelRatio;
@@ -36,11 +40,6 @@ uniform float u_widenessToThicknessRatio;
     : ""
 }
 
-#ifdef HAS_DEPTH
-attribute float a_depth;
-uniform float a_maxDepth;
-#endif
-
 const float bias = 255.0 / 254.0;
 const float epsilon = 0.7;
 
@@ -97,7 +96,7 @@ void main() {
   gl_Position = vec4(position, 0, 1);
 
   #ifdef HAS_DEPTH
-  gl_Position.z = a_depth / a_maxDepth;
+  gl_Position.z = a_depth;
   #endif
     
 ${

packages/node-border/src/factory.ts

@@ -40,7 +40,6 @@ export default function getNodeBorderProgram<
           "u_correctionRatio",
           "u_matrix",
           ...borders.flatMap(({ color }, i) => ("value" in color ? [`u_borderColor_${i + 1}`] : [])),
-          ...(this.hasDepth ? ["a_maxDepth"] : []),
         ],
         ATTRIBUTES: [
           { name: "a_position", size: 2, type: FLOAT },
@@ -94,8 +93,6 @@ export default function getNodeBorderProgram<
           gl.uniform4f(location, r / 255, g / 255, b / 255, a / 255);
         }
       });
-
-      if (this.hasDepth) gl.uniform1f(uniformLocations.a_maxDepth, params.maxNodesDepth);
     }
   };
 }

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

@@ -7,6 +7,10 @@ attribute vec2 a_position;
 attribute float a_size;
 attribute float a_angle;
 
+#ifdef HAS_DEPTH
+attribute float a_depth;
+#endif
+
 uniform mat3 u_matrix;
 uniform float u_sizeRatio;
 uniform float u_correctionRatio;
@@ -30,11 +34,6 @@ ${borders
   .join("\n")}
 #endif
 
-#ifdef HAS_DEPTH
-attribute float a_depth;
-uniform float a_maxDepth;
-#endif
-
 const float bias = 255.0 / 254.0;
 const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
 
@@ -52,7 +51,7 @@ void main() {
   v_diffVector = diffVector;
 
   #ifdef HAS_DEPTH
-  gl_Position.z = a_depth / a_maxDepth;
+  gl_Position.z = a_depth;
   #endif
 
   #ifdef PICKING_MODE

packages/node-image/src/factory.ts

@@ -112,7 +112,6 @@ export default function getNodeImageProgram<
           "u_colorizeImages",
           "u_keepWithinCircle",
           "u_atlas",
-          ...(this.hasDepth ? ["a_maxDepth"] : []),
         ],
         ATTRIBUTES: [
           { name: "a_position", size: 2, type: FLOAT },
@@ -277,8 +276,6 @@ export default function getNodeImageProgram<
       );
       gl.uniform1i(u_colorizeImages, drawingMode === "color" ? 1 : 0);
       gl.uniform1i(u_keepWithinCircle, keepWithinCircle ? 1 : 0);
-
-      if (this.hasDepth) gl.uniform1f(uniformLocations.a_maxDepth, params.maxNodesDepth);
     }
   };
 }

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

@@ -8,6 +8,10 @@ attribute float a_angle;
 attribute vec4 a_texture;
 attribute float a_textureIndex;
 
+#ifdef HAS_DEPTH
+attribute float a_depth;
+#endif
+
 uniform mat3 u_matrix;
 uniform float u_sizeRatio;
 uniform float u_correctionRatio;
@@ -18,11 +22,6 @@ varying float v_radius;
 varying vec4 v_texture;
 varying float v_textureIndex;
 
-#ifdef HAS_DEPTH
-attribute float a_depth;
-uniform float a_maxDepth;
-#endif
-
 const float bias = 255.0 / 254.0;
 const float marginRatio = 1.05;
 
@@ -40,7 +39,7 @@ void main() {
   v_radius = size / 2.0 / marginRatio;
 
   #ifdef HAS_DEPTH
-  gl_Position.z = a_depth / a_maxDepth;
+  gl_Position.z = a_depth;
   #endif
 
   #ifdef PICKING_MODE

packages/node-piechart/src/factory.ts

@@ -41,7 +41,6 @@ export default function getNodePiechartProgram<
           "u_cameraAngle",
           "u_matrix",
           "u_defaultColor",
-          ...(this.hasDepth ? ["a_maxDepth"] : []),
           ...("value" in offset ? ["u_offset"] : []),
           ...slices.flatMap(({ color }, i) => ("value" in color ? [`u_sliceColor_${i + 1}`] : [])),
         ],
@@ -97,7 +96,6 @@ export default function getNodePiechartProgram<
       gl.uniform1f(u_cameraAngle, params.cameraAngle);
       gl.uniformMatrix3fv(u_matrix, false, params.matrix);
 
-      if (this.hasDepth) gl.uniform1f(uniformLocations.a_maxDepth, params.maxNodesDepth);
       if ("value" in offset) gl.uniform1f(uniformLocations.u_offset, offset.value);
 
       const [r, g, b, a] = colorToArray(options.defaultColor || DEFAULT_COLOR);

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

@@ -8,6 +8,10 @@ attribute vec2 a_position;
 attribute float a_size;
 attribute float a_angle;
 
+#ifdef HAS_DEPTH
+attribute float a_depth;
+#endif
+
 uniform mat3 u_matrix;
 uniform float u_sizeRatio;
 uniform float u_correctionRatio;
@@ -33,11 +37,6 @@ ${slices
   .join("\n")}
 #endif
 
-#ifdef HAS_DEPTH
-attribute float a_depth;
-uniform float a_maxDepth;
-#endif
-
 const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
 
 void main() {
@@ -55,7 +54,7 @@ void main() {
   ${"attribute" in offset ? "v_offset = a_offset;\n" : ""}
 
   #ifdef HAS_DEPTH
-  gl_Position.z = a_depth / a_maxDepth;
+  gl_Position.z = a_depth;
   #endif
 
   #ifdef PICKING_MODE

packages/sigma/src/rendering/program.ts

@@ -333,6 +333,7 @@ export abstract class Program<
 
     if (this.hasDepth) {
       gl.enable(gl.DEPTH_TEST);
+      gl.depthFunc(gl.LEQUAL);
     } else {
       gl.disable(gl.DEPTH_TEST);
     }

packages/sigma/src/rendering/programs/edge-arrow-head/index.ts

@@ -19,6 +19,15 @@ export const DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS: CreateEdgeArrowHeadProgram
   widenessToThicknessRatio: 2,
 };
 
+const UNIFORMS = [
+  "u_matrix",
+  "u_sizeRatio",
+  "u_correctionRatio",
+  "u_minEdgeThickness",
+  "u_lengthToThicknessRatio",
+  "u_widenessToThicknessRatio",
+] as const;
+
 export function createEdgeArrowHeadProgram<
   N extends Attributes = Attributes,
   E extends Attributes = Attributes,
@@ -33,22 +42,14 @@ export function createEdgeArrowHeadProgram<
     N extends Attributes = Attributes,
     E extends Attributes = Attributes,
     G extends Attributes = Attributes,
-  > extends EdgeProgram<string, N, E, G> {
+  > extends EdgeProgram<(typeof UNIFORMS)[number], N, E, G> {
     getDefinition() {
       return {
         VERTICES: 3,
         VERTEX_SHADER_SOURCE,
         FRAGMENT_SHADER_SOURCE,
         METHOD: WebGLRenderingContext.TRIANGLES,
-        UNIFORMS: [
-          "u_matrix",
-          "u_sizeRatio",
-          "u_correctionRatio",
-          "u_minEdgeThickness",
-          "u_lengthToThicknessRatio",
-          "u_widenessToThicknessRatio",
-          ...(this.hasDepth ? ["a_maxDepth"] : []),
-        ],
+        UNIFORMS,
         ATTRIBUTES: [
           { name: "a_position", size: 2, type: FLOAT },
           { name: "a_normal", size: 2, type: FLOAT },
@@ -126,8 +127,6 @@ export function createEdgeArrowHeadProgram<
       gl.uniform1f(u_minEdgeThickness, params.minEdgeThickness);
       gl.uniform1f(u_lengthToThicknessRatio, options.lengthToThicknessRatio);
       gl.uniform1f(u_widenessToThicknessRatio, options.widenessToThicknessRatio);
-
-      if (this.hasDepth) gl.uniform1f(uniformLocations.a_maxDepth, params.maxEdgesDepth);
     }
   };
 }

packages/sigma/src/rendering/programs/edge-clamped/index.ts

@@ -16,6 +16,17 @@ export const DEFAULT_EDGE_CLAMPED_PROGRAM_OPTIONS: CreateEdgeClampedProgramOptio
   lengthToThicknessRatio: DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS.lengthToThicknessRatio,
 };
 
+const UNIFORMS = [
+  "u_matrix",
+  "u_zoomRatio",
+  "u_sizeRatio",
+  "u_correctionRatio",
+  "u_pixelRatio",
+  "u_feather",
+  "u_minEdgeThickness",
+  "u_lengthToThicknessRatio",
+] as const;
+
 export function createEdgeClampedProgram<
   N extends Attributes = Attributes,
   E extends Attributes = Attributes,
@@ -30,24 +41,14 @@ export function createEdgeClampedProgram<
     N extends Attributes = Attributes,
     E extends Attributes = Attributes,
     G extends Attributes = Attributes,
-  > extends EdgeProgram<string, N, E, G> {
+  > extends EdgeProgram<(typeof UNIFORMS)[number], N, E, G> {
     getDefinition() {
       return {
         VERTICES: 6,
         VERTEX_SHADER_SOURCE,
         FRAGMENT_SHADER_SOURCE,
         METHOD: WebGLRenderingContext.TRIANGLES,
-        UNIFORMS: [
-          "u_matrix",
-          "u_zoomRatio",
-          "u_sizeRatio",
-          "u_correctionRatio",
-          "u_pixelRatio",
-          "u_feather",
-          "u_minEdgeThickness",
-          "u_lengthToThicknessRatio",
-          ...(this.hasDepth ? ["a_maxDepth"] : []),
-        ],
+        UNIFORMS,
         ATTRIBUTES: [
           { name: "a_positionStart", size: 2, type: FLOAT },
           { name: "a_positionEnd", size: 2, type: FLOAT },
@@ -142,8 +143,6 @@ export function createEdgeClampedProgram<
       gl.uniform1f(u_feather, params.antiAliasingFeather);
       gl.uniform1f(u_minEdgeThickness, params.minEdgeThickness);
       gl.uniform1f(u_lengthToThicknessRatio, options.lengthToThicknessRatio);
-
-      if (this.hasDepth) gl.uniform1f(uniformLocations.a_maxDepth, params.maxEdgesDepth);
     }
   };
 }

packages/sigma/src/rendering/programs/edge-clamped/vert.glsl.ts

@@ -10,6 +10,10 @@ attribute float a_positionCoef;
 attribute float a_radius;
 attribute float a_radiusCoef;
 
+#ifdef HAS_DEPTH
+attribute float a_depth;
+#endif
+
 uniform mat3 u_matrix;
 uniform float u_zoomRatio;
 uniform float u_sizeRatio;
@@ -23,12 +27,6 @@ varying vec4 v_color;
 varying vec2 v_normal;
 varying float v_thickness;
 varying float v_feather;
-
-#ifdef HAS_DEPTH
-attribute float a_depth;
-uniform float a_maxDepth;
-#endif
-
 const float bias = 255.0 / 254.0;
 
 void main() {
@@ -63,7 +61,7 @@ void main() {
   v_feather = u_feather * u_correctionRatio / u_zoomRatio / u_pixelRatio * 2.0;
 
   #ifdef HAS_DEPTH
-  gl_Position.z = a_depth / a_maxDepth;
+  gl_Position.z = a_depth;
   #endif
 
   #ifdef PICKING_MODE

packages/sigma/src/rendering/programs/edge-line/index.ts

@@ -17,18 +17,20 @@ import VERTEX_SHADER_SOURCE from "./vert.glsl";
 
 const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
+const UNIFORMS = ["u_matrix"] as const;
+
 export default class EdgeLineProgram<
   N extends Attributes = Attributes,
   E extends Attributes = Attributes,
   G extends Attributes = Attributes,
-> extends EdgeProgram<string, N, E, G> {
+> extends EdgeProgram<(typeof UNIFORMS)[number], N, E, G> {
   getDefinition() {
     return {
       VERTICES: 2,
       VERTEX_SHADER_SOURCE,
       FRAGMENT_SHADER_SOURCE,
       METHOD: WebGLRenderingContext.LINES,
-      UNIFORMS: ["u_matrix", ...(this.hasDepth ? ["a_maxDepth"] : [])],
+      UNIFORMS,
       ATTRIBUTES: [
         { name: "a_position", size: 2, type: FLOAT },
         { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
@@ -76,7 +78,5 @@ export default class EdgeLineProgram<
     const { u_matrix } = uniformLocations;
 
     gl.uniformMatrix3fv(u_matrix, false, params.matrix);
-
-    if (this.hasDepth) gl.uniform1f(uniformLocations.a_maxDepth, params.maxEdgesDepth);
   }
 }

packages/sigma/src/rendering/programs/edge-line/vert.glsl.ts

@@ -4,15 +4,14 @@ attribute vec4 a_id;
 attribute vec4 a_color;
 attribute vec2 a_position;
 
-uniform mat3 u_matrix;
-
-varying vec4 v_color;
-
 #ifdef HAS_DEPTH
 attribute float a_depth;
-uniform float a_maxDepth;
 #endif
 
+uniform mat3 u_matrix;
+
+varying vec4 v_color;
+
 const float bias = 255.0 / 254.0;
 
 void main() {
@@ -24,7 +23,7 @@ void main() {
   );
 
   #ifdef HAS_DEPTH
-  gl_Position.z = a_depth / a_maxDepth;
+  gl_Position.z = a_depth;
   #endif
 
   #ifdef PICKING_MODE