Combined (border+image) Program Node Rendering Issue

[oda79]

Combined (border+image) Program Node Rendering Issue

Description

When using a combined program (node-image and node-border) for rendering nodes, overlapping nodes appear messy. The nodes' borders are rendered separately and on a different layer from their images, resulting in a 'transparent background effect' or incorrect clipping areas. This issue is critical for large graphs, as graphology lacks collision layout, leading to massive node overlap.

Details

• Sigma.js version: 3.0.0-beta.18
• Graphology version: 0.25.4
• Operating system: Windows 11
• Web browser: Google Chrome Version 124.0.6367.202 (Official Build) (64-bit)

Steps to Reproduce

1. Visit the live example: Codesandbox Example
2. Observe the rendering of overlapping nodes.

Expected Behavior

When nodes overlap, their borders should be clipped accordingly, similar to the node 'B' in the reference image below:

Actual Behavior

Nodes' borders are displayed regardless of the nodes' z-position, leading to visual artifacts and a cluttered appearance:

Additional Information

This issue becomes more noticeable and problematic for large graphs due to the lack of collision layout in Graphology, causing significant node overlap.

[jacomyal]

@oda79 Thanks for that report!

I totally get this issue, and that's bad, and I have no idea how to solve it yet. Maybe something with z indexing, I'll try as soon as I can.

About collision layout in Graphology though, you can use graphology-layout-noverlap. It was not working properly with sigma.js before because we reinterpolated node sizes before, but since v3 you can use zoomToSizeRatioFunction and itemSizesReference (like in this example) to render sizes exactly as they are in the data, which allows graphology-layout-noverlap to work properly.

I hope this helps, until I find how to solve the initial problem.

[jacomyal]

Just to keep you updated, I started digging, and enabling the depth buffer might be the solution, though it kinda collides with alpha blending at the moment. I'll keep trying when I have some time.

(source)

[oda79]

Thank you for the update! And also for the hint about using zoomToSizeRatioFunction and itemSizesReference, these options made a lot of difference.

In general, graphology layouts are a bit weird in comparison to d3-force, and they can not be combined.

Regarding the issue, to overcome it I made a new node-image-border program/package, which is a combination of node-image and node-border. It draws a circle node with one outer border and image/colored pictorgam/color inside. In addition, I added an alpha attribute to a node (0..1). All settings are similar to these of the parent programs. So, it looks like the following.

It is definitely not the fix. But if is worth being added to the packages, I guess it needs a new issue for a further PR.

Thanks for your efforts!

[jacomyal]

Update:

I found a way to fix the issue using the discard; GLSL instruction (source). Unfortunately, it supposedly has a bad impact on performances... So I keep looking, but in the worst case we could imagine having those discard; only used in the shaders when the zIndex setting is set, for instance (using GLSL macros).

[jacomyal]

FYI I've been working on a fix these last days, and it starts working:
https://github.com/jacomyal/sigma.js/tree/fix-1427

The main issue that remains is that using discard; means that we cannot draw behind anti-aliased pixels, and it is visible sometimes:

[jacomyal]

After some more digging, it appears that one solution to solve that glitch would be to implement some "order independent transparency" technique, such as this one.