Elevation per polygon for fill extrusions (#3841)

* Elevation per polygon for fill extrusions * basic test for fill extrusion bucket * Revert "basic test for fill extrusion bucket" This reverts commit 3b13b20. * render test for multipolygon fill extrusions * Moved test into terrain folder * Update CHANGELOG.md --------- Co-authored-by: Harel M <harel.mazor@gmail.com>
maplibre · Jun 4, 2024 · b94fac4 · b94fac4
1 parent 3344d80
commit b94fac4
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,12 +2,15 @@
 
 ### ✨ Features and improvements
 
+- Improve animation curve when easeTo and flyTo with constraints ([#3793](https://github.com/maplibre/maplibre-gl-js/pull/3793))
+- For filled extrusions, calculate the elevation per polygon (see issue [#3313](https://github.com/maplibre/maplibre-gl-js/issues/3313))
 - Add events to `GeolocateControl` to allow a more granular interaction ([#3847](https://github.com/maplibre/maplibre-gl-js/pull/3847))
 - Make `MapOptions.style` optional to be consistent with `Map.setStyle(null)` ([#4151](https://github.com/maplibre/maplibre-gl-js/pull/4151))
 - Use Autoprefixer to handle vendor prefixes in CSS ([#4165](https://github.com/maplibre/maplibre-gl-js/pull/4165))
 - Make `aria-label` configurable for Map, Marker and Popup [#4147](https://github.com/maplibre/maplibre-gl-js/pull/4147)
 - Map `<canvas>` is focusable only when interactive [#4147](https://github.com/maplibre/maplibre-gl-js/pull/4147)
 - "Accept" headers set in Request Transformers are not overwritten [#4210](https://github.com/maplibre/maplibre-gl-js/pull/4210)
+
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

diff --git a/src/data/bucket/fill_extrusion_bucket.ts b/src/data/bucket/fill_extrusion_bucket.ts
@@ -160,8 +160,10 @@ export class FillExtrusionBucket implements Bucket {
     }
 
     addFeature(feature: BucketFeature, geometry: Array<Array<Point>>, index: number, canonical: CanonicalTileID, imagePositions: {[_: string]: ImagePosition}) {
-        const centroid = {x: 0, y: 0, vertexCount: 0};
         for (const polygon of classifyRings(geometry, EARCUT_MAX_RINGS)) {
+
+            const centroid = {x: 0, y: 0, vertexCount: 0};
+
             let numVertices = 0;
             for (const ring of polygon) {
                 numVertices += ring.length;
@@ -274,15 +276,16 @@ export class FillExtrusionBucket implements Bucket {
 
             segment.primitiveLength += indices.length / 3;
             segment.vertexLength += numVertices;
-        }
 
-        // remember polygon centroid to calculate elevation in GPU
-        for (let i = 0; i < centroid.vertexCount; i++) {
-            this.centroidVertexArray.emplaceBack(
-                Math.floor(centroid.x / centroid.vertexCount),
-                Math.floor(centroid.y / centroid.vertexCount)
-            );
+            // remember polygon centroid to calculate elevation in GPU
+            for (let i = 0; i < centroid.vertexCount; i++) {
+                const averageX =  Math.floor(centroid.x / centroid.vertexCount);
+                const averageY = Math.floor(centroid.y / centroid.vertexCount);
+                this.centroidVertexArray.emplaceBack(averageX, averageY);
+            }
+
         }
+
         this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, imagePositions, canonical);
     }
 }

diff --git a/test/integration/render/tests/terrain/fill-extrusion-multipolygon/expected.png b/test/integration/render/tests/terrain/fill-extrusion-multipolygon/expected.png
diff --git a/test/integration/render/tests/terrain/fill-extrusion-multipolygon/style.json b/test/integration/render/tests/terrain/fill-extrusion-multipolygon/style.json
@@ -0,0 +1,165 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 500,
+      "width": 500,
+      "timeout": 60000,
+      "operations": [
+        [
+          "sleep",
+          5000
+        ]
+      ]
+    }
+  },
+  "center": [
+    11.037826538085028,
+    47.49076091764255
+  ],
+  "zoom": 13,
+  "pitch": 60,
+  "bearing": -60,
+  "sources": {
+    "terrainSource": {
+      "type": "raster-dem",
+      "tiles": [
+        "local://tiles/terrain-shading/{z}-{x}-{y}.terrain.png"
+      ],
+      "minzoom": 0,
+      "maxzoom": 12
+    },
+    "hillshadeSource": {
+      "type": "raster-dem",
+      "tiles": [
+        "local://tiles/terrain-shading/{z}-{x}-{y}.terrain.png"
+      ],
+      "minzoom": 0,
+      "maxzoom": 12
+    },
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "MultiPolygon",
+              "coordinates": [
+                [
+                  [
+                    [
+                      11.038,
+                      47.48
+                    ],
+                    [
+                      11.035,
+                      47.48
+                    ],
+                    [
+                      11.035,
+                      47.485
+                    ],
+                    [
+                      11.038,
+                      47.485
+                    ],
+                    [
+                      11.038,
+                      47.48
+                    ]
+                  ]
+                ],
+                [
+                  [
+                    [
+                      11.04,
+                      47.49
+                    ],
+                    [
+                      11.037,
+                      47.49
+                    ],
+                    [
+                      11.037,
+                      47.495
+                    ],
+                    [
+                      11.04,
+                      47.495
+                    ],
+                    [
+                      11.04,
+                      47.49
+                    ]
+                  ]
+                ],
+                [
+                  [
+                    [
+                      11.043,
+                      47.50
+                    ],
+                    [
+                      11.046,
+                      47.50
+                    ],
+                    [
+                      11.046,
+                      47.505
+                    ],
+                    [
+                      11.043,
+                      47.505
+                    ],
+                    [
+                      11.043,
+                      47.50
+                    ]
+                  ]
+                ]
+              ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "white"
+      }
+    },
+    {
+      "id": "hills",
+      "type": "hillshade",
+      "source": "hillshadeSource",
+      "layout": {
+        "visibility": "visible"
+      },
+      "paint": {
+        "hillshade-shadow-color": "#473B24",
+        "hillshade-illumination-anchor": "map",
+        "hillshade-illumination-direction": 150
+      }
+    },
+    {
+      "id": "extrusion",
+      "type": "fill-extrusion",
+      "source": "geojson",
+      "paint": {
+        "fill-extrusion-height": 100,
+        "fill-extrusion-base": 10,
+        "fill-extrusion-color": "#999"
+      }
+    }
+  ],
+  "terrain": {
+    "source": "terrainSource",
+    "exaggeration": 1
+  }
+}