mapbox / mapbox/mapbox-maps-flutter
Fill Extrusion Layer flickering and rendering issue
Nessuno ha ancora preso questa issue.
- Lingua principale
- Dart
- Stelle
- 380
- Fork
- 204
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
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:
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:
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.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Iniziate con la riproduzione in Dart fornita nell’issue e confrontate le due configurazioni di fill-extrusion, concentrandovi su ambient occlusion, opacità e altezza basata su espressioni. Tracciate se il comportamento viene introdotto dall’integrazione Flutter o dall’implementazione di rendering sottostante di Mapbox; il lavoro è completato quando il layer viene renderizzato senza sfarfallio né artefatti nelle condizioni segnalate.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- dart, flutter
- Ambito
- computer-graphics, mobile
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100