PAIR-code/scatter-gl

Issue with overlap and opacity

Opened this issue · 3 comments

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.

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

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).

side by side comparison of zoomed out point clouds

              Default                                                Custom

image image

twitwi@ea01bc8
(to allow passing options)