search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.08k stars 2.21k forks source link

Latest chrome causes rendering issues #9719

Closed HarelM closed 4 years ago

HarelM commented 4 years ago

mapbox-gl-js version: v1.10.0-beta.1

browser: chrome Version 83.0.4103.61 (this is Important!), Windows 10, GPU Intel(R) HD Graphics 5500

Steps to Trigger Behavior

  1. Update to latest chrome version
  2. Surf to: https://israelhiking.osm.org.il/map/14.58/32.5978/35.0504 --> There's a flickering black tile and the console has a warning message: [.WebGL-000002D13BD9EAA0] GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture.

Expected Behavior

The black tile shouldn't flicker, sometimes it stays after the map finishes loading: See here: https://github.com/IsraelHikingMap/VectorMap/issues/22

Actual Behavior

It flickers, and sometimes stays on: image

mourner commented 4 years ago

I tried browsing the map for a while with Chrome v83.0.4103.61 on macOS, both with a discrete and an integrated GPU, and haven't seen such an issue. Can you expand on your environment? Operating system, exact Chrome v83.0.4103 build, GPU hardware, and whether it's reproducible on another machine under similar conditions?

HarelM commented 4 years ago

Thanks for getting back to me so quickly! I've update the chrome to full version in the issue description. I'm able to reproduce the issue on both my machine at home and my computer at work. Both run windows 10. I've tried the following address: https://israelhiking.osm.org.il/map/15.41/32.5926/35.0656 Refreshing it a few time causes this issue - moving the map around doesn't reproduce the issue, it actually "solves" it. So to reproduce press the browser refresh button a few times. It started only after the latest chrome update, I believe, as I have tried it on another machine with a lower chrome version and it didn't reproduce, only after I checked the version which causes an update this started manifesting. image

HarelM commented 4 years ago

Here's a video of me pressing F5 (refresh) a few times. The flickering is also somewhat noticeable in the video even when the tile doesn't stay black. Israel Hiking Map - Google Chrome 2020-05-25 11_19_31.zip

zstadler commented 4 years ago

This link shows a map that has two layers: a solid background and TerrainRGB hillshade. Opening the link on Windows 10 Home using Chrome Version 83.0.4103.61 (Official Build) (64-bit) would show a gray screen (almost) every time you open the link or refresh the page (Ctrl-R).

If you zoom-out the proper map shows and remains after a zoom-in.

karimnaaji commented 4 years ago

Also tried a lot of hot refresh on a discrete gpu (gtx 1050ti) on win10 without success of repro.

Concerning this GL error, it would mean that within a draw call we're reading from a texture that is bound to a framebuffer this draw call is currently using. At first look, I haven't found any code path that could lead to this situation. One that could have been in use from the video is here.

@HarelM Without hot reloading the page, have you ever been in a situation where this happens?

HarelM commented 4 years ago

@karimnaaji Thanks for getting back to me. I keep hitting this issue every few minutes when I open the site in the browser. The hot reload is just a way to make is happen in the video so you'll see what it looks like. Opening the link @zstadler sent for the second time will reproduce the issue easily without hot reload - the first time you open the link above will usually cause a fly-to to the relevant location which allows a workaround to this issue (moving the map eliminates this black tile behavior). But if you refresh the page after the movement is finished, or you open another chrome tab and surf to https://israelhiking.osm.org.il/ you should be able to easily reproduce it. As @zstadler said, the only layer in his link (as opposed to mine) is a TerrainRBG which we believe is the cause for this issue along side updating to latest stable chrome version. This issue will start affecting more and more users as they start to upgrade to latest chrome which is what we want to prevent.

karimnaaji commented 4 years ago

Ok we'll try on a few other machines as we had no luck on the one we tested this on.

Can you try disabling the terrain/hillshade and do the same to try to trigger the issue?

asheemmamoowala commented 4 years ago

As @zstadler said, the only layer in his link (as opposed to mine) is a TerrainRBG which we believe is the cause for this issue along side updating to latest stable chrome version.

@HarelM In order to help us understand the root cause of this issue, it would be very helpful to get a minimally reproducible case.

HarelM commented 4 years ago

@asheemmamoowala I'll see what I can do, but basically the mapbox example, while not giving the exact same result as a black tile, has this black tile flickering issue - it's subtle, but noticeable if you are looking for it. It also has the same warning in the console as I get: https://docs.mapbox.com/mapbox-gl-js/example/hillshade/ If you have a stackblitz template I can fork or something similar as a starting point I can try and create a minimal reproduction...

HarelM commented 4 years ago

Here's a minimal reproduction, please let me know if you need anything else. this reproduces almost always on high zoom levels. http://jsfiddle.net/jxf9pg5n/ The tile should not be dark and should present hill shading. image Panning the map a bit "resolves" the issue.

karimnaaji commented 4 years ago

Thanks for this minimal case @HarelM ! We'll give it another try and hopefully get a reproduction

astojilj commented 4 years ago

Chrome fix is expected to be released soon: https://bugs.chromium.org/p/angleproject/issues/detail?id=4638

karimnaaji commented 4 years ago

Ok so it's not worth investigating further on our end as it's an issue with webkit and angle. @HarelM please look at latest chrome release and give this another try, it looks like it's affecting Chrome 83, 84, 85 from the conversation, and supposed to be out in these releases:

According to chromedash, the M83 fix went into 83.0.4103.97 and the M84 into 84.0.4147.30 for Windows

Closing as this isn't an issue with the library.

HarelM commented 4 years ago

Thanks for the info! Updating chrome seems to have solved the issue (not surprisingly as the issue started after a chrome upgrade). Thanks for finding the relevant issue and linking it here.

astojilj commented 4 years ago

For the reference, information about workaround:

... unbind the texture using gl.bindTexture(gl.TEXTURE_2D, null); Otherwise Chrome will fail because the render target is bound as a texture, even though this texture is not sampled by the program.

https://stackoverflow.com/a/62191374

I don't think we need to integrate workaround for this to mapbox-gl-js as it got fixed quickly (not that many versions affected). Render to texture (e.g. heatmap and hillshade) might be affected.