use premultiplied alpha

cytoscape · Jun 27, 2024 · c469b9c · c469b9c
1 parent afacfd6
commit c469b9c
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 162 deletions.
diff --git a/debug/webgl/code.js b/debug/webgl/code.js
diff --git a/debug/webgl/networks.js b/debug/webgl/networks.js
@@ -59,15 +59,15 @@ var styles = {
       "label": "data(description)",
       "text-outline-width": 2,
       "color": "#fff",
-      "background-color":   "mapData(NES, -3.14, 3.14, blue, red)",
-      "text-outline-color": "mapData(NES, -3.14, 3.14, blue, red)"
+      "background-color":   "mapData(NES, -3.14, 3.14, #0571b0, #ca0020)",
+      "text-outline-color": "mapData(NES, -3.14, 3.14, #0571b0, #ca0020)"
     }
   },
   {
     selector: "edge",
     style: {
       "line-color" : "#888",
-      "line-opacity": 0.9,
+      "line-opacity": 0.3,
       "curve-style": "haystack",
       "haystack-radius": 0,
       "width": ele => ele.data('similarity_coefficient') * 15,

diff --git a/src/extensions/renderer/canvas/webgl/drawing-edges-webgl.js b/src/extensions/renderer/canvas/webgl/drawing-edges-webgl.js
@@ -56,6 +56,7 @@ export class EdgeDrawing {
 
       void main(void) {
         outColor = vColor;
+        outColor.rgb *= outColor.a; // webgl is expecting premultiplied alpha
       }
     `;
 

diff --git a/src/extensions/renderer/canvas/webgl/drawing-nodes-webgl.js b/src/extensions/renderer/canvas/webgl/drawing-nodes-webgl.js
@@ -13,7 +13,7 @@ const initDefaults = defaults({
 });
 
 const atlasSize = 8192; // square atlas, each side has this many pixels, should be power of 2
-const texPerRow = 5;
+const texPerRow = 10;
 
 const texSize = Math.floor(atlasSize / texPerRow);
 const texPerAtlas = texPerRow * texPerRow;

diff --git a/src/extensions/renderer/canvas/webgl/drawing-redraw-webgl.js b/src/extensions/renderer/canvas/webgl/drawing-redraw-webgl.js
@@ -13,8 +13,8 @@ CRp.initWebgl = function(options, fns) {
   gl.clearColor(0, 0, 0, 0); // background color
   // enable alpha blending of textures
   gl.enable(gl.BLEND);
-  gl.blendEquation(gl.FUNC_ADD);
-  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  // we are using premultiplied alpha
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
 
   const getZeroRotation = () => 0;
   const getLabelRotation = (ele) => r.getTextAngle(ele, null);

diff --git a/src/extensions/renderer/canvas/webgl/webgl-util.js b/src/extensions/renderer/canvas/webgl/webgl-util.js
@@ -45,6 +45,9 @@ export function bufferTexture(gl, texSize, textureCanvas) {
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 
+  // very important, this tells webgl to premultiply colors by the alpha channel
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureCanvas);
   gl.generateMipmap(gl.TEXTURE_2D);