raster-color-mix multi-channel decode broken in mapbox-gl-js (v3.3.0 to v3.20.0)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
### mapbox-gl-js version
3.20.0
### Browser and version
Chrome Version 146.0.7680.153
### Expected behavior
Each pixel encodes a packed 24-bit integer across RGB channels:
- index = R×65536 + G×256 + B
- Example: depth -10m → index 2990 → R=0, G=11, B=174
- Tile data range: 2922–2999 (depths -78m to -1m)
Paint Configuration:
```
paint: {
'raster-color-mix': [0, 65280, 255, 0],
'raster-color': [
'interpolate',
['linear'],
['raster-value'],
2922, '#440154', // Purple (deepest -78m)
2935, '#31688e', // Blue
2948, '#35b779', // Green
2961, '#90d743', // Yellow-green
2974, '#fde725', // Yellow
2987, '#fd8d3c', // Orange
2999, '#f00' // Red (shallowest -1m)
],
'raster-color-range': [0, 4000]
}
```
### Expected Result (v3.2.0 - CORRECT):
All 7 color stops render smoothly across the raster values. The full spectrum is visible:
- Deep areas (2922-2940) display purple/blue
- Mid-depth areas (2940-2970) display blue-green through yellow-green
- Shallow areas (2970-2999) display yellow through orange to red
- Color scaling correctly interpolates between all 7 stops based on raster-value position
### Actual behavior
Multi-channel raster-color-mix with raster-color interpolation produces incorrect color scaling/interpolation in v3.3.0 and newer. The issue is not a cut-off or truncation, but rather a failure in the interpolation mathematics or color scaling logic that causes only a portion of the color palette to render, with the remaining colors missing or misinterpreted.
### Actual Result (v3.3.0+ - WRONG COLORS):
Only the first 2–3 color stops render correctly. The remaining stops (stops 4–7) either:
- Do not render at all
- Render with incorrect colors
- Appear to use incorrect interpolation scaling
Instead of the full purple→blue→green→yellow-green→yellow→orange→red spectrum, only purple and blue colors appear across the entire dataset. The intermediate and later stops are either ignored or severely misinterpreted, suggesting that the color interpolation scaling or the multi-channel raster-value decoding has changed.
### Link to the demonstration
https://stackblitz.com/edit/nuxt-starter-kxktbpsx?file=app.vue,package.json
### Steps to trigger the unexpected behavior
Change mapbox-gl version in the package.json from 3.2.0 to 3.20.0, then recompile.
### Relevant log output
```shell
```
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the regression using the StackBlitz app.vue and package.json, comparing mapbox-gl-js 3.2.0 with 3.20.0. Trace raster-color-mix and raster-value handling from that example, then verify that all seven color stops render with the expected interpolation across values 2922–2999.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- computer-graphics, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100