mapbox / mapbox/mapbox-gl-js

Expose per-band paint-raster color operations like `raster-saturation raster-contrast raster-brightness-min/max`

Open
#13,520 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature :green_apple:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

## Motivation

Context is, with [historical-satellite](https://historical-satellite.iconem.com/) I'm comparing different public XYZ/TMS source raster tilesets, and enhancing differences present between two mapbox raster sources. I'm rendering two overlaid maps in two different canvases at , with css clip-path and blending-modes and it would sometimes be useful to preprocess the canvas to apply some sort of histogram equalization, or at least contrast stretching. This way, the blending modes would let the user focus only on large visual change

## Design Alternatives

Following up a long discussion https://github.com/mapbox/mapbox-gl-js/issues/3889 mapbox-gl-js introduced properties `raster-color, raster-color-mix, raster-color-range` implemented in PRs https://github.com/mapbox/mapbox-gl-js/pull/12368 and https://github.com/mapbox/mapbox-gl-js/commit/817fe631d3228c3e732f8f5a8411b66437158891 which are a very great step towards my contrast stretching goal. Great doc [here](https://docs.mapbox.com/style-spec/reference/layers/#paint-raster-raster-color)

## Design

What I'd ultimately like to do is to extend the `raster-color-range` (or eventually `raster-saturation raster-contrast raster-brightness-max`) so they would not only accept a float value, but optionally a float array, which would be exposed per-band, so each RGB channel would have applied a different color-transform.

Under the hood, the current implementation would be akin to passing the same amount/param for each band.

### Concepts

Not sure about which raster paint properties should be exposed as per-band, but being able to do contrast stretching via `raster-color-range or raster-saturation raster-contrast raster-brightness-max` could be very helpful!

### Implementation

In [raster.fragment.glsl](https://github.com/mapbox/mapbox-gl-js/blob/main/src/shaders/raster.fragment.glsl), the fragment shader uniform `u_colorization_scale` (and function `configureRasterColor`) could be passed 3x the current count of params (current min/max is the same for all bands, could be minR, maxR, minG, maxG, minB, maxB

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/shaders/raster.fragment.glsl and the configureRasterColor function, then review the existing raster-color, raster-color-mix, and raster-color-range behavior described in the linked style-spec documentation. Done would mean defining and exposing per-band color operations and passing the required per-band parameters through the raster shader.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.