Suggestions for WEBGL flickering in a Cage+Chromium setup

[Aryan Krishnan]

Hi everyone!

While I working on a custom-linux project of my own I decided to bundle in and build chromium as a part of the custom linux stack called Suvriddhi OS. Simply put it is a custom linux distro that is meant to be lightweight to run on extremely low cost heardware yet have powerful functions for underprivilaged students to use to learn through a vast array of online and locally built sources. These sources include a set of minimal WEBGL simulations and games which are used to aid learning.

However this has led to an issue. When launching chromium and opening these WEBGL levels by default (with no flags) it causes a sort of flicker that appears to be a race condition between Cage and Chromium (although I am not very sure). While I was able to resolve this using --disable-gpu-compositing it severly worsened general web performance. Youtube for instance on 360p went from near-0 frame drops to almost 30% of frames dropped (while still somewhat viewable), with 720p and higher resolutions pretty much unusable with the flag (even on the lighter mobile website), however totally fine without the flag.

I have tried solutions such as the Linux Vaapi decoder and both enabling and/or disabling 0 copy, but to no avail, the flicker still tends to continue. Chrome://gpu suggests that WEBGL is "Hardware Accelerated" without disabling compositing and "Hardware Accelerated With Reduced Performance" with disabling compositing while video continuously remains "Hardware Accelerated". Forcing software accelerating almost always fixed the issue but led to far slower performance, even slower than even disabling comositing.

In terms of hardware, I am using a Raspberry Pi 3B+ along with Mesa's VC4 and V3D drivers both with OpenGL 2.1 alongside the Wayland compositor (Cage) connected to a monitor via HDMI, currently with 1GB of ram and 2GB of swap.

The frontend runs via React, running via busybox httpd using Unity's WEBGL (which also supports WEBGL 1.0). This flicker issue doesn't happen on MacOS chrome otherwise in general even with the same frontend and backend.

After looking at some error logs (2 notable ones were):

Error:gl_utils.cc(420) webgl [Ram address] "Invalid framebuffer target supported by driver..."

and

EGL driver message eglCreateContext: Requested GLES version(3.0) is greater than max supported (2, 0).

I assume I found the root of the first one (It seems to be throwing in the default: block):
https://source.chromium.org/chromium/chromium/src/+/main:third_party/angle/src/libANGLE/validationES3.cpp;l=1788?q=ValidateInvalidateFramebuffer&ss=chromium

The second one seems more likely based on my driver than chromium.

Again I am quite unsure as I haven't worked on the GPU stack in chromium.

Am sending this to request if anyone in the //gpu team has specific suggestions, since this is a very niche case where I have built chromium onto a system with a pretty much custom graphics stack, I am not filing a bug for this, however I am wondering if there are any further suggestions.

Chromium has been a pleasure to work with, contribute to and build into my stack due to its great performance due to V8 and the GPU stack as well as great functionality to open anything from question PDFs, to Youtube videos and webpages.

Am happy to share additional details if required such as my codebase for the custom OS, any flags I am using currently, any specific points from chrome://gpu (although the whole thing would be difficult to share) and any other debugging points. (Would prefer runtime flag changes if possible over compile time flags).

Thanks in advance for any suggestions, completely understand if it is tough to suggest points due to the nature of the setup and appreciate your time in advance.

Thanks!
 - Aryan