Downsizes picking texture for performances

jacomyal · Dec 5, 2023 · 55b850d · 55b850d
1 parent 83941a8
commit 55b850d
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 30 deletions.
diff --git a/src/rendering/webgl/programs/common/program.ts b/src/rendering/webgl/programs/common/program.ts
@@ -33,7 +33,7 @@ function getAttributesItemsCount(attrs: ProgramAttributeSpecification[]): number
 
 export interface ProgramInfo<Uniform extends string = string> {
   name: string;
-  enableAlphaBlending: boolean;
+  isPicking: boolean;
   program: WebGLProgram;
   gl: WebGLRenderingContext | WebGL2RenderingContext;
   frameBuffer: WebGLFramebuffer | null;
@@ -207,7 +207,7 @@ export abstract class Program<Uniform extends string = string> implements Abstra
       constantBuffer: constantBuffer || ({} as WebGLBuffer),
       uniformLocations,
       attributeLocations,
-      enableAlphaBlending: name !== "pick",
+      isPicking: name === "pick",
     };
   }
 
@@ -324,9 +324,9 @@ export abstract class Program<Uniform extends string = string> implements Abstra
   abstract setUniforms(params: RenderParams, programInfo: ProgramInfo): void;
 
   private renderProgram(params: RenderParams, programInfo: ProgramInfo): void {
-    const { gl, program, enableAlphaBlending } = programInfo;
+    const { gl, program, isPicking } = programInfo;
 
-    if (enableAlphaBlending) gl.enable(gl.BLEND);
+    if (!isPicking) gl.enable(gl.BLEND);
     else gl.disable(gl.BLEND);
 
     gl.useProgram(program);
@@ -337,15 +337,22 @@ export abstract class Program<Uniform extends string = string> implements Abstra
   render(params: RenderParams): void {
     if (this.hasNothingToRender()) return;
 
-    this.bindProgram(this.normalProgram);
-    this.renderProgram(params, this.normalProgram);
-    this.unbindProgram(this.normalProgram);
-
     if (this.pickProgram) {
+      this.pickProgram.gl.viewport(
+        0,
+        0,
+        (params.width * params.pixelRatio) / params.downSizingRatio,
+        (params.height * params.pixelRatio) / params.downSizingRatio,
+      );
       this.bindProgram(this.pickProgram);
       this.renderProgram(params, this.pickProgram);
       this.unbindProgram(this.pickProgram);
     }
+
+    this.normalProgram.gl.viewport(0, 0, params.width * params.pixelRatio, params.height * params.pixelRatio);
+    this.bindProgram(this.normalProgram);
+    this.renderProgram(params, this.normalProgram);
+    this.unbindProgram(this.normalProgram);
   }
 
   drawWebGL(method: GLenum, { gl, frameBuffer }: ProgramInfo): void {

diff --git a/src/rendering/webgl/programs/edge.arrowHead.ts b/src/rendering/webgl/programs/edge.arrowHead.ts
@@ -84,11 +84,11 @@ export default class EdgeArrowHeadProgram extends EdgeProgram<(typeof UNIFORMS)[
     array[startIndex++] = edgeIndex;
   }
 
-  setUniforms(params: RenderParams, { gl, uniformLocations }: ProgramInfo): void {
+  setUniforms(params: RenderParams, { gl, uniformLocations, isPicking }: ProgramInfo): void {
     const { u_matrix, u_sizeRatio, u_correctionRatio } = uniformLocations;
 
     gl.uniformMatrix3fv(u_matrix, false, params.matrix);
-    gl.uniform1f(u_sizeRatio, params.sizeRatio);
+    gl.uniform1f(u_sizeRatio, isPicking ? params.downSizedSizeRatio : params.sizeRatio);
     gl.uniform1f(u_correctionRatio, params.correctionRatio);
   }
 }
diff --git a/src/rendering/webgl/programs/edge.rectangle.ts b/src/rendering/webgl/programs/edge.rectangle.ts
@@ -102,12 +102,12 @@ export default class EdgeRectangleProgram extends EdgeProgram<(typeof UNIFORMS)[
     array[startIndex++] = edgeIndex;
   }
 
-  setUniforms(params: RenderParams, { gl, uniformLocations }: ProgramInfo): void {
+  setUniforms(params: RenderParams, { gl, uniformLocations, isPicking }: ProgramInfo): void {
     const { u_matrix, u_zoomRatio, u_correctionRatio, u_sizeRatio } = uniformLocations;
 
     gl.uniformMatrix3fv(u_matrix, false, params.matrix);
     gl.uniform1f(u_zoomRatio, params.zoomRatio);
-    gl.uniform1f(u_sizeRatio, params.sizeRatio);
+    gl.uniform1f(u_sizeRatio, isPicking ? params.downSizedSizeRatio : params.sizeRatio);
     gl.uniform1f(u_correctionRatio, params.correctionRatio);
   }
 }
diff --git a/src/rendering/webgl/programs/edge.triangle.ts b/src/rendering/webgl/programs/edge.triangle.ts
@@ -90,11 +90,11 @@ export default class EdgeTriangleProgram extends EdgeProgram<(typeof UNIFORMS)[n
     array[startIndex++] = edgeIndex;
   }
 
-  setUniforms(params: RenderParams, { gl, uniformLocations }: ProgramInfo): void {
+  setUniforms(params: RenderParams, { gl, uniformLocations, isPicking }: ProgramInfo): void {
     const { u_matrix, u_sizeRatio, u_correctionRatio } = uniformLocations;
 
     gl.uniformMatrix3fv(u_matrix, false, params.matrix);
-    gl.uniform1f(u_sizeRatio, params.sizeRatio);
+    gl.uniform1f(u_sizeRatio, isPicking ? params.downSizedSizeRatio : params.sizeRatio);
     gl.uniform1f(u_correctionRatio, params.correctionRatio);
   }
 }
diff --git a/src/rendering/webgl/programs/node.circle.ts b/src/rendering/webgl/programs/node.circle.ts
@@ -58,11 +58,11 @@ export default class NodeCircleProgram extends NodeProgram<(typeof UNIFORMS)[num
     array[startIndex++] = nodeIndex;
   }
 
-  setUniforms(params: RenderParams, { gl, uniformLocations }: ProgramInfo): void {
+  setUniforms(params: RenderParams, { gl, uniformLocations, isPicking }: ProgramInfo): void {
     const { u_sizeRatio, u_correctionRatio, u_matrix } = uniformLocations;
 
-    gl.uniform1f(u_sizeRatio, params.sizeRatio);
     gl.uniform1f(u_correctionRatio, params.correctionRatio);
+    gl.uniform1f(u_sizeRatio, isPicking ? params.downSizedSizeRatio : params.sizeRatio);
     gl.uniformMatrix3fv(u_matrix, false, params.matrix);
   }
 }
diff --git a/src/rendering/webgl/programs/node.image.ts b/src/rendering/webgl/programs/node.image.ts
@@ -280,14 +280,15 @@ export default function getNodeImageProgram(): NodeProgramConstructor {
       }
     }
 
-    setUniforms(params: RenderParams, { gl, uniformLocations }: ProgramInfo): void {
+    setUniforms(params: RenderParams, { gl, uniformLocations, isPicking }: ProgramInfo): void {
+      const { sizeRatio, downSizedSizeRatio, pixelRatio, matrix } = params;
       this.latestRenderParams = params;
 
       const { u_sizeRatio, u_pixelRatio, u_matrix, u_atlas } = uniformLocations;
 
-      gl.uniform1f(u_sizeRatio, params.sizeRatio);
-      gl.uniform1f(u_pixelRatio, params.pixelRatio);
-      gl.uniformMatrix3fv(u_matrix, false, params.matrix);
+      gl.uniform1f(u_pixelRatio, pixelRatio);
+      gl.uniform1f(u_sizeRatio, isPicking ? downSizedSizeRatio : sizeRatio);
+      gl.uniformMatrix3fv(u_matrix, false, matrix);
       gl.uniform1i(u_atlas, 0);
     }
   };

diff --git a/src/rendering/webgl/programs/node.point.ts b/src/rendering/webgl/programs/node.point.ts
@@ -50,11 +50,14 @@ export default class NodePointProgram extends NodeProgram<(typeof UNIFORMS)[numb
     array[startIndex++] = nodeIndex;
   }
 
-  setUniforms(params: RenderParams, { gl, uniformLocations }: ProgramInfo): void {
+  setUniforms(
+    { sizeRatio, downSizedSizeRatio, pixelRatio, matrix }: RenderParams,
+    { gl, uniformLocations, isPicking }: 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.uniform1f(u_pixelRatio, pixelRatio);
+    gl.uniform1f(u_sizeRatio, isPicking ? downSizedSizeRatio : sizeRatio);
+    gl.uniformMatrix3fv(u_matrix, false, matrix);
   }
 }
diff --git a/src/sigma.ts b/src/sigma.ts
@@ -20,6 +20,7 @@ import {
   CoordinateConversionOverride,
   TypedEventEmitter,
   MouseInteraction,
+  RenderParams,
 } from "./types";
 import {
   createElement,
@@ -169,7 +170,8 @@ export default class Sigma<GraphType extends Graph = Graph> extends TypedEventEm
   private labelGrid: LabelGrid = new LabelGrid();
   private nodeDataCache: Record<string, NodeDisplayData> = {};
   private edgeDataCache: Record<string, EdgeDisplayData> = {};
-  // indices to keep track of the index of the item inside programs
+
+  // Indices to keep track of the index of the item inside programs
   private nodeProgramIndex: Record<string, number> = {};
   private edgeProgramIndex: Record<string, number> = {};
   private nodesWithForcedLabels: Set<string> = new Set<string>();
@@ -197,6 +199,7 @@ export default class Sigma<GraphType extends Graph = Graph> extends TypedEventEm
   private width = 0;
   private height = 0;
   private pixelRatio = getPixelRatio();
+  private pickingDownSizingRatio = 2 * this.pixelRatio;
 
   // Graph State
   private displayedNodeLabels: Set<string> = new Set();
@@ -397,7 +400,17 @@ export default class Sigma<GraphType extends Graph = Graph> extends TypedEventEm
     const pickingTexture = gl.createTexture();
     gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
     gl.bindTexture(gl.TEXTURE_2D, pickingTexture);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      this.width / this.pickingDownSizingRatio,
+      this.height / this.pickingDownSizingRatio,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      null,
+    );
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, pickingTexture, 0);
 
     this.textures[id] = pickingTexture as WebGLTexture;
@@ -435,7 +448,7 @@ export default class Sigma<GraphType extends Graph = Graph> extends TypedEventEm
    */
   private getNodeAtPosition(position: Coordinates): string | null {
     const { x, y } = position;
-    const color = getPixelColor(this.webGLContexts.nodes, this.frameBuffers.nodes, x, y);
+    const color = getPixelColor(this.webGLContexts.nodes, this.frameBuffers.nodes, x, y, this.pickingDownSizingRatio);
     const index = colorToIndex(...color);
     const itemAt = this.itemIDsIndex[index];
 
@@ -697,7 +710,7 @@ export default class Sigma<GraphType extends Graph = Graph> extends TypedEventEm
    * the key of the edge if any, or null else.
    */
   private getEdgeAtPoint(x: number, y: number): string | null {
-    const color = getPixelColor(this.webGLContexts.edges, this.frameBuffers.edges, x, y);
+    const color = getPixelColor(this.webGLContexts.edges, this.frameBuffers.edges, x, y, this.pickingDownSizingRatio);
     const index = colorToIndex(...color);
     const itemAt = this.itemIDsIndex[index];
 
@@ -1085,7 +1098,9 @@ export default class Sigma<GraphType extends Graph = Graph> extends TypedEventEm
         pixelRatio: this.pixelRatio,
         zoomRatio: this.camera.ratio,
         sizeRatio: 1 / this.scaleSize(),
+        downSizedSizeRatio: 1 / this.scaleSize() / this.pickingDownSizingRatio,
         correctionRatio: this.correctionRatio,
+        downSizingRatio: this.pickingDownSizingRatio,
       });
     }
   }
@@ -1171,14 +1186,16 @@ export default class Sigma<GraphType extends Graph = Graph> extends TypedEventEm
     // when I change the graph, the viewport or the camera. It might be useful later so I prefer to let this comment:
     // console.log(this.graphToViewportRatio * this.correctionRatio * this.normalizationFunction.ratio * 2);
 
-    const params = {
+    const params: RenderParams = {
       matrix: this.matrix,
       width: this.width,
       height: this.height,
       pixelRatio: this.pixelRatio,
       zoomRatio: this.camera.ratio,
       sizeRatio: 1 / this.scaleSize(),
+      downSizedSizeRatio: (1 / this.scaleSize()) * this.pickingDownSizingRatio,
       correctionRatio: this.correctionRatio,
+      downSizingRatio: this.pickingDownSizingRatio,
     };
 
     // Drawing nodes

diff --git a/src/types.ts b/src/types.ts
@@ -88,6 +88,8 @@ export interface RenderParams {
   pixelRatio: number;
   correctionRatio: number;
   matrix: Float32Array;
+  downSizingRatio: number;
+  downSizedSizeRatio: number;
 }
 
 /**

diff --git a/src/utils/picking.ts b/src/utils/picking.ts
@@ -3,10 +3,19 @@ export function getPixelColor(
   frameBuffer: WebGLBuffer | null,
   x: number,
   y: number,
+  downSizingRatio = 1,
 ): [number, number, number, number] {
   const pixel = new Uint8Array(4);
   gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
-  gl.readPixels(x, gl.drawingBufferHeight - y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
+  gl.readPixels(
+    x / downSizingRatio,
+    gl.drawingBufferHeight / downSizingRatio - y / downSizingRatio,
+    1,
+    1,
+    gl.RGBA,
+    gl.UNSIGNED_BYTE,
+    pixel,
+  );
   const [r, g, b, a] = pixel;
   return [r, g, b, a];
 }