Issue with overlap and opacity

[twitwi]

Viewing https://pair-code.github.io/scatter-gl/ with 3D disabled and label-based color, it seems that some (non-opaque) points do not let the points behind them be shown.

Here is a zoom of an region of the demo, where, e.g., the yellow-ish point in the middle blends with one of the red circle but not with the other.

Same thing with lower opacity

It looks like the transparency gets kind of premultiplied with the background color.

This behavior makes one of my use case very unusable, where some points have very low opacity points that hide more opaque ones.

Any idea, suggestion of where to start to hack for a fix, or a workaround is welcome.

[twitwi]

After some digging, I think this is an "open problem", I put some references here.

• The ideal solution would be https://en.wikipedia.org/wiki/Order-independent_transparency

• One thing that can be done is to have a kind of particle system rendering, as in https://threejs.org/examples/#webgl_points_sprites using some additive blending.
  This means using custom blending functions https://threejs.org/docs/#api/en/constants/CustomBlendingEquations in place of the default one here

  scatter-gl/src/scatter_plot_visualizer_sprites.ts

  Line 236 in e93b5a4

  blending: THREE.NormalBlending,

On a dark background AdditiveBlending can give this result

This can be achieved by adding styles: { backgroundColor: 0 /*black*/, }, to the ScatterGL constructor, and changing the code linked above with

        // for dark backgrounds
        depthTest: false,
        blending: THREE.CustomBlending,
        //blendEquation: THREE.AddEquation, // default
        //blendSrc: THREE.SrcAlphaFactor, // default
        blendDst: THREE.OneFactor,

For a (default) white background the blending parameters needs to be

        // for light backgrounds
        depthTest: false,
        blending: THREE.CustomBlending,
        //blendEquation: THREE.AddEquation, // default
        blendSrc: THREE.OneMinusSrcAlphaFactor,
        blendDst: THREE.SrcAlphaFactor,

It might become a feature (an option to use this rendering but I think the issue can be close).

[twitwi]

side by side comparison of zoomed out point clouds

              Default                                                Custom

[twitwi]

twitwi@ea01bc8
(to allow passing options)