Issue with blending of layers

Actual Result

Lower indexed layers are visible through supposed opaque layers. The blue PathLayer should be fully opaque however the separate [dashed] PathLayer underneath is visible through it. The same happens with a supposed opaque white PolygonLayer on top of a PathLayer.

I’ve not touched any gl parameters. I am only using the high level api provided by deck.gl with core layers.

Expected Result

Lower indexed layers under a layer with no transparency should not be visible.

Reproduce Steps

Have several layers with no transparency (ie. getColor => [0, 0, 0]) and render them over the top of each other.

Code Example

Can/will be followed up if the answer isn’t a simple one!

              <PolygonLayer
                id="road"
                fp64={true}
                coordinateSystem={COORDINATE_SYSTEM.METER_OFFSETS}
                coordinateOrigin={[0, 51]}
                data={roadData.lanes}
                getPolygon={lane => lane.contour}
                stroked={true}
                lineWidthScale={0.2}
                getLineColor={lane => [20, 20, 20]}
                getFillColor={lane => [0, 0, 0]}
              />
              <PathLayer
                id="midlines"
                fp64={true}
                coordinateSystem={COORDINATE_SYSTEM.METER_OFFSETS}
                coordinateOrigin={[0, 51]}
                data={roadData.lanes}
                getPath={lane => lane.midline}
                getColor={lane => [246, 127, 1]}
                widthScale={0.1}
                rounded={true}
                dashJustified={true}
                getDashArray={lane => [20, 10]}
              />
              <PolygonLayer
                id="agents"
                fp64={true}
                coordinateSystem={COORDINATE_SYSTEM.METER_OFFSETS}
                coordinateOrigin={[0, 51]}
                data={framesData[frameIndex]}
                getPolygon={agent => agent.bounds}
                stroked={false}
                getFillColor={lane => [255, 255, 255]}
                extruded={true}
                getElevation={lane => 2}
              />
              <PathLayer
                id="belief-follow-paths"
                fp64={true}
                coordinateSystem={COORDINATE_SYSTEM.METER_OFFSETS}
                coordinateOrigin={[0, 51]}
                data={framesData[frameIndex].filter(
                  agent => agent.belief_trajectories[0].length > 0
                )}
                getPath={agent => agent.belief_trajectories[0]}
                getWidth={agent => agent.beliefs[0]}
                widthScale={3}
                getColor={agent => [0, 121, 165]}
              />

To Do List

• Add label and assign to milestone
• Coding
• Test

[Pessimistress]

@DominusVilicus all colors in deck.gl already support both RGB and RGBA formats.

[AlbertMarashi]

Maybe we need an RFC for this. I can update the docs in the meanwhile

I’d support adding a breaking change for this and making the default opacity 1, and perhaps adding a feature to add opacity via the getColor option with an RGBA array ([0,0,0,0.5] or ([0,0,0,255])