Mapbox-gl-native: Rendering artifacts with PowerVR SGX544 GPUs

[klblk]

Platform: Android 4.2 (reproduced only Alcatel one touch 6040x - MediaTek MT6589T, PowerVR SGX544)
Mapbox SDK version: 5.0.0-beta.3 - 5.0.2 (not reproduce on 5.0.0-beta.2)

Steps to trigger behavior

Mapbox demo app -> Styles -> Mapbox Studio style (100% reproduced on this screen)

Actual behavior

It's better to see:

In my app:

device info:

[friedbunny]

I have to say, that is a magnificent rendering error. 👌

[jfirebaugh]

Retitled based on the commonality with #9306.

[jfirebaugh]

Pretty sure this is a driver / hardware bug relating to using a single VAO with distinct programs (which do use the same attribute layout).

Things I tried:

“fill-antialias”: false -- less artifacts, but still present
reversing layer order -- artifacts
removing either layer -- no artifacts
making second layer non-pattern -- no artifacts
making first layer pattern -- no artifacts
making layers non-ref’d -- no artifacts
disable VAOs -- no artifacts
force rebind attributes -- artifacts
force rebind element buffer --artifacts
force rebind attribute buffer -- artifacts
force rebind everything -- artifacts
recreate VAO every time -- no artifacts
separate VAO for each Program -- no artifacts

[jfirebaugh]

For posterity, the style I used for testing:

{
  "version": 8,
  "center": [-0.1076028852098716, 51.48775780296032],
  "zoom": 13.370586425682019,
  "sources": {
    "streets": {
      "url": "mapbox://mapbox.mapbox-streets-v7",
      "type": "vector"
    }
  },
  "sprite": "mapbox://sprites/mapbox/streets-v9",
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "black"
      }
    },
    {
      "id": "polygon-fill",
      "type": "fill",
      "source": "streets",
      "source-layer": "road",
      "filter": [
        "all",
        [
          "==",
          "$type",
          "Polygon"
        ],
        [
          "in",
          "class",
          "path",
          "pedestrian"
        ],
        [
          "==",
          "structure",
          "none"
        ]
      ],
      "paint": {
        "fill-color": "green",
        "fill-antialias": false
      }
    },
    {
      "id": "polygon-fill-pattern",
      "type": "fill",
      "source": "streets",
      "source-layer": "road",
      "filter": [
        "all",
        [
          "==",
          "$type",
          "Polygon"
        ],
        [
          "in",
          "class",
          "path",
          "pedestrian"
        ],
        [
          "==",
          "structure",
          "none"
        ]
      ],
      "paint": {
        "fill-pattern": "pedestrian-polygon",
        "fill-antialias": false
      }
    }
  ]
}