GL Surface sometimes render as all black, sometimes crashes app

[dcworldwide]

No description provided.

[st0ffern]

@dcworldwide would this be of any interest?
https://github.com/stoffern/gl-react-instagramfilters

[dcworldwide]

@Stoffern Bravo :) Nice to see someone has solved the same issue. Out of interest, in my lib, I've had issues with the GL surface or GL image crashing / rendering a black screen. Have you experienced any such behavior? The issue occurs in conjunction to loading a image captured via RN Camera. Interestingly, the problem seems to relate to loading large images, as smaller files have worked fine.

[st0ffern]

nope no problems with that, i have not tested all filters tho, only Amaro i and it worked fine.

[dcworldwide]

Ok. I'll get around to testing out the other filters in your repo in a week or so.

[dcworldwide]

@Stoffern Ok I've tested out your filters by porting your changes into my repo and using my test test harness. I've experiencing the same issues as I did previously.

• Sometimes the GL Surface is rendered as a black screen
• The filters, mostly don't work. Quite often you'll see filters with a pink hue.

I can't help but feel there are some issues with React GL.

Some examples, Amaro and Brannan

[st0ffern]

I dont think this is a issue with big files as some filters only use small files
Could it be that we need to preload the images so they are ready for gl-react?

@gre any ideas what this can be?

[gre]

not sure about the "sometimes black" but it might be related to a buggy Android implementation of gl-react-native (see answered gre/gl-react-image#3 (comment) )

[st0ffern]

@gre i dont think the render problems is related to the gl-react-image
i have used this https://github.com/stoffern/gl-react-instagramfilters in gl-react and the same problem appears here. i will try to investigate it futher..

[dcworldwide]

Ok, i've done some more testing. I've checked in my test harness changes.

• Tested only android
• I'm now loading all shader uniforms locally using require(). It appears more stable, however it still crashes intermittently. @gre how can I produce a stack trace for you?
• Upgraded to 2.28.3
• @Stoffern I think now the issue is primarily with the fragment shader implementations. Some work (Hudson, Inkwell), the others that I've tested (Amaro, Brannan, S1977, Valencia) don't. I don't understand glsl well at all so i'm stuck here.

[st0ffern]

@dcworldwide i think we should move this issue over to gl-react
I have the same problem on web and on android. I think this is a issue with preloading images.
I will setup a test to preload images before launching gl-react-native to see if it works better then.
Can do this by the end of the week.

Please use web when you try to find errors with GLSL in gl-react, this is because android and possible ios just crashes when you get a error. on web you get a error message, and the error is handled correct 😄

cc @gre

[dcworldwide]

Hmm, is the following not the same as pre-loading textures?

const resolveAssetSource = require("react-native/Libraries/Image/resolveAssetSource");
const inputImageTexture2 = resolveAssetSource(require('../../assets/filters/brannanBlowout.png'))

I can cross-post the issue. I raised it here, because this project acts as a reproduction.

[st0ffern]

No, react-native uses Fresco lib to load images. that is a async call for opening stream.

It will:

1. load react-native
2. load fresco image
3. fresco opens stream in background and read image.
4. react-native continues to load
5. gl-react-native til load
6. fresco filestream read completes and sends image to react-native

small images may work as they are not to long to load. bigger images would possible fail to load before gl-react-native and gl-react

PS gl-react-image also uses fresco

[mersay]

android is crashing for me. can't even load anything

[dcworldwide]

@mersay probably not related to this, but to a crashing shader. Makes sure you're uniforms are all in use and valid

[st0ffern]

@mersay not related to this. if it crashes please provide log details.
If ReactNative dont provide crash error, then react on web will.

@dcworldwide if the GLSurface renders black i guess you are using web og url images?
Make shure to preload them before rendering GLSurface..

[fakenickels]

I know this is a bit hacky but if you set the Surface wrapper an opacity of 0.1 the image shows correctly