Opacity for edges

[h-a-s-k]

When exporting using the gephi plugin, opacity seems to work fine(?), however with the latest version of sigma.js it doesn't seem to work when setting the edge color to a rgba value. This would be nice to have since sigma.js has great performance (and doesn't leak memory like a few others) but not having opacity support is a dealbreaker for me.

[RaphaelHansen]

+1

[jacomyal]

Hum, that's weird, sigma does support alpha values:

It looks like there is an issue with how the alpha channel is handled though, because the whiter nodes and edges are, the less the alpha value is considered apparently. So I'll leave the issue opened until I solve this bug.

@h-a-s-k Could you please send some data and/or code, to help me reproduce your issue? Thanks!

[RaphaelHansen]

Hi Alexis,

In case h-a-s-k doesn't get back to you.

My experience is that the 'whiter' or 'brighter' a colour is the more likely it is to turn an opaque white on overlap.

` graph.forEachEdge((edge, attributes, source, target) => {
const targetColor = graph.getNodeAttribute(target, "color") || "#ccc";
const edgeOpacity = 0.5;

  if (targetColor.startsWith("rgb(")) {
    const rgbValues = targetColor.substring(4, targetColor.length - 1).split(",");
    const edgeColor = `rgba(${rgbValues[0]}, ${rgbValues[1]}, ${rgbValues[2]}, ${edgeOpacity})`;
    graph.setEdgeAttribute(edge, "color", edgeColor);
  } else {
    const rgbColor = hexToRgb(targetColor);
    if (rgbColor) {
      const edgeColor = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${edgeOpacity})`;
      graph.setEdgeAttribute(edge, "color", edgeColor);
    } else {
      graph.setEdgeAttribute(edge, "color", targetColor);
    }
  }
});`

Here you can see that the lighter pink/purple colour turns white on overlap.

Darker colours also get brighter, but they are able to avoid turning completely white:

I'm no expert in this field but my hypothesis is that it seems that the rgb values are also compounding ontop of eachother on overlap rather than the expected outcome of only the alpha value increasing when edges overlap.

Hopefully this makes sense.

[h-a-s-k]

I tried setting the alpha both as @RaphaelHansen did and also like you showed in 68da672. On my graph with 100k+ edges using sigma@3.0.0-beta.19.

When every node and edge is set to red with an alpha of 0.01

edges.forEach((edge, idx) => {
	const addedEdge = graph.addEdge(edge.source, edge.target, { size: 1 });
	graph.setEdgeAttribute(addedEdge, `color`, chroma('#ff0000').alpha(0.01).hex());
});

looks like this:

compared to pixi.js with same color and alpha:

Also could be placebo but when panning around using the reducer method it felt slower than setting a color directly with setEdgeAttribute once:

const instance = new Sigma(graph, canvasContainer, {
	labelThreshold: 10,
	hideEdgesOnMove: false,
	renderEdgeLabels: false,

	edgeReducer: (_, attr) => {
		attr.color = chroma('#ff0000').alpha(0.01).hex();
		return attr;
	},
});

[ck-coatue]

I've noticed that EdgeCurvedArrowProgram handles opacity well (doesn't wash out like the other edge/node programs).

[h-a-s-k]

I've noticed that EdgeCurvedArrowProgram handles opacity well (doesn't wash out like the other edge/node programs).

Definitely an improvement

but seems like past a certain (low) alpha number it straight up stops rendering them

[ck-coatue]

figured out if u want to do the same for nodes as well, clone the NodeCircleProgram and change line:

sigma.js/packages/sigma/src/rendering/programs/node-circle/frag.glsl.ts

Line 31 in 23e5373

gl_FragColor = mix(v_color, transparent, t);

to:

gl_FragColor = mix(vec4(v_color.rgb * v_color.a, v_color.a), transparent, t);

I took inspiration from:

sigma.js/packages/edge-curve/src/shader-frag.ts

Line 68 in 23e5373

gl_FragColor = inCurve * vec4(v_color.rgb * v_color.a, v_color.a);

[benny-noumena]

@ck-coatue It seems that this has be undone in the current beta relase.

sigma.js/packages/edge-curve/src/shader-frag.ts

Line 73 in 721ac7e

gl_FragColor = mix(v_color, transparent, t);

Maybe it was for performance reason but I would love to have a way to make edges semi-transparent.

[h-a-s-k]

@ck-coatue It seems that this has be undone in the current beta relase.

sigma.js/packages/edge-curve/src/shader-frag.ts

Line 73 in 721ac7e

gl_FragColor = mix(v_color, transparent, t);

Maybe it was for performance reason but I would love to have a way to make edges semi-transparent.

Yeah last version with working transparency is @sigma/edge-curve@3.0.0-beta.10 for me

[machidevdev]

Hello. Is there any follow up on this? I have been having the same issue of alpha channels overlapping on one another.
example: coarsen -> finer graph, luminosity increases

[seoanezonjic]

Any update about this @jacomyal ? I've the same problem that @h-a-s-k and my larger graphs looks like he shown:

Thank you in advance
Pedro Seoane

[jacomyal]

Hi @seoanezonjic,

So, basically, I want to address this issue with other opacity and z-indexing related issues (#1233 and #1427), by implementing Order Independent Transparency, and joining edges and nodes on the same unique WebGL layer.

This is a tough and impactful feature, which will be the core of version 4 in some future. Unfortunately, our open-source resources at @ouestware are focused on Gephi Lite at the moment. I hope to be able to get some planed scheduled for v4 by the end of the year.

I hope this helps!