fill-extrusion has glitching and missing faces

[sebastianoscarlopez]

The fill-extrusion layer misses some faces, also if we set the opacity to < 1 it'll display glitches (maybe z-fighting)

https://github.com/maplibre/maplibre-gl-js/assets/10349981/61625301-b62a-4318-86fe-c3ad0db46e1e

note: there are other scenarios where the z-fighting is plausible for example when two extrusions have one or more faces in the same position. This issue is with only one geometry.

maplibre-gl-js version: 3.3.1

browser: Chrome on Mac misses the faces and displays glitches. Edge on Mac, Chrome on Windows, and Linux miss the faces but not glitches.

Steps to Trigger Behavior

1. Extrude a polygon
2. Move the camera
3. If we use Chrome on Mac and put opacity < 1 we also see the glitching

Link to Demonstration

Here's a reproducible example showing how a rotating extruded square with < 4 walls loses a face and something that looks like a z-fighting

https://jsbin.com/xohogomawi/1/edit?html,output

Expected Behavior

The square extrusion must have 4 solid walls with no glitches.

Actual Behavior

The square extrusion has < 4 walls.

[tpneumat]

Can confirm same issue, especially noticeable in iOS retina display. setting opacity to 1 until this can be fixed.

[kubapelc]

I believe I've fixed the missing face issue in https://github.com/maplibre/maplibre-gl-js/pull/3968 . Note that your polygon does not have the first and last points repeated, which seems to be invalid according to geojson spec.

However most of MapLibre parses polygons without repeated first/last points just fine, and I think that is a reasonable behaviour, it makes sense for fill-extrusion to be no different.

Replace the link to maplibre-gl.js with https://kvaleya.gitlab.io/maplibre/aligndemo4/maplibre-gl-dev.js in the jsbin for a demonstration.

No idea about the Z-buffer issues though.

[sebastianoscarlopez]

🙇🏼 impresive!!! thanks @kubapelc