Weird graphic bugs using Plasma on OnePlus 8

[andreee13]

Hi,
I was using Plasma animation in my app when I noticed that on my OnePlus 8 there are a lot of graphic bugs all over the screen (check attachment). The problem persists using both the release and debug versions of the app. I tried with emulators and a Xiaomi Mi A2 but in these cases there are no problems, all works great. I really don't know how to fix this because seems like GPU misses some pixel on the screen...

Thanks

t_video5794245799558776918.mp4

[felixblaschke]

This looks like something related to GPU drivers or something really internal inside the Flutter rendering pipeline.

I have no device to recreate such behavior. One option to approach this issue is, that you start editing the Plasma source code in order to track down, what aspect (blur, radius, blendmode, etc.) is the core reason for this issue.

Plasma is technically just a CustomPainter drawing circles based on an algorithm that provides a position.

If we can figure that out, we can create a small example for the Flutter team to look deeper into.

[andreee13]

I made lot of tests and these are the conclusions: the bug shows when particles > 1, blur > 0.0 and blendMode property is:

• color
• coloBurn
• colorDodge
• softlight
• overlay
• multiply
• luminosity
• lighten
• hardlight
• exclusion
• difference

All other properties are not significant.

A strange thing, tested with Android Studio, is that the frame rate is constant at 90 but when i touch the screen it will decrease to 30 with high ms rendering time and only after a hot restart it comes back to 90 (I really don't know why).

Another thing I noted is that even when I set 1 fps, bug is still notable but some artifacts remain static in the screen for the entire second and another part flash just a moment and then goes away before next frame.

ADB logs show nothing.

Also, this bug affects PlasmaRenderer more than Plasma legacy (check attachment).

I can share a sample apk with an OnePlus 8 Telegram group too, just for checking if other people have the same problem.

Adreno infos:

01-23 15:43:39.776 19313 19313 I AdrenoGLES-0: QUALCOMM build : 3571974a10, I64bd74b5bd
01-23 15:43:39.776 19313 19313 I AdrenoGLES-0: Build Date : 09/11/20
01-23 15:43:39.776 19313 19313 I AdrenoGLES-0: OpenGL ES Shader Compiler Version: EV031.32.02.00
01-23 15:43:39.776 19313 19313 I AdrenoGLES-0: Local Branch :
01-23 15:43:39.776 19313 19313 I AdrenoGLES-0: Remote Branch : refs/tags/AU_LINUX_ANDROID_LA.UM.9.12.10.00.00.582.274
01-23 15:43:39.776 19313 19313 I AdrenoGLES-0: Remote Branch : NONE
01-23 15:43:39.776 19313 19313 I AdrenoGLES-0: Reconstruct Branch : NOTHING
01-23 15:43:39.776 19313 19313 I AdrenoGLES-0: Build Config : S P 10.0.5 AArch64
01-23 15:43:39.776 19313 19313 I AdrenoGLES-0: Driver Path : /vendor/lib64/egl/libGLESv2_adreno.so
01-23 15:43:39.779 19313 19313 I AdrenoGLES-0: PFP: 0x016dd091, ME: 0x00000000

t_video5792181681225993178.mp4

[felixblaschke]

Thank you very much for your diagnostic effort. 😃 It looks like this visual artifact happens when two blurred circles with a non-default blendmode (srcOver is default) overlap.

That might be bug in Flutter engine or deeper. Can you create a public GIT repository with that Flutter app that reliably shows that issue on your device?

You mentioned that you have access to other users having the same device. It might be a good idea to verify that it's not a single-device hardware bug.

Can you also check if that problem also appear on Flutter master branch? (There is a little probability it might be fixed already)

flutter channel master
flutter upgrade

[felixblaschke]

Close due to no response.

[fikretsengul]

I'm using the Xiaomi K20 Pro on AOSP Android 11. My flutter channel is dev which is the beta. I have the same issue with him.

EDIT: I also did some tests: It only shows up if I use any blendMode. (particle count and blur doesn't matter) If I comment out blendMode the glitch doesn't show up. By the way my configuration was: (on a gradient background)

PlasmaRenderer(
type: PlasmaType.infinity,
particles: 20,
color: Color(0xff000000),
blur: 1,
size: 0.5,
speed: 1,
offset: 0,
// blendMode: BlendMode.darken,
variation1: 0,
variation2: 0,
variation3: 0,
rotation: 0,
),

[felixblaschke]

Can you confirm that your app looks fine in the emulator? I still think it's something hardware-related inside the Flutter SDK code that needs to be fixed. The best way is to create a minimalistic example app as GIT repo that demonstrates that issue, and file an issue in https://github.com/flutter/flutter

[fikretsengul]

Can you confirm that your app looks fine in the emulator? I still think it's something hardware-related inside the Flutter SDK code that needs to be fixed. The best way is to create a minimalistic example app as GIT repo that demonstrates that issue, and file an issue in https://github.com/flutter/flutter

You may be right because the bug doesn't show up in the emulator. But I've been using blend mode in other places too such as with this: https://github.com/gskinnerTeam/flutter_vignettes/tree/master/vignettes/indie_3d. It doesn't happen with them :\

[felixblaschke]

I own a Pixel phone and it works just fine. This is no bug in simple_animations itself. It's somehow related to these Chinese devices and how blurred circles are rendered. The best way is to file an issue in Flutter to address this issue :)

As you can see in the source code, I just use default canvas drawing methods. There is nothing special about it.

[fikretsengul]

You're right as you said that it's somehow related to Chinese devices :D Thank you for the library and your fast response. Have a good day. I'm good with simple_animations will continue to use it without blendmode.