Graphics corruption on some frames after OpenGL rendering changes

[HankG]

Steps to reproduce

1. Use a Linux desktop machine configured for Linux development
2. Use any version of flutter after commit fe56a35. The latest release 3.22, head of stable, and head of master will all suffice.
3. git clone https://github.com/xsahil03x/multi_trigger_autocomplete.git
4. cd multi_trigger_autocomplete/example
5. flutter config --enable-linux-desktop
6. flutter create .
7. flutter run -d linux
8. In the chat text box type a ":" to bring up the emoji suggestion box, "#" to bring up the hashtag suggestion box, or "@" to bring up the mentions suggestion box

Expected results

The expected complete for emoji suggestions should look like:

Actual results

The actual results are this blog bar which has some width based on the content size but I can't tell what:

In my real app the bad rendering either shows up as a blank gray area over the whole window:

Or, after a time usually, this weird black area with mangled red lines in the bottom left corner:

Code sample

No code is necessary beyond the example app for the multi_trigger_autocomplete. To arrive at the broken commit I used git bisect and discovered that the last working version is commit #fe56a35602f7360850aca41b8af5bdde7fafda97 and the next commit, commit #8e418d18185697e56024ef3d5784afba4ac96370. Commit #8e418d18185697e56024ef3d5784afba4ac96370 was a Roll Flutter Engine commit that had work being done on GTK4 and some other work that may be related to this problem.

Screenshots or Video

Screenshots embedded above.

Logs

No information in the logs indicating exceptions/warnings being thrown were shown.

Flutter Doctor output

Below is the output from the primary machine, which is running Linux Mint 21 in a VirtualBox VM with Software 3D Acceleration with the first bad commit. But I've testing this with Ubuntu 24.04 in a VirtualBox VM with Software 3D Acceleration using Flutter 3.22.0, and a Linux Mint 20 bare metal machine with a GeForce GTX 950 running Flutter 3.22.0:

[!] Flutter (Channel [user-branch], 3.20.0-17.0.pre.35, on Linux Mint 21
    5.15.0-107-generic, locale en_US.UTF-8)
    ! Flutter version 3.20.0-17.0.pre.35 on channel [user-branch] at
      /home/user1/apps/flutter
      Currently on an unknown channel. Run `flutter channel` to switch to an
      official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions
      at https://flutter.dev/docs/get-started/install.
    ! Upstream repository unknown source is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss
      this error.
    • Framework revision 8e418d1818 (3 months ago), 2024-02-29 19:05:57 -0500
    • Engine revision 6f8044436e
    • Dart version 3.4.0 (build 3.4.0-187.0.dev)
    • DevTools version 2.33.0-dev.11
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✗] Chrome - develop for the web (Cannot find Chrome executable at
    google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Linux toolchain - develop for Linux desktop
    • Ubuntu clang version 14.0.0-1ubuntu1.1
    • cmake version 3.22.1
    • ninja version 1.10.1
    • pkg-config version 0.29.2

[!] Android Studio (not installed)
    • Android Studio not found; download from
      https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup
      for detailed instructions).

[✓] IntelliJ IDEA Ultimate Edition (version 2024.1)
    • IntelliJ at /home/user1/apps/idea-IU-241.15989.150
    • Flutter plugin version 79.1.3
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] Connected device (1 available)
    • Linux (desktop) • linux • linux-x64 • Linux Mint 21 5.15.0-107-generic

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 4 categories.

[jonahwilliams]

The commit in question is flutter/engine#50754, all other changes in that engine roll were impeller/macos/web related.

[darshankawar]

I currently don't have Linux setup to verify this, but based on the report, I'll label for team's input / attention. I will request colleague to verify this further. Also, based on git bisect, the reported behavior seems to be broken, so I'll label this as regression.

[loic-sharma]

cc @robert-ancell

[robert-ancell]

Confirmed reproduction here (first "Actual Results" case). Interestingly if you toggle performance overlay ('p' from command line) it renders correctly. Investigating in the engine with some hooks to see what is being rendered.

[robert-ancell]

I suspect this is a duplicate of #148607

[robert-ancell]

Where the issue seems to be is the Linux embedder is rendering the textures generated by Flutter before they are complete. This seems to occur in more complex applications, as simpler ones are rendered before this is a problem. You can also see this occurring less when the window sizes are small.

[robert-ancell]

If I read the contents of the framebuffer before rendering then these show the correct contents. So it does seem to be ready from Flutter and the corruption is occurring at a later point.

diff --git a/shell/platform/linux/fl_renderer.cc b/shell/platform/linux/fl_renderer.cc
index 595c315134..db2da8076e 100644
--- a/shell/platform/linux/fl_renderer.cc
+++ b/shell/platform/linux/fl_renderer.cc
@@ -333,6 +333,17 @@ void fl_renderer_render(FlRenderer* self, int width, int height) {
     FlBackingStoreProvider* texture =
         FL_BACKING_STORE_PROVIDER(g_ptr_array_index(priv->textures, i));
 
+    uint32_t framebuffer_id = fl_backing_store_provider_get_gl_framebuffer_id(texture);
+    glBindFramebuffer(GL_READ_FRAMEBUFFER, framebuffer_id);
+    GdkRectangle g =
+        fl_backing_store_provider_get_geometry(texture);
+    size_t image_data_length = 4 * g.width * g.height;
+    uint8_t *image_data = static_cast<uint8_t*>(malloc(image_data_length));
+    glReadPixels(0, 0, g.width, g.height, GL_RGBA, GL_UNSIGNED_BYTE, image_data);
+    g_printerr("%dx%d\n", g.width, g.height);
+    g_file_set_contents("texture.raw", reinterpret_cast<gchar *>(image_data), image_data_length, nullptr);
+    free(image_data);
+
     uint32_t texture_id = fl_backing_store_provider_get_gl_texture_id(texture);
     glBindTexture(GL_TEXTURE_2D, texture_id);

The images can then be converted with:

$ convert -size 2558x1440 -depth 8 RGBA:texture.raw out.png

Which shows the emoji selector (inverted but this is fine):

[robert-ancell]

I found if I replace the draw callback with just a glClear the bad frames still sometimes show up. It seems that Flutter is sometimes rendering into the framebuffer that GTK is using. I think we might be able to stop this by having Flutter and GTK use different contexts, which I will try tomorrow.

[robert-ancell]

Found the issue - it was due to Flutter and GDK sharing the same OpenGL context. This would cause Flutter to sometimes render into the framebuffer used inside GDK. Solution is to make three contexts - two for Flutter (main and resource) and one for GDK.