[sigma] Fixes #1397

The solution is to encode item IDs in only 3 channels (R, G and B), but
sending a full 4 channels color, but with a hard-coded alpha at 1.

It is non-optimal (we encode a 3 bytes data as a 4 bytes integer in the
ByteArray), but it solves the issue quite well.

Details:
- Updates indexToColor and colorToIndex to fit our solution
- Updates all vertex shaders so that the `v_color.a *= bias;` correction
  is also applied to the picking layer colors
- Updates program.ts to enable alpha blending for the picking layer

Author: jacomyal

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

@@ -32,6 +32,7 @@ void main() {
   #else
   // For normal mode, we use the color:
   v_color = a_color;
-  v_color.a *= bias;
   #endif
+
+  v_color.a *= bias;
 }

packages/sigma/src/rendering/program.ts

@@ -324,10 +324,15 @@ export abstract class Program<Uniform extends string = string> implements Abstra
   abstract setUniforms(params: RenderParams, programInfo: ProgramInfo): void;
 
   protected renderProgram(params: RenderParams, programInfo: ProgramInfo): void {
-    const { gl, program, isPicking } = programInfo;
+    const { gl, program } = programInfo;
 
-    if (!isPicking) gl.enable(gl.BLEND);
-    else gl.disable(gl.BLEND);
+    // With the current fix for #1397, the alpha blending is enabled for the
+    // picking layer:
+    gl.enable(gl.BLEND);
+
+    // Original code:
+    // if (!isPicking) gl.enable(gl.BLEND);
+    // else gl.disable(gl.BLEND);
 
     gl.useProgram(program);
     this.setUniforms(params, programInfo);

packages/sigma/src/rendering/programs/edge-arrow-head/vert.glsl

@@ -57,6 +57,7 @@ void main() {
   #else
   // For normal mode, we use the color:
   v_color = a_color;
-  v_color.a *= bias;
   #endif
+
+  v_color.a *= bias;
 }

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

@@ -54,6 +54,7 @@ void main() {
   #else
   // For normal mode, we use the color:
   v_color = a_color;
-  v_color.a *= bias;
   #endif
+
+  v_color.a *= bias;
 }

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

@@ -22,6 +22,7 @@ void main() {
   #else
   // For normal mode, we use the color:
   v_color = a_color;
-  v_color.a *= bias;
   #endif
+
+  v_color.a *= bias;
 }

packages/sigma/src/rendering/programs/edge-rectangle/vert.glsl

@@ -51,6 +51,7 @@ void main() {
   #else
   // For normal mode, we use the color:
   v_color = a_color;
-  v_color.a *= bias;
   #endif
+
+  v_color.a *= bias;
 }

packages/sigma/src/rendering/programs/edge-triangle/vert.glsl

@@ -36,6 +36,7 @@ void main() {
   #else
   // For normal mode, we use the color:
   v_color = a_color;
-  v_color.a *= bias;
   #endif
+
+  v_color.a *= bias;
 }

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

@@ -36,6 +36,7 @@ void main() {
   #else
   // For normal mode, we use the color:
   v_color = a_color;
-  v_color.a *= bias;
   #endif
+
+  v_color.a *= bias;
 }

packages/sigma/src/rendering/programs/node-image/vert.glsl

@@ -34,9 +34,10 @@ void main() {
   #else
   // For normal mode, we use the color:
   v_color = a_color;
-  v_color.a *= bias;
 
   // Pass the texture coordinates:
   v_texture = a_texture;
   #endif
+
+  v_color.a *= bias;
 }

packages/sigma/src/rendering/programs/node-point/vert.glsl

@@ -32,6 +32,7 @@ void main() {
   #else
   // For normal mode, we use the color:
   v_color = a_color;
-  v_color.a *= bias;
   #endif
+
+  v_color.a *= bias;
 }

packages/sigma/src/sigma.ts

@@ -799,8 +799,9 @@ export default class Sigma<GraphType extends Graph = Graph> extends TypedEventEm
     // Add data to programs
     for (let i = 0, l = nodes.length; i < l; i++) {
       const node = nodes[i];
-      itemIDsIndex[incrID] = { type: "node", id: node };
+
       nodeIndices[node] = incrID;
+      itemIDsIndex[nodeIndices[node]] = { type: "node", id: node };
       incrID++;
 
       const data = this.nodeDataCache[node];
@@ -842,8 +843,8 @@ export default class Sigma<GraphType extends Graph = Graph> extends TypedEventEm
     for (let i = 0, l = edges.length; i < l; i++) {
       const edge = edges[i];
 
-      itemIDsIndex[incrID] = { type: "edge", id: edge };
       edgeIndices[edge] = incrID;
+      itemIDsIndex[edgeIndices[edge]] = { type: "edge", id: edge };
       incrID++;
 
       const data = this.edgeDataCache[edge];

packages/sigma/src/utils/index.ts

@@ -314,18 +314,31 @@ export function indexToColor(index: number): number {
   // If the index is already computed, we yield it
   if (typeof FLOAT_INDEX_CACHE[index] !== "undefined") return FLOAT_INDEX_CACHE[index];
 
-  const r = (index & 0xff000000) >>> 24;
-  const g = (index & 0x00ff0000) >>> 16;
-  const b = (index & 0x0000ff00) >>> 8;
-  const a = index & 0x000000ff;
+  // To address issue #1397, one strategy is to keep encoding 4 bytes colors,
+  // but with alpha hard-set to 1.0 (or 255):
+  const r = (index & 0x00ff0000) >>> 16;
+  const g = (index & 0x0000ff00) >>> 8;
+  const b = index & 0x000000ff;
+  const a = 0x000000ff;
+
+  // The original 4 bytes color encoding was the following:
+  // const r = (index & 0xff000000) >>> 24;
+  // const g = (index & 0x00ff0000) >>> 16;
+  // const b = (index & 0x0000ff00) >>> 8;
+  // const a = index & 0x000000ff;
 
-  const color = rgbaToFloat(r, g, b, a);
+  const color = rgbaToFloat(r, g, b, a, true);
   FLOAT_INDEX_CACHE[index] = color;
 
   return color;
 }
-export function colorToIndex(r: number, g: number, b: number, a: number): number {
-  return a + (b << 8) + (g << 16) + (r << 24);
+export function colorToIndex(r: number, g: number, b: number, _a: number): number {
+  // As for the function indexToColor, because of #1397 and the "alpha is always
+  // 1.0" strategy, we need to fix this function as well:
+  return b + (g << 8) + (r << 16);
+
+  // The original 4 bytes color decoding is the following:
+  // return a + (b << 8) + (g << 16) + (r << 24);
 }
 
 /**