From c469b9c4c4e63ebdf2c68eda2942a9b3e2b2e62f Mon Sep 17 00:00:00 2001 From: Mike Kucera Date: Thu, 27 Jun 2024 16:58:42 -0400 Subject: [PATCH] use premultiplied alpha --- debug/webgl/code.js | 156 ------------------ debug/webgl/networks.js | 6 +- .../canvas/webgl/drawing-edges-webgl.js | 1 + .../canvas/webgl/drawing-nodes-webgl.js | 2 +- .../canvas/webgl/drawing-redraw-webgl.js | 4 +- .../renderer/canvas/webgl/webgl-util.js | 3 + 6 files changed, 10 insertions(+), 162 deletions(-) delete mode 100644 debug/webgl/code.js diff --git a/debug/webgl/code.js b/debug/webgl/code.js deleted file mode 100644 index 795eccf9d..000000000 --- a/debug/webgl/code.js +++ /dev/null @@ -1,156 +0,0 @@ - -const cy = cytoscape({ - container: document.getElementById('cy'), // container to render in - - layout: { - name: 'cose', - animate: false, - }, - - renderer: { - name: 'canvas', - webgl: true, - showFps: true - }, - - style: [ - { - selector: 'node', - style: { - 'label': 'data(id)', - 'text-valign': 'center', - 'color': '#000000', - 'background-color': '#3a7ecf', - 'font-family': 'Helvetica' - }, - }, - { - selector: '#n1', - style: { - 'background-fill': 'linear-gradient', - 'background-gradient-stop-colors': 'cyan magenta yellow', - 'underlay-color': 'red', - 'underlay-shape': 'round-rectangle', - 'underlay-opacity': 0.5 - } - }, - { - selector: '#n2', - style: { - 'background-fill': 'linear-gradient', - 'background-gradient-direction': 'to-left', - 'background-gradient-stop-colors': 'gold red lawngreen' - } - }, - { - selector: '#n3', - style: { - 'background-fill': 'radial-gradient', - 'background-gradient-stop-colors': 'cyan magenta yellow', - 'text-valign': 'top', - 'text-rotation': 3.14/2 - } - }, - { - selector: '#n4', - style: { - "border-color": "black", - "border-style": "dashed", - "border-width": 2, - 'background-opacity': 0.5, - } - }, - { - selector: '#n5', - style: { - "border-color": "red", - "border-style": "dotted", - "border-width": 4, - 'width': 50, - 'background-opacity': 0.5, - 'text-valign': 'top' - } - }, - { - selector: 'edge', - style: { - 'width': 2, - 'line-color': '#3a7ecf', - 'opacity': 0.5, - }, - }, - { - selector: '#n1-n2', - style: { - 'line-style': 'solid' - } - }, - { - selector: '#n1-n3', - style: { - 'line-style': 'dotted' - } - }, - { - selector: '#n1-n4', - style: { - 'line-style': 'dashed' - } - }, - { - selector: '#n1-n5', - style: { - 'line-style': 'dashed', - 'line-dash-pattern': [1, 1, 4, 1], - } - }, - { - selector: '#n2-n3', - style: { - 'line-fill': 'linear-gradient', - 'line-gradient-stop-colors': 'lawngreen red' - } - }, - { - selector: '#n2-n4', - style: { - 'label': 'normal label', - 'font-size': '6px', - 'edge-text-rotation': 'autorotate', - } - }, - { - selector: '#n2-n5', - style: { - 'label': 'bold label', - 'font-size': '6px', - 'edge-text-rotation': 'autorotate', - 'font-weight': 'bold' - } - } - ], - elements: { - nodes: [ - { data: { id: 'n1', weight: 1 } }, - { data: { id: 'n2', weight: 2 } }, - { data: { id: 'n3', weight: 3 } }, - { data: { id: 'n4', weight: 4 } }, - { data: { id: 'n5', weight: 5 } }, - ], - edges: [ - { data: { id:'n1-n2', source: 'n1', target: 'n2', directed: 'false' } }, - { data: { id:'n1-n3', source: 'n1', target: 'n3', directed: 'false' } }, - { data: { id:'n1-n4', source: 'n1', target: 'n4', directed: 'false' } }, - { data: { id:'n1-n5', source: 'n1', target: 'n5', directed: 'false' } }, - { data: { id:'n2-n3', source: 'n2', target: 'n3', directed: 'false' } }, - { data: { id:'n2-n4', source: 'n2', target: 'n4', directed: 'false' } }, - { data: { id:'n2-n5', source: 'n2', target: 'n5', directed: 'false' } }, - { data: { id:'n3-n4', source: 'n3', target: 'n4', directed: 'false' } }, - { data: { id:'n3-n5', source: 'n3', target: 'n5', directed: 'false' } }, - { data: { id:'n4-n5', source: 'n4', target: 'n5', directed: 'false' } }, - ], - }, -}); - -window.cy = cy; -// console.log("hello!"); diff --git a/debug/webgl/networks.js b/debug/webgl/networks.js index 66c6751a5..d6af8d262 100644 --- 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 index 8548c523d..c0624e542 100644 --- 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 index e8b25069d..50cc9db3b 100644 --- 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 index fc9ba5068..15c8b34dc 100644 --- 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 index e16fbb6bc..8fedb82b6 100644 --- 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);