Large images

[robertasg]

Hi,

Can't render an image that's over 5000x4000. Or even smaller that's relatively large in that matter. Simply shows a black screen. Any help would be appreciated (might not even be the issue with this component itself)

[gre]

This is an issue with WebGL/OpenGL not gl-react-image, nor gl-react*.

it even depends on your device capabilities. that limit depends on the hardware (graphic card basically).
You need to look at OpenGL (ES 2) / WebGL 's MAX_TEXTURE_SIZE value. For instance,

Max 2048x2048

• iPhone 3GS
• iPhone 4
• iPad

Max 4096x4096

• iPhone 4S
• iPhone 5
• iPad 2
• iPad 3

(according to http://answers.unity3d.com/questions/563094/mobile-max-texture-size.html )

for WebGL, you can directly check it on https://www.browserleaks.com/webgl

[dcworldwide]

I'm also experiencing black surface issues (and also app crashes) quite regularly. After reading your advice above @gre I tried running my react native gl test hardness https://github.com/dcworldwide/react-native-gl-image-filter-examples using a small sized test image (http://lorempixel.com/output/nature-q-c-600-480-2.jpg). The black surface issue still persists for me and I unfortunately also get intermittent crashes :(

Figure 1: Clicking the green filter sometimes shows up as black in the main surface.

Figure 2: Sometimes it works correctly. Note: The filter shouldn't be green, its a WIP

It is worth nothing that my test hardness has multiple surface instances.

I'd really like to know what I can do to help. I'd love to keep using this lib but a bit worried that i'm either using it wrong, or it's not designed to do what I'm attempting. Thanks

Cross referenced: dcworldwide/react-native-gl-image-filter-examples#1

[gre]

have you tried to run it in iOS too to reproduce the same bug?

I had some similar crash in the past ( gre/gl-react-native-v2#47 ) but it was only on the Android implementation, that is not as stable as the iOS one.

Any error stacktrace?
We need to track these errors to improve the Android implementation. help wanted :)

if you have a reproductible app, maybe worth creating an issue on gl-react-native as it's probably not related to gl-react-image.

thanks!

[pawellewandowski]

+1

[danielreuterwall]

@gre I know this is an old issue but I believe it's still valid. Getting a black image can be resolved by resizing the image before using it in gl-react-image. However you don't want to resize if not needed and not too much. Is there any way to detect the MAX_TEXTURE_SIZE? For iOS I could nowadays probably just resize it to 4k and all is good. Android has probably more variations so a detection would be great here. Any suggestions?

By the way, I'm using gl-react-native-v2. If this is available in v3, that could probably work but I had some issues getting it stable.

Cheers!