When I add a custom layer that uses stencil tests, some line layers are missing.

[huanglii]

mapbox-gl-js version: 2.10.0

browser: Microsoft Edge 版本 105.0.1343.27 (正式版本) (64 位)

Steps to Trigger Behavior

1. map.addLayer(testLayer, "aeroway-line"); // some line layers are missing
2. map.addLayer(testLayer); // line layers are normal

Link to Demonstration

https://codesandbox.io/s/unruffled-minsky-6e7tpq?file=/index.html

Expected Behavior

Actual Behavior

[huanglii]

At the same view, the normal line features are as follows:

[mourner]

Weird... Is this only reproducible in Edge on Windows? Can you check other browsers / OS? Are there any warnings in the console?

[huanglii]

Weird... Is this only reproducible in Edge on Windows? Can you check other browsers / OS? Are there any warnings in the console?

Tested on both Safari and Firefox have the same problem, but the following warning is printed in the console of Firefox:

WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.

[mourner]

OK, I think I got it — looks like this is a consequence of #11082, where we started using stencil masks to improve rendering of transparent lines.

As a temporary workaround, you can add map.painter.resetStencilClippingMasks(); at the beginning of the custom layer's render function — this seems to fix the bug.

@karimnaaji anything we can do on GL JS side so that it's handled automatically?

[karimnaaji]

@karimnaaji anything we can do on GL JS side so that it's handled automatically?

Yes, we should make sure that the stencil buffer and stencil states are clean between frames. We had a similar issue with retained gl states in https://github.com/mapbox/mapbox-gl-js/issues/10372. The function where we should add state reset is setCustomLayerDefaults (which only gets called when we have a custom layer):

https://github.com/mapbox/mapbox-gl-js/blob/2eb020f15069b386e92d261c054f225d75645d47/src/render/painter.js#L901-L916