Add a per-layer opacity property

[nickidlugash]

Background: mapbox/mapbox-gl-js#859 (comment)

Is this currently possible for JS/native to render (or will it ever be)?

Useful for layers that are designed to have overlapping geometries, such as all the layers in Mapbox Terrain.

[nickidlugash]

It looks like the current opacity properties have switched to per-geometry. So I guess the new question is: can we add a per-layer opacity property? Useful for tunnels on basemaps:

@samanpwbb @ajashton Any thoughts?

@ansis @kkaefer is this feasible?

[samanpwbb]

What if setting RGBA fill/stroke was per-feature while setting Opacity was per layer?

Both per-feature and per-layer are important, but if I had to pick one I'd pick per-layer (to avoid the kinds of problems you can see in the screenshot above).

[nickidlugash]

What if setting RGBA fill/stroke was per-feature while setting Opacity was per layer?

This seems like a good idea for me. I don't currently tend to use a lot of RGBA values, but this might make more sense than implementing two different opacity properties for each layer type.

[kkaefer]

Per-layer and per-feature alpha values are hard to implement; a per-layer alpha value means that we'd have to render to a buffer first, then composite onto the main framebuffer.

[nickidlugash]

Per-layer and per-feature alpha values are hard to implement; a per-layer alpha value means that we'd have to render to a buffer first, then composite onto the main framebuffer.

@kkaefer does this mean that having a per-layer opacity property would take a lot of time/energy but is doable, or that it's something you don't think we should consider doing at all?

[ansis]

We could implement per-layer alpha by just using the depth buffer to prevent double drawing. We would have to draw lines with two calls so that we can draw the solid part first and the antialiasing second. It wouldn't be exactly the same as carto if you have both per-layer and feature-level opacity, but this case doesn't seem that important.

[jfirebaugh]

Can someone define what "per-layer" opacity means precisely? Or with an example? E.g. if you have a layer with a red triangle at 50% opacity on top of a blue square at 50% opacity, with a "layer opacity" of 50%, how is that supposed to render?

[nickidlugash]

@jfirebaugh I think like this (although I'm not sure I'm rendering @ansis's suggestion correctly):

/cc @samanpwbb

[samanpwbb]

Yep, what @nickidlugash said. I would expect the cartoCSS behavior rather than Ansis's suggested implementation in cases where there is both per-layer and per-feature opacity. Here's an example with strokes that illustrates how per-layer opacity might be preferable:

[jfirebaugh]

Thank you, those examples are great.

I believe the annotations here are correct:

The cartoCSS behavior is the one that requires composited rendering (rendering the layer first to a buffer, then compositing that layer with the scene using the layer-wide opacity).

[ajashton]

Normally it's not really necessary to have both per-object and per-layer opacity on the same layer, just one or the other. So if we can't fully replicate the Mapnik behavior then that's fine, just these two are key:

[jfirebaugh]

With data-driven styling it's already possible to set a different fill-color rgba value for each feature. So it's pretty awkward to prohibit per-feature opacity.

[ezheidtmann]

It looks like this is now implemented for fill layers via the fill-opacity paint property. Is there any way to do this for line layers? The line-opacity property seems to set a per-geometry opacity, at least in js v0.23.0.

[lucaswoj]

This issue was moved to mapbox/mapbox-gl-js#4090