[Feat] Better control over actual color of extruded SolidPolygonLayer surfaces

[zbigg]

Target Use Case

Extruded polygons rendered with SolidPolygon exhibit different coloring behavior than than non-extruded ones.

That's because extruded polygons are rendered with lightning enabled and thus they render color that is combination of what getFillColor returns and how light interacts with given surface.

That means that developer have hard time understanding what will be the final color of his polygpn and it's common that rendered color doesn't align with "expected" color, for example on legends. Of course, there is documentation about controling material, but in my opinion main problem comes from fact that top surface interacts with light at all. It should be possible to disable that while still maintaining shading/lighthing of sides/walls.

(It appears that for good visualization, it's useful that wall faces still interact with light - shading applied only to walls gives great feedback about shape)

Example:

US states colored by population with colors as in legend (most right exhibit):

• left: extruded (default lightning properties) - darker than legend
• center: same props, not-extruded - colors match legend
• right: expected: extruded, colors matching those not extruded and legend that just uses CSS colors

Taking into account that deck.gl is visualization library actual colors matter (esp when they should align with other parts of UI of app like legend) and it would be great if extruded SolidPolygonLayer have possibility to control colors explicltiy possibly by removing interaction with lightning completly.

---

Note, i've tried several combination of material options, but given that then apply same logic to side and top i believe it's impossible to have strict colors on top and useful shading of sides/walls.

Proposal

SolidPolygonLayer in extruded mode already renders using two materials - top and side.

Make properties of both materials configurable, so user can configure top and side material separately:

Proposed props for SolidPolygonLayer

• material: current property - control both
• topMaterial: (new) control only top material
• sideMaterial: (new) control only side material

Semantics:

• when passing object - use current semantics
• with possible one addition false or null or "disabled" - as easy api to completly disable interaction with light (not sure if it's same as same as {ambient: 1, ...rest: 0})

[zbigg]

I know it's possible to create subclass of SolidPolygonLayer that more or less hacks this around, like this:

const TOP_LIGHTING_RE =
  /vec3 lightColor = lighting_getLightColor\([^;]*\);\s*vColor = vec4\(lightColor,([^)]*)\);/

class MySolidPolygonLayer extends SolidPolygonLayer {
  getShaders(type: 'top' | 'side') {
    const shaders = super.getShaders(type)
    if (type !== 'top') return shaders

    shaders.modules = shaders.modules.filter((m: unknown) => m !== gouraudMaterial)
    shaders.vs =  shaders.vs.replace(TOP_LIGHTING_RE, 'vColor = vec4(colors.rgb,$1);')
    return shaders
  }
}
//  and then inject it into (in my case GeoJsonLayer) using `_subLayerProps`:

new GeoJsonLayer({
 ...
 _subLayerProps: {
  'polygons-fill': { type: MySolidPolygonLayer }
 }
})

But it feels hacky and i believe deck.gl could support this natively without digging into internal private methods.

I'm willing to conrtibute PR if this this request is considered valid and there is consensus about API for this feature.

[zbigg]

Last but not least - this issue affects all 2.5D layers - including Hex/Grids/Column layers. I believe that if we decide to fix/improve situation we should do it consistently for all of those layers.

[chrisgervang]

Great observation and thank you for including a prototype photo of the result. I agree this would be a nice enhancement for 2.5d visualizations that depend on color accuracy. I imagine it'll be relatively easy to accept this change if it only needs a couple more uniforms.

And agreed, if we do it for polygon we should consistently do this for the other 2.5d layers.

I suppose an alternative API would be to add a nested object to material for each side, but we tend to prefer flat APIs so I'm in favor of the two new props.

Adding to semantics:

• the setting for top or side takes priority over material.

Any objections @Pessimistress?