[all] Implements depth in all edge programs

This commit is related to #1427. Details: - Copies code from node programs to edge programs to handle depth - Adds code to clear the depth buffer before rendering - Fixes various node programs depth issues (where the depth wasn't normalized)
jacomyal · Jul 22, 2024 · eb3b2de · eb3b2de
1 parent afb4de4
commit eb3b2de
Show file tree

Hide file tree

Showing 26 changed files with 201 additions and 98 deletions.
diff --git a/packages/edge-curve/src/factory.ts b/packages/edge-curve/src/factory.ts
@@ -20,17 +20,8 @@ export default function createEdgeCurveProgram<
     ...(inputOptions || {}),
   };
   const { arrowHead, curvatureAttribute, drawLabel } = options as CreateEdgeCurveProgramOptions<N, E, G>;
-  const UNIFORMS = [
-    "u_matrix",
-    "u_sizeRatio",
-    "u_dimensions",
-    "u_pixelRatio",
-    "u_feather",
-    "u_minEdgeThickness",
-    ...(arrowHead ? ["u_lengthToThicknessRatio", "u_widenessToThicknessRatio"] : []),
-  ] as const;
 
-  return class EdgeCurveProgram extends EdgeProgram<(typeof UNIFORMS)[number], N, E, G> {
+  return class EdgeCurveProgram extends EdgeProgram<string, N, E, G> {
     drawLabel = drawLabel || createDrawCurvedEdgeLabel<N, E, G>(options);
 
     getDefinition() {
@@ -39,7 +30,16 @@ export default function createEdgeCurveProgram<
         VERTEX_SHADER_SOURCE: getVertexShader(options),
         FRAGMENT_SHADER_SOURCE: getFragmentShader(options),
         METHOD: WebGLRenderingContext.TRIANGLES,
-        UNIFORMS,
+        UNIFORMS: [
+          "u_matrix",
+          "u_sizeRatio",
+          "u_dimensions",
+          "u_pixelRatio",
+          "u_feather",
+          "u_minEdgeThickness",
+          ...(arrowHead ? ["u_lengthToThicknessRatio", "u_widenessToThicknessRatio"] : []),
+          ...(this.hasDepth ? ["a_maxDepth"] : []),
+        ],
         ATTRIBUTES: [
           { name: "a_source", size: 2, type: FLOAT },
           { name: "a_target", size: 2, type: FLOAT },
@@ -48,6 +48,7 @@ export default function createEdgeCurveProgram<
           { name: "a_curvature", size: 1, type: FLOAT },
           { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
           { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
+          ...(this.hasDepth ? [{ name: "a_depth", size: 1, type: FLOAT }] : []),
         ],
         CONSTANT_ATTRIBUTES: [
           { name: "a_current", size: 1, type: FLOAT }, // TODO: could optimize to bool
@@ -91,6 +92,9 @@ export default function createEdgeCurveProgram<
       array[startIndex++] = curvature;
       array[startIndex++] = color;
       array[startIndex++] = edgeIndex;
+      if (this.hasDepth) {
+        array[startIndex++] = data.depth;
+      }
     }
 
     setUniforms(params: RenderParams, { gl, uniformLocations }: ProgramInfo): void {
@@ -103,6 +107,8 @@ 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;
 

diff --git a/packages/edge-curve/src/shader-frag.ts b/packages/edge-curve/src/shader-frag.ts
@@ -73,7 +73,9 @@ ${
     gl_FragColor = mix(v_color, transparent, t);
     #endif
   } else {
-    gl_FragColor = transparent;
+    #ifdef HAS_DEPTH
+    discard;
+    #endif
   }
 }
 `;

diff --git a/packages/edge-curve/src/shader-vert.ts b/packages/edge-curve/src/shader-vert.ts
@@ -36,6 +36,11 @@ 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;
 
@@ -90,6 +95,10 @@ void main() {
 
   position = viewportToClipspace(viewportOffsetPosition, u_dimensions);
   gl_Position = vec4(position, 0, 1);
+
+  #ifdef HAS_DEPTH
+  gl_Position.z = a_depth / a_maxDepth;
+  #endif
     
 ${
   arrowHead

diff --git a/packages/node-border/src/factory.ts b/packages/node-border/src/factory.ts
@@ -40,12 +40,12 @@ export default function getNodeBorderProgram<
           "u_correctionRatio",
           "u_matrix",
           ...borders.flatMap(({ color }, i) => ("value" in color ? [`u_borderColor_${i + 1}`] : [])),
-          ...(this.hasDepth ? ["u_maxZIndex"] : []),
+          ...(this.hasDepth ? ["a_maxDepth"] : []),
         ],
         ATTRIBUTES: [
           { name: "a_position", size: 2, type: FLOAT },
           { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
-          ...(this.hasDepth ? [{ name: "a_zIndex", size: 1, type: FLOAT }] : []),
+          ...(this.hasDepth ? [{ name: "a_depth", size: 1, type: FLOAT }] : []),
           { name: "a_size", size: 1, type: FLOAT },
           ...borders.flatMap(({ color }, i) =>
             "attribute" in color
@@ -95,7 +95,7 @@ export default function getNodeBorderProgram<
         }
       });
 
-      if (this.hasDepth) gl.uniform1f(uniformLocations.u_maxZIndex, params.maxNodesDepth);
+      if (this.hasDepth) gl.uniform1f(uniformLocations.a_maxDepth, params.maxNodesDepth);
     }
   };
 }
diff --git a/packages/node-border/src/shader-vert.ts b/packages/node-border/src/shader-vert.ts
@@ -31,8 +31,8 @@ ${borders
 #endif
 
 #ifdef HAS_DEPTH
-attribute float a_zIndex;
-uniform float u_maxZIndex;
+attribute float a_depth;
+uniform float a_maxDepth;
 #endif
 
 const float bias = 255.0 / 254.0;
@@ -52,7 +52,7 @@ void main() {
   v_diffVector = diffVector;
 
   #ifdef HAS_DEPTH
-  gl_Position.z = a_zIndex / u_maxZIndex;
+  gl_Position.z = a_depth / a_maxDepth;
   #endif
 
   #ifdef PICKING_MODE

diff --git a/packages/node-image/src/factory.ts b/packages/node-image/src/factory.ts
@@ -112,14 +112,14 @@ export default function getNodeImageProgram<
           "u_colorizeImages",
           "u_keepWithinCircle",
           "u_atlas",
-          ...(this.hasDepth ? ["u_maxZIndex"] : []),
+          ...(this.hasDepth ? ["a_maxDepth"] : []),
         ],
         ATTRIBUTES: [
           { name: "a_position", size: 2, type: FLOAT },
           { name: "a_size", size: 1, type: FLOAT },
           { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
           { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
-          ...(this.hasDepth ? [{ name: "a_zIndex", size: 1, type: FLOAT }] : []),
+          ...(this.hasDepth ? [{ name: "a_depth", size: 1, type: FLOAT }] : []),
           { name: "a_texture", size: 4, type: FLOAT },
           { name: "a_textureIndex", size: 1, type: FLOAT },
         ],
@@ -278,7 +278,7 @@ 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.u_maxZIndex, params.maxNodesDepth);
+      if (this.hasDepth) gl.uniform1f(uniformLocations.a_maxDepth, params.maxNodesDepth);
     }
   };
 }
diff --git a/packages/node-image/src/shader-vert.ts b/packages/node-image/src/shader-vert.ts
@@ -19,8 +19,8 @@ varying vec4 v_texture;
 varying float v_textureIndex;
 
 #ifdef HAS_DEPTH
-attribute float a_zIndex;
-uniform float u_maxZIndex;
+attribute float a_depth;
+uniform float a_maxDepth;
 #endif
 
 const float bias = 255.0 / 254.0;
@@ -40,7 +40,7 @@ void main() {
   v_radius = size / 2.0 / marginRatio;
 
   #ifdef HAS_DEPTH
-  gl_Position.z = a_zIndex / u_maxZIndex;
+  gl_Position.z = a_depth / a_maxDepth;
   #endif
 
   #ifdef PICKING_MODE

diff --git a/packages/node-piechart/src/factory.ts b/packages/node-piechart/src/factory.ts
@@ -41,14 +41,14 @@ export default function getNodePiechartProgram<
           "u_cameraAngle",
           "u_matrix",
           "u_defaultColor",
-          ...(this.hasDepth ? ["u_maxZIndex"] : []),
+          ...(this.hasDepth ? ["a_maxDepth"] : []),
           ...("value" in offset ? ["u_offset"] : []),
           ...slices.flatMap(({ color }, i) => ("value" in color ? [`u_sliceColor_${i + 1}`] : [])),
         ],
         ATTRIBUTES: [
           { name: "a_position", size: 2, type: FLOAT },
           { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
-          ...(this.hasDepth ? [{ name: "a_zIndex", size: 1, type: FLOAT }] : []),
+          ...(this.hasDepth ? [{ name: "a_depth", size: 1, type: FLOAT }] : []),
           { name: "a_size", size: 1, type: FLOAT },
           ...("attribute" in offset ? [{ name: "a_offset", size: 1, type: FLOAT }] : []),
           ...slices.flatMap(({ color }, i) =>
@@ -97,7 +97,7 @@ export default function getNodePiechartProgram<
       gl.uniform1f(u_cameraAngle, params.cameraAngle);
       gl.uniformMatrix3fv(u_matrix, false, params.matrix);
 
-      if (this.hasDepth) gl.uniform1f(uniformLocations.u_maxZIndex, params.maxNodesDepth);
+      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);

diff --git a/packages/node-piechart/src/shader-vert.ts b/packages/node-piechart/src/shader-vert.ts
@@ -34,8 +34,8 @@ ${slices
 #endif
 
 #ifdef HAS_DEPTH
-attribute float a_zIndex;
-uniform float u_maxZIndex;
+attribute float a_depth;
+uniform float a_maxDepth;
 #endif
 
 const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
@@ -55,7 +55,7 @@ void main() {
   ${"attribute" in offset ? "v_offset = a_offset;\n" : ""}
 
   #ifdef HAS_DEPTH
-  gl_Position.z = a_zIndex / u_maxZIndex;
+  gl_Position.z = a_depth / a_maxDepth;
   #endif
 
   #ifdef PICKING_MODE

diff --git a/packages/sigma/src/rendering/edge.ts b/packages/sigma/src/rendering/edge.ts
@@ -63,7 +63,7 @@ export abstract class EdgeProgram<
   }
 
   abstract processVisibleItem(
-    edgeIndex: number,
+    edgeId: number,
     startIndex: number,
     sourceData: NodeDisplayData,
     targetData: NodeDisplayData,
@@ -147,7 +147,10 @@ export function createEdgeCompoundProgram<
       targetData: NodeDisplayData,
       data: EdgeDisplayData,
     ): void {
-      this.programs.forEach((program) => program.process(edgeIndex, offset, sourceData, targetData, data));
+      const l = this.programs.length;
+      this.programs.forEach((program, i) =>
+        program.process(edgeIndex, offset, sourceData, targetData, { ...data, depth: data.depth + 1 - i / l }),
+      );
     }
 
     render(params: RenderParams): void {

diff --git a/packages/sigma/src/rendering/programs/edge-arrow-head/index.ts b/packages/sigma/src/rendering/programs/edge-arrow-head/index.ts
@@ -9,15 +9,6 @@ import VERTEX_SHADER_SOURCE from "./vert.glsl";
 
 const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
-const UNIFORMS = [
-  "u_matrix",
-  "u_sizeRatio",
-  "u_correctionRatio",
-  "u_minEdgeThickness",
-  "u_lengthToThicknessRatio",
-  "u_widenessToThicknessRatio",
-] as const;
-
 export type CreateEdgeArrowHeadProgramOptions = {
   lengthToThicknessRatio: number;
   widenessToThicknessRatio: number;
@@ -42,20 +33,29 @@ export function createEdgeArrowHeadProgram<
     N extends Attributes = Attributes,
     E extends Attributes = Attributes,
     G extends Attributes = Attributes,
-  > extends EdgeProgram<(typeof UNIFORMS)[number], N, E, G> {
+  > extends EdgeProgram<string, N, E, G> {
     getDefinition() {
       return {
         VERTICES: 3,
         VERTEX_SHADER_SOURCE,
         FRAGMENT_SHADER_SOURCE,
         METHOD: WebGLRenderingContext.TRIANGLES,
-        UNIFORMS,
+        UNIFORMS: [
+          "u_matrix",
+          "u_sizeRatio",
+          "u_correctionRatio",
+          "u_minEdgeThickness",
+          "u_lengthToThicknessRatio",
+          "u_widenessToThicknessRatio",
+          ...(this.hasDepth ? ["a_maxDepth"] : []),
+        ],
         ATTRIBUTES: [
           { name: "a_position", size: 2, type: FLOAT },
           { name: "a_normal", size: 2, type: FLOAT },
           { name: "a_radius", size: 1, type: FLOAT },
           { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
           { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
+          ...(this.hasDepth ? [{ name: "a_depth", size: 1, type: FLOAT }] : []),
         ],
         CONSTANT_ATTRIBUTES: [{ name: "a_barycentric", size: 3, type: FLOAT }],
         CONSTANT_DATA: [
@@ -105,6 +105,9 @@ export function createEdgeArrowHeadProgram<
       array[startIndex++] = radius;
       array[startIndex++] = color;
       array[startIndex++] = edgeIndex;
+      if (this.hasDepth) {
+        array[startIndex++] = data.depth;
+      }
     }
 
     setUniforms(params: RenderParams, { gl, uniformLocations }: ProgramInfo): void {
@@ -123,6 +126,8 @@ 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);
     }
   };
 }

diff --git a/packages/sigma/src/rendering/programs/edge-arrow-head/vert.glsl.ts b/packages/sigma/src/rendering/programs/edge-arrow-head/vert.glsl.ts
@@ -5,6 +5,10 @@ attribute vec2 a_normal;
 attribute float a_radius;
 attribute vec3 a_barycentric;
 
+#ifdef HAS_DEPTH
+attribute float a_depth;
+#endif
+
 #ifdef PICKING_MODE
 attribute vec4 a_id;
 #else
@@ -55,6 +59,10 @@ void main() {
 
   gl_Position = vec4(position, 0, 1);
 
+  #ifdef HAS_DEPTH
+  gl_Position.z = a_depth;
+  #endif
+
   #ifdef PICKING_MODE
   // For picking mode, we use the ID as the color:
   v_color = a_id;