mapbox / mapbox/mapbox-gl-js

fill-extrusion-ambient-occlusion-intensity affects fill-z-offset rendering

Open
#13,633 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged 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

3.19.1

### Browser and version

Chrome 145.0.7632.159

### Expected behavior

A `fill-extrusion` layer with `fill-extrusion-ambient-occlusion-intensity` > 0 should not alter rendering of a `fill` layer with a `fill-z-offset`.

### Actual behavior

A `fill-extrusion` layer with `fill-extrusion-ambient-occlusion-intensity: 0` will happily render a `fill` layer with a `fill-z-offset` set to the `fill-extrusion-height` above the extrusion, as shown here:

Image

However changing the `fill-extrusion-ambient-occlusion-intensity` to > 0 will cause the `fill` layer to disapear.

Image

### Link to the demonstration

_No response_

### Steps to trigger the unexpected behavior

```js
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v11',
center: [151.2804924, -33.8332455],
zoom: 20,
pitch: 45,
bearing: -20
});

map.on('load', () => {
map.addSource('polygon', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[151.28049658597178, -33.83313240830963], [151.28049658597178, -33.8332436482681], [151.28062665499317, -33.8332436482681], [151.28062665499317, -33.83313240830963], [151.28049658597178, -33.83313240830963]]]
},
'properties': {}
}
]
}
});

map.addLayer({
'id': 'fill-extrusion',
'type': 'fill-extrusion',
'source': 'polygon',
'paint': {
'fill-extrusion-color': '#ff0000', //red
'fill-extrusion-ambient-occlusion-intensity': 1,
'fill-extrusion-height': 10,
}
})

map.addLayer({
'id': 'fill',
'type': 'fill',
'source': 'polygon',
'paint': {
'fill-color': '#0000ff', // blue
'fill-z-offset': 10,
}
})
})
```

### Relevant log output

```shell

```

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 minimal mapboxgl.Map reproduction in the issue, using the fill-extrusion and fill layers and changing fill-extrusion-ambient-occlusion-intensity from 0 to 1. Trace the fill-extrusion and fill rendering paths to identify why the fill-z-offset layer disappears. Done means the blue fill remains visible at the extrusion height when ambient occlusion intensity is greater than zero, with a regression test covering the case.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.