mapbox / mapbox/mapbox-gl-js

Seams and overdraw visible with transparent raster tiles + globe view

Open
#11,906 9 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

3d :triangular_ruler: bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

**mapbox-gl-js version**: current `main`

**browser**: Chrome 101.0.4951.64

### Steps to Trigger Behavior

1. Load a tileset with alpha. One like the following set of tiles (to be placed in `debug/transparent-white`) will do.
2. View a map with `projection: {name: 'globe'}`
3. Zoom and pan

A single 50% opacity white tile:
![0](https://user-images.githubusercontent.com/572717/169118877-9de180fd-536a-4749-a3d4-314fae148ebe.png)

A tileset of the above, through z=4:
[transparent-white.zip](https://github.com/mapbox/mapbox-gl-js/files/8719292/transparent-white.zip)

debug/testpage.html

```html



Mapbox GL JS debug page




body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }






var map = window.map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-v9',
hash: true,
projection: { name: 'globe' }
});

map.on('load', function () {
map.addSource('transparent-white', {
type: 'raster',
minzoom: 0,
maxzoom: 4,
tileSize: 512,
tiles: [
'http://localhost:9966/debug/transparent-white/{z}/{x}/{y}.png'
]
});

map.addLayer({
type: 'raster',
source: 'transparent-white',
id: 'transparent-white-layer',
});
});




```

### Expected Behavior

A tileset with transparency is rendered correctly—or even not at all, but preferably not incorrectly.

### Actual Behavior

![Screen Shot 2022-05-18 at 11 27 20 AM](https://user-images.githubusercontent.com/572717/169121556-b9629336-d40f-4eb7-9a58-ebc71759efa1.png)

There are two problems:
- seams between tiles are sometimes visible
- when zooming out, sometimes multiple tiles are overdrawn such that 50% opacity + 50% opacity ~= 75% opacity. This does not resolve when the map idles.

In my testing, I obtain the expected results on 2D maps, even with projections. It's the globe view where this seems to occur. It seems like a stencil test might be able to prevent this sort of overdraw?

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 debug/testpage.html and the provided transparent-white tileset, then reproduce the issue using the globe projection while zooming and panning. Investigate the globe rendering path for raster tiles, focusing on the reported tile seams and repeated alpha compositing. Done means transparent raster tiles render without visible seams or unintended overdraw in globe view.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.