Background not cleared on WEBGL sketches on Samsung S24

Hi, I’m writing to discuss a strange problem I found while trying 3D sketches (WEBGL) on my smartphone.

First of all, yesterday, I was writing my first p5.js sketch with WEBGL mode on OpenProcessing. On desktop PCs, I have no problems. Then, I wanted to try my sketch on my Samsung S24. It didn’t work correctly because the background is not cleared on each frame, so if something is moving, it messes up the screen.

Initially, I thought it was my coding mistake, but I found the same problem on other reputable demos like these:

and

Here is a screenshot of my S24 (Brave browser):

I also have other browsers on my S24. The problem is the same on Chrome and Samsung browsers, not just Brave.

Then, I had a good idea: I tested these sketches on my old and glorious (but still alive and working) LG G6 (Android 9). And … whoa! These sketches work correctly (also mine), even if slightly slower. (note: tested on Brave/Firefox/Chrome)

To sum up, it doesn’t seem to be a problem with a specific browser. It’s also not a problem on “all” mobile devices in general, but specifically on my S24.
Who can tell me where the problem is and if it is a known issue (please link me to the issue report if it exists)?

Thanks!

Hi @andbin,

Sorry, no time to dig deeper, but you can achieve the cleaning consistently by putting this at top of draw…

function draw() {
  erase();
  rect(0, 0, width,height);
  noErase();
  // Your code
  // background(20);
  // ...

Cheers
— mnse

PS: it often happens that browser implementations acts differently from system to system…

Reference: erase

1 Like

Hi @mnse, from my S24, I’ve pasted those 3 lines on the editable code of Geometries , and effectively, it worked!

However, I think this issue should be investigated by other, more qualified people who better know how p5.js uses WebGL.

You might try this

function draw() {
   background('transparent');
   // Your code
}

It worked on my iMac but I can’t test it on an Android device.

‘transparent’` is defined in CSS so it might work better cross browser.

1 Like

Hi @andbin,

As tried to say…
This is not necessarily an issue with p5.js itself, but rather with how browsers implement the WebGL standard, or, at an even lower level, how the system implements the OpenGL standard, and ultimately, how the graphics chip operates.

For this, the provided solution makes sure to force the cleaning by your code explicitly.

@quark: tried your approach but it is not working on Samsung. Guess, for the same reason, the background(20) fails.

Cheers
— mnse

1 Like

Hi, I have understood more about this issue. I’ve also installed Firefox and Opera on my S24. I discovered that WebGL sketches are ok on Firefox but not on Brave/Chrome/Samsung/Opera browsers (where the sketch is messed up). Interestingly, these four browsers are all based on The Chromium Project (but not Firefox).
Thus, I highly suspect that Chromium has some different behavior about WebGL.

Curious thing: my S24 and old G6 have the exact same version of Brave (1.73.97; Chromium 131.0.6778.108), but WebGL sketches are ok only on G6. So, it could also count the Android version and/or the GPU/GPU driver.

P.S. If you use another browser based on Chromium on Android (e.g., Vivaldi, UC Browser, etc.), try the Custom Geometry sketch. If the sketch becomes messed up, it’s another proof of the issue. :wink:

2 Likes