Color and alpha blending bug fix for scenes with transparent gl3d objects #4234

archmoj · 2019-09-30T03:19:17Z

Addressing an old bug in gl3d scenes with transparent objects affected scatter3d, mesh3d, surface, volume and possibly other 3-D traces:
#1267
#3243
#4111

One codepen for comparing before vs after of all 3d mocks with transparency added

Before
After

As well as point clouds (scatter3d plots), this PR improves renderings of volumes and surfaces.

Also please refer to 3632eea that illustrates some issues fixed in this PR.

cc: @plotly/plotly_js

- separate color and alpha blending - the applied algorithm works for point clouds, surfaces as well as volume rendering - remove unnecessary calls to axes draw

archmoj · 2019-09-30T03:22:56Z

package.json

@@ -81,7 +81,7 @@
    "gl-mat4": "^1.2.0",
    "gl-mesh3d": "^2.1.1",
    "gl-plot2d": "^1.4.2",
-    "gl-plot3d": "^2.2.2",
+    "gl-plot3d": "git://github.com/gl-vis/gl-plot3d.git#67b5aed84d02429bbc4e8c5a45d4cd23e03280c6",


gl-vis/gl-plot3d#22

archmoj · 2019-09-30T03:23:34Z

test/image/mocks/gl3d_volume_multiple-traces.json

@@ -6,10 +6,10 @@
            "lighting": {
                "facenormalsepsilon": 0
            },
-            "opacity": 0.2,


This opacity for a volume trace was too high.

archmoj · 2019-09-30T03:24:44Z

test/image/mocks/gl3d_volume_multiple-traces.json

            "opacityscale": "extremes",
-            "colorscale": "Blackbody",


This was a bad colorscale choice for a volume with extreme opacityscale.

etpinard · 2019-09-30T14:50:29Z

Hmm. At first look, the new baseline for the gl3d_opacity-scaling-spikes mock looks worse than before:

@archmoj can you tell us why this happens? Note that, this mock is used on https://plot.ly/javascript/3d-scatter-plots/

etpinard · 2019-09-30T14:53:04Z

gl3d_scatter3d_line3d_error3d_enable-alpha-with-rgba-color also looks off:

Why are we blending the colors here? Shouldn't blending the opacity be sufficient?

archmoj · 2019-09-30T19:14:02Z

Hmm. At first look, the new baseline for the gl3d_opacity-scaling-spikes mock looks worse than before:

@archmoj can you tell us why this happens? Note that, this mock is used on https://plot.ly/javascript/3d-scatter-plots/

This happens because we need to blend colors and opacity values while the opacity values (as well as the marker sizes) are too large on this mock.
On the mentioned mock if you reduce marker.opacity values (now at 0.8 and 0.9) or marker sizes values you would get a nice looking point cloud.
codepen

archmoj · 2019-10-01T00:21:28Z

By applying transparency to our mocks here are some of the cases where this PR can help fix:
Before (left) | After (right)

…me plots

archmoj · 2019-10-02T03:59:36Z

gl3d_scatter3d_line3d_error3d_enable-alpha-with-rgba-color also looks off:

Why are we blending the colors here? Shouldn't blending the opacity be sufficient?

Addressed in 40b1c6c.

archmoj · 2019-10-02T04:05:21Z

@etpinard would you mind review the changes after 40b1c6c?
It would be great to have it in 1.50.0
Thanks.

…fects before this PR

etpinard · 2019-10-02T14:11:42Z

@archmoj can you explain what you did in 40b1c6c that changed the some scatter3d baselines?

etpinard · 2019-10-02T14:12:57Z

Does this underlying mock:

have a set opacity? I can't say that either of the before and after rendering look good.

etpinard · 2019-10-02T14:14:39Z

This looks off to me:

Can you explain why the new baseline is suppositively better?

archmoj · 2019-10-02T15:53:31Z

This looks off to me:

Good call. That one is actually a scatter3d plot!
Fixed by ebc99b8.

archmoj · 2019-10-02T17:22:19Z

Does this underlying mock:

have a set opacity? I can't say that either of the before and after rendering look good.

The opacity values are set to 0.5 for these two mocks.
The one on the left clearly has glitches. I could add another example in that regard.

archmoj · 2019-10-02T17:31:41Z

@archmoj can you explain what you did in 40b1c6c that changed the some scatter3d baselines?

For point-clouds (including scatter3d and cone) the depth mask is recorded when drawing new points.
Plus in respect to your #4234 (comment) for the mentioned traces alpha is applied (instead of color) for blending rgb values (i.e. similar to what used before).

etpinard · 2019-11-18T16:46:16Z

I'm curious @archmoj - what made you close this?

archmoj · 2019-11-18T16:49:36Z

Am working on another branch to make darker color blending not lighter.

archmoj added 2 commits September 29, 2019 12:48

add gl3d point cloud blending test

83a3a29

revise rendering pipeline of scenes with transparent objects

b900d38

- separate color and alpha blending - the applied algorithm works for point clouds, surfaces as well as volume rendering - remove unnecessary calls to axes draw

archmoj added bug something broken status: reviewable labels Sep 30, 2019

archmoj mentioned this pull request Sep 30, 2019

revise rendering pipeline of scenes with transparent objects gl-vis/gl-plot3d#22

Closed

archmoj commented Sep 30, 2019

View reviewed changes

archmoj added this to the v1.50.0 milestone Sep 30, 2019

archmoj added status: discussion needed and removed status: reviewable labels Sep 30, 2019

archmoj removed this from the v1.50.0 milestone Sep 30, 2019

use different algorithms for scatter or cone plots vs surface or volu…

40b1c6c

…me plots

archmoj added status: reviewable and removed status: discussion needed labels Oct 2, 2019

archmoj added 2 commits October 2, 2019 08:59

add failing tests - using current gl-plot3d 2.2.2 i.e. showing the ef…

1792271

…fects before this PR

new gl3d baselines to lock certain transparency issues fixed by this PR

3632eea

handle scatter3d edge case in gl-plot3d

ebc99b8

archmoj added status: on hold and removed status: reviewable labels Oct 3, 2019

archmoj requested a review from alexcjohnson October 6, 2019 22:53

Merge branch 'master' into revise-gl3d-color-and-alpha-blending

2bd5743

archmoj closed this Nov 10, 2019

archmoj deleted the revise-gl3d-color-and-alpha-blending branch December 3, 2019 18:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Color and alpha blending bug fix for scenes with transparent gl3d objects #4234

Color and alpha blending bug fix for scenes with transparent gl3d objects #4234

archmoj commented Sep 30, 2019 •

edited

Loading

archmoj Sep 30, 2019

archmoj Sep 30, 2019

archmoj Sep 30, 2019

etpinard commented Sep 30, 2019

etpinard commented Sep 30, 2019

archmoj commented Sep 30, 2019

archmoj commented Oct 1, 2019 •

edited

Loading

archmoj commented Oct 2, 2019

archmoj commented Oct 2, 2019

etpinard commented Oct 2, 2019 •

edited

Loading

etpinard commented Oct 2, 2019

etpinard commented Oct 2, 2019

archmoj commented Oct 2, 2019 •

edited

Loading

archmoj commented Oct 2, 2019

archmoj commented Oct 2, 2019

etpinard commented Nov 18, 2019

archmoj commented Nov 18, 2019

Color and alpha blending bug fix for scenes with transparent gl3d objects #4234

Color and alpha blending bug fix for scenes with transparent gl3d objects #4234

Conversation

archmoj commented Sep 30, 2019 • edited Loading

archmoj Sep 30, 2019

Choose a reason for hiding this comment

archmoj Sep 30, 2019

Choose a reason for hiding this comment

archmoj Sep 30, 2019

Choose a reason for hiding this comment

etpinard commented Sep 30, 2019

etpinard commented Sep 30, 2019

archmoj commented Sep 30, 2019

archmoj commented Oct 1, 2019 • edited Loading

archmoj commented Oct 2, 2019

archmoj commented Oct 2, 2019

etpinard commented Oct 2, 2019 • edited Loading

etpinard commented Oct 2, 2019

etpinard commented Oct 2, 2019

archmoj commented Oct 2, 2019 • edited Loading

archmoj commented Oct 2, 2019

archmoj commented Oct 2, 2019

etpinard commented Nov 18, 2019

archmoj commented Nov 18, 2019

archmoj commented Sep 30, 2019 •

edited

Loading

archmoj commented Oct 1, 2019 •

edited

Loading

etpinard commented Oct 2, 2019 •

edited

Loading

archmoj commented Oct 2, 2019 •

edited

Loading