Per-element opacity on Surface plots (opacityscale)

[nicolaskruchten]

Requested in plotly/plotly.py#1859

[lucapinello]

I think the problem is related to this function:

plotly.js/src/lib/gl_format_color.js

Line 79 in 36a48f7

function parseColorScale(cont, alpha) {

This function destroy the alpha information and convert the rgba into rgb with the same global opacity for all the colors.

This function is called when parsing the colormap to plot the surface here:

plotly.js/src/traces/surface/convert.js

Line 408 in adf9bee

var colormap = parseColorScale(data, alpha);

I am more a Python person, am I on the right track? :)

[nicolaskruchten]

I don’t know if “problem” is the word I would use here... At the moment we consciously don’t support alpha in color scales so this is more of a feature request from our perspective today.

There’s also the question of whether or not we can render this correctly and efficiently in webGL with the current code.

[lucapinello]

Fair enough.

BTW this fixed the conversion to support the alpha values:

function parseColorScale(cont, alpha) {
if(alpha === undefined) alpha = 1;

var cOpts = Colorscale.extractOpts(cont);

var colorscale = cOpts.reversescale ?
    Colorscale.flipScale(cOpts.colorscale) :
    cOpts.colorscale;

return colorscale.map(function(elem) {
    var index = elem[0];
    var color = tinycolor(elem[1]);
    var rgb = color.toRgb();
	console.log(rgb);
    return {
        index: index,
        **rgb: [rgb.r, rgb.g, rgb.b, rgb.a]**
    };
});

}

But only if you specify a global opacity <1.0. (0.99 does the trick for me and it works really smoothly)

There must be another setting that overrides this when opacity=1.

Thanks again for the quick reply and for the support.

[nicolaskruchten]

Great! Feel free to submit a pull request, which should cause the tests to run and we’ll see if that shakes anything loose :)

[lucapinello]

Great! Just submitted.

[lucapinello]

Hi Nicolas, After looking at the CircleCI tests I realized that this fixes the per point opacity but it may break the global opacity. In the previous version, you forced to have all the points to have the alpha provided by the users and 1.0 if undefined. This was necessary probably because internally you always use rgba for colormaps and if the alpha was undefined, it was set to 0 by tydicolor2 and the surface was not visible. Here we may need an additional flag to the method to create the Surface (for example use_per_point_opacity= True and Fset this to False by default ) to say that we want to use a per point opacity or have a special value of the global opacity say -1 (this is less clean and less explicit). Anyway, this should be trivial for your team to fix and to decide the best way to allow this. The good news is that this extension doesn't affect performance, I tried yesterday to overlay 10 surfaces and it was still very smooth. Happy to discuss this further. Thanks again for being so responsive, this was fun :) Luca

…

On Sat, Nov 2, 2019 at 5:57 PM Nicolas Kruchten ***@***.***> wrote: Great! Feel free to submit a pull request, which should cause the tests to run and we’ll see if that shakes anything loose :) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4331?email_source=notifications&email_token=AAIH72XEI6KMXQKEYNWKYEDQRXZUDA5CNFSM4JIHGMJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEC5F5BQ#issuecomment-549084806>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIH72ULXF2DXOJH5YK347DQRXZUDANCNFSM4JIHGMJQ> .

[archmoj]

What about implementing opacityscale (similar to volume trace) for surface as well as scatter3d plots?

[lucapinello]

Thanks @archmoj for the feedback. Do you have a link with an example?

[archmoj]

Thanks @archmoj for the feedback. Do you have a link with an example?

@lucapinello
Please view this demo.
At the moment this feature is only implemented for volume plots.

[lucapinello]

I think this is perfect!

…

On Mon, 4 Nov 2019, 9:27 am Mojtaba Samimi, ***@***.***> wrote: Thanks @archmoj <https://github.com/archmoj> for the feedback. Do you have a link with an example? @lucapinello <https://github.com/lucapinello> Please view this demo <https://codepen.io/MojtabaSamimi/pen/wvvyqwL?editors=0010>. At the moment this feature is only implemented for volume plots. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4331?email_source=notifications&email_token=AAIH72WOD75OVJB5EDKHQ4LQSAWOJA5CNFSM4JIHGMJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEC7NRIA#issuecomment-549378208>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIH72VRP3VW37M7E5L6ZKDQSAWOJANCNFSM4JIHGMJQ> .

[archmoj]

What about renaming the title of this ticket to mention opacityscale then?

[lucapinello]

Good idea, @nicolaskruchten do you want to change the title in. Implement opacityscale also in Surface as available in Volume and Scatter3D for consistency.

[etpinard]

@archmoj would adding opacityscale be a valuable addition to the library in your mind?

If so, please tag this ticket with type: feature.

[etpinard]

(not to be confused with #4120)

[archmoj]

Here is a demo where opacityscale is implemented for surface plots.

[nicolaskruchten]

I'm not sure I understand how this opacityscale works... what is it using as data here, z?

[archmoj]

In regard with opacityscale one could pass an array similar to colorscale replacing colors with alpha values.
For example:

[
  [0, 0.2],
  [0.5, 0.3],
  [1, 0.6]
]

would map the opacity of min color to 0.2, the average to 0.3, and the maximum color to 0.6.
There is also strings keys namely "min", "max" and "extremes" to facilitate declaring this.
E.g. the option of "max" maps to [[0, 0.1], [1, 1]] which fades values that are closer to the minimum.

[nicolaskruchten]

It feels like it would be a simpler API to accept the A value of RGBA, no?

[archmoj]

Well, we could potentially add such an option to colorscale.
However it is the way opacityscale introduced by volume as well as gl-mesh3d webgl module.
It covers all the cases where one needs to use different opacity levels steps free from various steps defined by any colorscale.

[nicolaskruchten]

OK, I guess this makes sense. Seems a bit odd to have two separate scales linked to the same value which doesn't share a name with either i.e. z but OK.