`fill-extrusion` elements distorted by terrain exaggeration

[zstadler]

maplibre-gl-js version: 2.4.0

browser: Firefox, Chrome

Link to Demonstration

https://codepen.io/zstadler/pen/bGmQJxJ?editors=0010

Expected Behavior

Actual Behavior

• Increasing the 3D Terrain exaggeration increases the size of the "teeth"
• Disabling 3D Terrain removes them

[prozessor13]

I think this problem is because of the geojson source. I think the geojson-vt library may splits the square into multiple geometries, and then, when rendering, for each sub-geometry a different centroid is calculated. And because of terrain each part is raised differentely. So, my first thing to do would be to debug the geojson-vt tile-geometries.

[zstadler]

Isn't it the same with the geometries stored mbtiles? I though all geometries are split between tiles.

Also, rotating the map and increasing the pitch shows this:

It looks like the original rectangle was was not split and it was properly extruded into a cube. However, there is an additional flat triangle above it.

When a different bearing is used with the same pitch, there seem to be two such triangles:

Here is a closer look at the top-right corner:

If you play a bit with zoom, pitch and bearing various other artifacts are seen, such as

[prozessor13]

I dont know in detail, but i did not see such artefacts on our tiles (generated by postgis). The question is how often this method is called. If only once (because of one geojson-feature) then the problem is in the addFeature method, else it is some geojson-source issue, i think.

[bogind]

I am not sure if this a related issue or a separate issue, but having seen the same "teeth" that @zstadler saw, I also noticed that extruded features which are elevated from the terrain as well as extruded are either extruded down as well as up and that creates an overlap if you have stacked extrusions.

This only happens with the terrain layer in the style, with or without an exaggeration (changing the value of exaggeration only moves the "teeth" up and down)

Example adjusted from @zstadler's code

https://codepen.io/bogind/pen/MWzwzRB

[kubapelc]

I think I've fixed this in https://github.com/maplibre/maplibre-gl-js/pull/3968 , but there are other, more complex issues with extrusion+terrain. See the PR post for more details.

You can try running the examples with https://kvaleya.gitlab.io/maplibre/aligndemo4/maplibre-gl-dev.js, a build of my globe branch.

[sbachinin]

Using https://kvaleya.gitlab.io/maplibre/aligndemo4/maplibre-gl-dev.js, I see the same glitches, flat triangles above a cube