Drafts picking implementation

Details:
- Breaks renderers API:
  - processVisibleItem takes an additional first argument, nodeId (or
    edgeId for edges), that must be used as a color in the shaders in
    PICKING mode
  - draw becomes setUniforms, and no more has to call the drawGl method.
    Also, it receives a ProgramInfo as an additional input
  - The WebGL method used for drawing must be specified in the
    ProgramDefinition
- Migrates existing programs to picking
- Adds a new WebGL context that draws the picking layer
- Migrates getNodeAtPosition and getEdgeAt to read the new layer
- Deletes everything quadtree related

TODO:
- ATM edges are drawn over nodes on the picking layer, and this must be
  fixed
- Picking should probably be done on their respective layer, but on a
  texture
- The performance impact should be quantified

examples/custom-rendering/node.border.frag.glsl

@@ -11,6 +11,13 @@ void main(void) {
   vec4 white = vec4(1.0, 1.0, 1.0, 1.0);
   float distToCenter = length(gl_PointCoord - vec2(0.5, 0.5));
 
+  #ifdef PICKING_MODE
+  if (distToCenter < radius)
+    gl_FragColor = v_color;
+  else
+    gl_FragColor = transparent;
+  #else
+  // For normal mode, we use the color:
   float t = 0.0;
   if (distToCenter < halfRadius - v_border)
     gl_FragColor = white;
@@ -22,4 +29,5 @@ void main(void) {
     gl_FragColor = mix(transparent, v_color, (radius - distToCenter) / v_border);
   else
     gl_FragColor = transparent;
+  #endif
 }

examples/custom-rendering/node.border.ts

@@ -17,44 +17,44 @@ import { floatColor } from "sigma/utils";
 import { NodeProgram } from "sigma/rendering/webgl/programs/common/node";
 import VERTEX_SHADER_SOURCE from "!raw-loader!./node.border.vert.glsl";
 import FRAGMENT_SHADER_SOURCE from "!raw-loader!./node.border.frag.glsl";
+import { ProgramInfo } from "sigma/rendering/webgl/programs/common/program";
 
 const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_sizeRatio", "u_pixelRatio", "u_matrix"] as const;
 
-export default class NodeBorderProgram extends NodeProgram<typeof UNIFORMS[number]> {
+export default class NodeBorderProgram extends NodeProgram<(typeof UNIFORMS)[number]> {
   getDefinition() {
     return {
       VERTICES: 1,
       VERTEX_SHADER_SOURCE,
       FRAGMENT_SHADER_SOURCE,
+      METHOD: WebGLRenderingContext.POINTS,
       UNIFORMS,
       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 },
       ],
     };
   }
 
-  processVisibleItem(i: number, data: NodeDisplayData) {
+  processVisibleItem(nodeIndex: number, startIndex: number, data: NodeDisplayData) {
     const array = this.array;
 
-    array[i++] = data.x;
-    array[i++] = data.y;
-    array[i++] = data.size;
-    array[i] = floatColor(data.color);
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = data.size;
+    array[startIndex++] = floatColor(data.color);
+    array[startIndex++] = nodeIndex;
   }
 
-  draw(params: RenderParams): void {
-    const gl = this.gl;
-
-    const { u_sizeRatio, u_pixelRatio, u_matrix } = this.uniformLocations;
+  setUniforms(params: RenderParams, { gl, uniformLocations }: ProgramInfo): void {
+    const { u_sizeRatio, u_pixelRatio, u_matrix } = uniformLocations;
 
     gl.uniform1f(u_sizeRatio, params.sizeRatio);
     gl.uniform1f(u_pixelRatio, params.pixelRatio);
     gl.uniformMatrix3fv(u_matrix, false, params.matrix);
-
-    gl.drawArrays(gl.POINTS, 0, this.verticesCount);
   }
 }

examples/custom-rendering/node.border.vert.glsl

@@ -1,6 +1,7 @@
+attribute vec4 a_id;
+attribute vec4 a_color;
 attribute vec2 a_position;
 attribute float a_size;
-attribute vec4 a_color;
 
 uniform float u_sizeRatio;
 uniform float u_pixelRatio;
@@ -25,7 +26,12 @@ void main() {
 
   v_border = (0.5 / a_size) * u_sizeRatio;
 
-  // Extract the color:
+  #ifdef PICKING_MODE
+  // For picking mode, we use the ID as the color:
+  v_color = a_id;
+  #else
+  // For normal mode, we use the color:
   v_color = a_color;
   v_color.a *= bias;
+  #endif
 }

src/core/labels.ts

@@ -2,7 +2,7 @@
  * Sigma.js Labels Heuristics
  * ===========================
  *
- * Miscelleneous heuristics related to label display.
+ * Miscellaneous heuristics related to label display.
  * @module
  */
 import Graph from "graphology-types";