mapbox / mapbox/mapbox-gl-js

Visual glitches with stacked fill-extrusion layers

Open
#7,766 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

I'm stacking several `Polygon` layers in a GeoJSON to render the floors of a building in Mapbox GL JS using the `fill-extrusion` layer type. This mostly works fine, but I frequently see some visual glitches in the form of white dots in the seam between floors of the building. These flicker in and out as you rotate/zoom the map. They appear for some but not all sides of some but not all buildings.

![image](https://user-images.githubusercontent.com/98301/51062974-f1720480-15c6-11e9-9a2c-3017b3443645.png)

Curious if this is a known issue and whether there's a workaround. Here's all the data you need for a repro. I'm on Mapbox GL JS 0.52 and Mac OS X 10.13.6 with Chrome 71.0.3578.98, but I've seen this across a couple of devices.

* [mapbox studio repro](https://api.mapbox.com/styles/v1/danvk/cjqskihj30dcy2sqha7xaripx.html?fresh=true&title=true&access_token=pk.eyJ1IjoiZGFudmsiLCJhIjoiY2lrZzJvNDR0MDBhNXR4a2xqNnlsbWx3ciJ9.myJhweYd_hrXClbKk8XLgQ#18.12/22.226877/-111.104884/9/60)
* [Gist of GeoJSON data](https://gist.github.com/danvk/a5947c4d4488500bf2dc3fcc8acc2407)

Style:

```json
{
"fillExtrusionPaint": {
"fill-extrusion-base": {
"property": "min_height",
"type": "identity"
},
"fill-extrusion-color": "#ffffff",
"fill-extrusion-height": {
"property": "height",
"type": "identity"
}
}
}

```

**mapbox-gl-js version**: 0.52

**browser**: Chrome 71.0.3578.98 / Mac OS X 10.13.6

### Steps to Trigger Behavior

1. Click this [mapbox studio link](https://api.mapbox.com/styles/v1/danvk/cjqskihj30dcy2sqha7xaripx.html?fresh=true&title=true&access_token=pk.eyJ1IjoiZGFudmsiLCJhIjoiY2lrZzJvNDR0MDBhNXR4a2xqNnlsbWx3ciJ9.myJhweYd_hrXClbKk8XLgQ#18.12/22.226877/-111.104884/9/60)
2. Right click to rotate around
3. Observe the glitchy white lines

### Link to Demonstration

[mapbox studio link](https://api.mapbox.com/styles/v1/danvk/cjqskihj30dcy2sqha7xaripx.html?fresh=true&title=true&access_token=pk.eyJ1IjoiZGFudmsiLCJhIjoiY2lrZzJvNDR0MDBhNXR4a2xqNnlsbWx3ciJ9.myJhweYd_hrXClbKk8XLgQ#18.12/22.226877/-111.104884/9/60)

### Expected Behavior

### Actual Behavior

cc @pandananta

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 the linked Mapbox Studio reproduction and the linked GeoJSON data, using the reported fill-extrusion style and rotating or zooming the map to observe the flickering white seams. No source file or test is named in the issue, so trace the fill-extrusion rendering path from this reproduction. Done means reproducing the artifact and establishing a fix or documented workaround for stacked floors.

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.