mapbox / mapbox/mapbox-maps-flutter
Fill Extrusion Layer flickering and rendering issue
Nobody has claimed this yet.
- Dominant language
- Dart
- Stars
- 380
- Forks
- 204
- PR merge metrics
- No merged PRs in 30d
Description
While "fill-extrusion-ambient-occlusion-intensity" is greater than 0, setting fill extrusion layer with opacity less than 1 and height calculated by case expression makes all features flicker and have rendering artefacts.
Example with flickering:
```dart
await mapboxMap.style.addSource(GeoJsonSource(
id: sourceName,
data: geoJsonSource,
));
String someLayer = jsonEncode({
"id": layerName,
"type": "fill-extrusion",
"source": sourceName,
"paint": {
"fill-extrusion-ambient-occlusion-intensity": 0.5,
"fill-extrusion-ambient-occlusion-wall-radius": 20,
"fill-extrusion-ambient-occlusion-ground-radius": 20,
"fill-extrusion-ambient-occlusion-ground-attenuation": 0.5,
"fill-extrusion-opacity": 0.9,
"fill-extrusion-height": [
"case",
[
"==",
["get", "someState"],
true
],
10,
5
],
"fill-extrusion-color": [
"case",
[
"==",
["get", "someState"],
true
],
["get", "color"],
"#FFFFFF"
],
}
});
await mapboxMap.style
.addPersistentStyleLayer(someLayer, layerPosition);
```
Example with no flickering:
```dart
await mapboxMap.style.addSource(GeoJsonSource(
id: sourceName,
data: geoJsonSource,
));
String someLayer = jsonEncode({
"id": layerName,
"type": "fill-extrusion",
"source": sourceName,
"paint": {
"fill-extrusion-ambient-occlusion-intensity": 0.5,
"fill-extrusion-ambient-occlusion-wall-radius": 20,
"fill-extrusion-ambient-occlusion-ground-radius": 20,
"fill-extrusion-ambient-occlusion-ground-attenuation": 0.5,
"fill-extrusion-opacity": 0.9,
"fill-extrusion-height": 10,
"fill-extrusion-color": [
"case",
[
"==",
["get", "someState"],
true
],
["get", "color"],
"#FFFFFF"
],
}
});
await mapboxMap.style
.addPersistentStyleLayer(someLayer, layerPosition);
```
Removing ambient occlusion, using just a static number for height or setting opacity to 1 will solve the issue but makes it impossible to achieve the needed visual presentation for my layer.
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
Start with the provided Dart reproduction in the issue and compare the two fill-extrusion configurations, focusing on ambient occlusion, opacity, and expression-based height. Trace whether the behavior is introduced by the Flutter integration or the underlying Mapbox rendering implementation; done means the layer renders without flickering or artefacts under the reported conditions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- computer-graphics, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100