better debug info

cytoscape · Jul 31, 2024 · 0d93557 · 0d93557
1 parent 3755f4f
commit 0d93557
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 47 deletions.
diff --git a/debug/webgl/index.html b/debug/webgl/index.html
@@ -53,15 +53,15 @@
         z-index: 1;
         top: 100%;
         left: 50%;
-        margin-left: -120px;
+        margin-left: -140px;
       }
 
       .tooltip:hover .tooltiptext {
         visibility: visible;
       }
     </style>
 
-    <title>cytoscape.js WebGL2 debug page</title>
+    <title>cy.js WebGL debug page</title>
 
   </head>
 
@@ -136,7 +136,7 @@ <h2>WebGL Settings</h2>
         </div>
         <br>
         <div>
-          Textures Per Batch: 
+          Max Textures Per Batch: 
           <select id="texture-units-select">
             <option value="2">2</option>
             <option value="4">4</option>
@@ -153,7 +153,7 @@ <h2>WebGL Settings</h2>
         </div>
         <br>
         <div>
-          Elements Per Batch:
+          Max Elements Per Batch:
           <select id="batch-size-select">
             <option value="1024">1024</option>
             <option value="2048">2048</option>

diff --git a/src/extensions/renderer/canvas/webgl/drawing-edges-webgl.js b/src/extensions/renderer/canvas/webgl/drawing-edges-webgl.js
@@ -232,15 +232,15 @@ export class EdgeDrawing {
     }
   }
 
+  startFrame(panZoomMatrix, debugInfo) {
+    this.panZoomMatrix = panZoomMatrix
+    this.debugInfo = debugInfo;
+  }
 
-  startBatch(panZoomMatrix) {
-    if(panZoomMatrix) {
-      this.panZoomMatrix = panZoomMatrix;
-    }
+  startBatch() {
     this.instanceCount = 0;
   }
 
-
   draw(edge) {
     // edge points and arrow angles etc are calculated by the base renderer and cached in the rscratch object
     const rs = edge._private.rscratch;
@@ -284,23 +284,22 @@ export class EdgeDrawing {
   }
 
   endBatch() {
-    const { gl, program, vao, instanceCount, vertexCount } = this;
-    if(instanceCount === 0) 
+    const { gl, program, vao, vertexCount, instanceCount: count } = this;
+    if(count === 0) 
       return;
 
     gl.useProgram(program);
     gl.bindVertexArray(vao);
 
     // buffer the attribute data
-    this.sourceTargetBuffer.bufferSubData(instanceCount);
-    this.lineWidthBuffer.bufferSubData(instanceCount);
-    this.lineColorBuffer.bufferSubData(instanceCount);
-
-    this.drawArrowsBuffer.bufferSubData(instanceCount);
-    this.sourceArrowColorBuffer.bufferSubData(instanceCount);
-    this.targetArrowColorBuffer.bufferSubData(instanceCount);
-    this.sourceArrowTransformBuffer.bufferSubData(instanceCount);
-    this.targetArrowTransformBuffer.bufferSubData(instanceCount);
+    this.sourceTargetBuffer.bufferSubData(count);
+    this.lineWidthBuffer.bufferSubData(count);
+    this.lineColorBuffer.bufferSubData(count);
+    this.drawArrowsBuffer.bufferSubData(count);
+    this.sourceArrowColorBuffer.bufferSubData(count);
+    this.targetArrowColorBuffer.bufferSubData(count);
+    this.sourceArrowTransformBuffer.bufferSubData(count);
+    this.targetArrowTransformBuffer.bufferSubData(count);
 
     // Set the projection matrix uniform
     gl.uniformMatrix3fv(program.uPanZoomMatrix, false, this.panZoomMatrix);
@@ -310,10 +309,16 @@ export class EdgeDrawing {
     gl.uniform4fv(program.uBGColor, webglBgColor);
 
     // draw!
-    gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, instanceCount);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, count);
 
     gl.bindVertexArray(null);
 
+    if(this.debugInfo) {
+      this.debugInfo.push({
+        count
+      });
+    }
+
     // start another batch, even if not needed
     this.startBatch();
   }

diff --git a/src/extensions/renderer/canvas/webgl/drawing-nodes-webgl.js b/src/extensions/renderer/canvas/webgl/drawing-nodes-webgl.js
@@ -37,18 +37,7 @@ export class NodeDrawing {
     this.overlayUnderlay = this.initOverlayUnderlay(); // used for overlay/underlay shapes
     this.renderTypes = new Map(); // string -> object
 
-  }
-
-  printDebug() {
-    console.log('NodeDrawing:')
-    for(let [ type, opts ] of this.renderTypes) {
-      if(!opts.isOverlayOrUnderlay) {
-        const { styleKeyToAtlas } = opts;
-        const keyCount = styleKeyToAtlas.size;
-        const atlasCount = new Set(styleKeyToAtlas.values()).size;
-        console.log(`  ${type}: ${keyCount} keys, ${atlasCount} atlases`);
-      }
-    }
+    this.debugInfo = [];
   }
 
   addRenderType(type, options) {
@@ -329,15 +318,16 @@ export class NodeDrawing {
   }
 
 
-  startBatch(panZoomMatrix) {
-    if(panZoomMatrix) {
-      this.panZoomMatrix = panZoomMatrix;
-    }
+  startFrame(panZoomMatrix, debugInfo) {
+    this.panZoomMatrix = panZoomMatrix
+    this.debugInfo = debugInfo;
+  }
+
+  startBatch() {
     this.instanceCount = 0;
     this.atlases = []; // up to 16 texture units for a draw call
   }
 
-
   draw(node, type) {
     const opts = this.renderTypes.get(type);
     if(!opts.isVisible(node))
@@ -413,20 +403,20 @@ export class NodeDrawing {
 
 
   endBatch() {
-    const { gl, program, vao, instanceCount, vertexCount } = this;
-    if(instanceCount === 0) 
+    const { gl, program, vao, vertexCount, instanceCount: count } = this;
+    if(count === 0) 
       return;
 
     gl.useProgram(program);
     gl.bindVertexArray(vao);
 
     // upload the new matrix data
-    this.matrixBuffer1.bufferSubData(instanceCount);
-    this.matrixBuffer2.bufferSubData(instanceCount);
-    this.atlasIdBuffer.bufferSubData(instanceCount);
-    this.layColorBuffer.bufferSubData(instanceCount);
-    this.tex1Buffer.bufferSubData(instanceCount);
-    this.tex2Buffer.bufferSubData(instanceCount);
+    this.matrixBuffer1.bufferSubData(count);
+    this.matrixBuffer2.bufferSubData(count);
+    this.atlasIdBuffer.bufferSubData(count);
+    this.layColorBuffer.bufferSubData(count);
+    this.tex1Buffer.bufferSubData(count);
+    this.tex2Buffer.bufferSubData(count);
 
     // Activate all the texture units that we need
     for(let i = 0; i < this.atlases.length; i++) {
@@ -443,7 +433,7 @@ export class NodeDrawing {
     gl.uniform1i(program.uAtlasSize, this.atlasSize);
 
     // draw!
-    gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, instanceCount);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, count);
 
     gl.bindVertexArray(null);
     gl.bindTexture(gl.TEXTURE_2D, null); // TODO is this right when having multiple texture units?
@@ -456,8 +446,35 @@ export class NodeDrawing {
     // nodeContext.drawImage(this.atlases[1].canvas, 0, 0);
     // nodeContext.restore();
 
+    if(this.debugInfo) {
+      this.debugInfo.push({
+        type: 'node',
+        count,
+        atlasCount: this.atlases.length
+      });
+    }
+
     // start the next batch, even if not needed
     this.startBatch();
   }
 
+
+  getAtlasDebugInfo() {
+    const debugInfo = [];
+    for(let [ type, opts ] of this.renderTypes) {
+      if(!opts.isOverlayOrUnderlay) {
+        debugInfo.push({
+          type,
+          keyCount: opts.styleKeyToAtlas.size,
+          atlasCount: new Set(opts.styleKeyToAtlas.values()).size
+        });
+      }
+    }
+    return debugInfo;
+  }
+
+  getDebugInfo() {
+    return this.debugInfo;
+  }
+
 }