Not all tiles are rendering on Android with WebGL

[pdrhlik]

I'm still very new to Excalibur but I managed to create a character and load a map though the Tiled plugin. The example map I'm using can be found here.

Everything is loaded perfectly in the browser and also on iOS. The issue is with Android. I get these 2 following errors there:
WebGL: INVALID_VALUE: texImage2D: width or height out of range and
[.WebGL-0xdf10c600]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?

What happens is that it only loads some simple tiles but not tiles that are a bit more complicated and for example also contain some objects. I attached photos from all platforms to give you a better idea of what's happening.

Is this fixable or is it just an Android issue that we can't get past? I tried using the CanvasGraphicContext which works even on Android but it's basically unusable because of some lag.

Thanks in advance,
Patrik

Android:

iOS:

Web:

[eonarheim]

Hi @pdrhlik I'll take a look at this today, this definitely feels like an android related bug with the webgl code.

I'm going to create a bug issue for this 👍

A few quick asks:

• What browser and version do you see this issue?
• What is the android OS version?
• What hardware do you see this issue on?
• Please send me some example images that aren't loading properly (it would be really awesome if you have a small reproduction repo for me)

I should be able to reproduce this in browserstack given enough info.

[eonarheim]

Okay I think I know what is going on, on mobile devices they usually have a 4k limit per texture (4096x4096).

Excalibur will try to make textures power of two dimensions, so if the image atlas being uploaded exceeds 4096 in either width or height after that, it renders a black rectangle because the GPU refused the image. I've confirmed locally that if I have a (6912x96) image I see the same log output and behavior in browserstack that you see in your game.

Current ideas for fixes:

• Resize the texture on the fly to meet the GPU's reported maximum but with a console warning about the image size (this would be a lossy operation), but it would theoretically "just work" 😄
• Throw a more friendly error explaining the image limitations and halt the game

Workaround:

• Resize any image assets below or to 4096x4096

[pdrhlik]

Well, I just finished the reproducible repo https://github.com/pdrhlik/excalibur-android-tile-issue if you want to have a look :-)

The map I'm using has several tilesets and one of them is 4256 high. I'll try and have a look at that. I haven't played with any maps or tilesets myself yet. I wanted to get comfortable with understanding how Excalibur works :-)

Anyway thanks a lot for your time!

[eonarheim]

Thanks for the detailed explanation!

I'll test any fixes against your repo to be extra sure we have a solution that catches everything (either with friendlier messaging or dynamic resizing).

[pdrhlik]

Perfect! Thanks as well. I can't wait to finish my first game :-)

[eonarheim]

@pdrhlik gh issue created #2206

I've got some code that adds some more helpful error messaging, not positive it's possible to resize on the fly easily.

Thoughts on the messaging?

Error situation (definitely won't render properly):

I have a corresponding warning for images in general that are greater than 4096 in width/height so developers are warned in desktop environments: