Deck.gl: Way of dynamically desaturate part of image TileLayer

[liokm]

When using TileLayer, we could desaturate a tile by setting desaturate props of BitmapLayer returned from TileLayer.renderSubLayers, which is quite handy.

Now, we want to achieve effect that dynamically desaturating some rectangle part of a tilelayer:
On top of an image TileLayer, there are rectangle grids specified by PolygonLayer. Depending on data, some grids are shown in greyscale while others are shown as original.
The desaturate props works at tile level, how do we have similar effect at this grid level?

• Need we do some manual modification upon image when constructing BitmapLayer? Or
• we could have some blend function in extended PolygonLayer or BitmapLayer to achieve the target? Or
• maybe Mask RFC #4161 could help?

Thanks!

[mogmog]

could you just have another (desaturated) bitmap layer on top of the colour layer?

[mogmog]

need a digram to see what you are after.

I have a memory somewhere of seeing in the documentation a custom shader that adjusted the amount of red in a bitmap tile. Can't find it now.

[mogmog]

https://codepen.io/vis-gl/pen/bXpNpK

https://github.com/uber/deck.gl/blob/43593122c23a64b1afbe0593d028ab6b649a9a93/docs/developer-guide/custom-layers/layer-extensions.md

[liokm]

Thank you @mogmog ! The way of layer extensions is enlightening.

I want to show original color and adjusted color for different tiles which are not same as image tile in TileLayer.
For example, the first pic below is the original one. With the help of PolygonLayer, there is a grid on top of the image and I would like to have the effect of the third pic, which shows original color for the highlighted block in the second pic.

[kylebarron]

I think you could do this in a relatively straightforward manner if that polygon coincides with a tile.

const { bbox } = props.tile;
if (!bbox intersects Polygon) {
    desaturate
}

And use Turf.js for the intersection. The problem is that desaturates _entire tiles_ at once. I don't think there's currently a way to desaturate portions of the image without creating a custom LayerExtension

[Pessimistress]

You can also subclass the BitmapLayer to apply color filter inside a custom boundary. See https://observablehq.com/@pessimistress/deck-gl-shader-injection

[liokm]

Thank you @Pessimistress ! It is interesting of the bounds usage.
I solved the issue by extending the BitmapLayer to accept a secondary bitmap which indicates the highlighted positions for shader to render.