Post processing graphics glitch

Hi,

We’ve recently discovered a graphics glitch that occurs with the below packages:

"@babylonjs/react-native": "1.7.5",
"@babylonjs/react-native-iosandroid-0-71": "1.7.5",

Version 1.7.4-preview does not appear to contain it.

We can see this in react-native 0.71 and 0.72. At this point it’s mostly evident on a Samsung Galaxy Tab Active 3, however we have also seen it rarely on a Active Pro and a Pixel 8 phone.

The below appears to be related to our internal EDL (eye dome lighting) which is using a custom post processing effect (using the depth renderer/map).

The below image is caused by the inbuilt Glow post processing effect

Here’s a video of the post processing when we turn them on and off.

We’re still investigating the exact cause and have only narrowed it down to the EDL and Glow effect, plus the 1.7.5 version of the react-native package. Once we can create a working example / repo we can share I’ll post it here.

Is there anything in the 1.7.5 package that can be narrowed down that could cause this? It’s not tagged in Github so I couldn’t investigate myself what would be the cause.

Thanks!
Casey.

@BabylonNative

Hi @Casey_Gibson did you try with a more recent package version like 1.8.2 ?
I know some features related to post processing are still missing.

Yes, we were on 1.8.2 when we first noticed the issue.

We haven’t changed anything as far as I know since 1.6.3.

It looks like between 1.7.4-preview and 1.7.5, there is this (big) PR:

Key point is the BabylonNative update which is too big to see anything standing out.
I’m pretty sure this is related to glslang update and we should try to release a new BRN npm package with latest BN.
Do you remember anything related to that @srzerbetto ?

@Casey_Gibson can you provide us a small repro PG?

This might be related to the size optimizations we did for glslang or SPIRV-Cross. We can disable those optimizations and release a new package if that’s the case. We should probably wait for a way to repro this to be sure.

I’m still in the process of making a repo. I’m hoping to have something in the next few days.

Here’s a reproducible repo: https://github.com/Emesent/BabylonReactNativeSample/compare/AFR-1828--Graphics-Glitch

I’m pretty sure we’ve shared this repo with you previously so you should have permission. If not then please let me know what username to add. The branch to look at is AFR-1828--Graphics-Glitch

In summary, using the latest v6 (and also v7) of BabylonJS and the latest react-native package can cause the graphics glitch.

Here’s a screen recording on how to reproduce it: AFR-1828: Babylon graphics glitch.mp4 - Google Drive

Please keep in mind that I haven’t been able to reproduce this on all devices. I’ve been able to trigger this reliably on a Samsung Tab Active 3 (Android 13) and a Tripltek T82 (Android 10).

Devices I cannot reproduce this on are the Samsung S23 Ultra and Tab Active4 Pro. I don’t know what the differences are on those.

Please let me know if there is anything else you need or anything I try to help resolve this.

Thanks!
Casey.

1 Like

Thanks for the repro @Casey_Gibson ! That will be support useful!
We will probably be able to take a look at it early next week.

2 Likes

Hey @srzerbetto, just following up to see if you need anything from us to help resolve this? Thanks!

Hello @Casey_Gibson , how are you doing?

Thank you once again for the repro, I ended up not having time to look at it last week but I will do it this week. Unfortunately I’m currently not able to access the repo, can you give my user permissions to view the repo? The user should be “SergioRZMasson”.

Sorry for the long delay on investigating this.

Hey @srzerbetto, all good. You should have read access to the repo now. Thanks!

Thanks @Casey_Gibson ! I’m able to access it now.

1 Like

Sergio is on vacation, so I’m taking care of the bug this week. I could repro once after pressing resize button but I can’t anymore :frowning:

1 Like

Yeah it’s a strange one. At least in the case of EDL, I suspect the depth renderer/map may be implicated somehow, as I’m seeing a difference in web versus Babylon React Native that wasn’t evident in previous versions of Babylon React Native, however this could be a separate issue. I’m still investigating, so will get back to you if I can confirm they are related.

I’m coming to same conclusion: somehow attached depth buffer is not properly resized and filled with garbage values. or not cleared …I got this issue a long time ago on Linux where freshly created ,FBO was not cleared.

Issue is here: Post processing graphics glitch · Issue #1381 · BabylonJS/BabylonNative · GitHub

I’m starting to believe this is related to opengl/bgfx and not React Native. My guess is back buffer is not properly resized and depth is out of sync. I think I should be able to repro with babylon native. I’ll let you know when I have a branch to test.

EDIT: in the mean time, I have a PR to update BRN with latest from BabylonNative : Update BN and BJS version to 7.6.2 by CedricGuillemet · Pull Request #645 · BabylonJS/BabylonReactNative · GitHub
Please test it and let me know if it goes with that update.

1 Like