WEBGL, texImage2D: width or height out of range

Phaser 3
1

Hi,
I finished develope my prototype game. In browser desktop and laptop ( chrome ), my game background appears. but when I see in my mobile phone browser ( chrome ), my game background doesn’t appear, just blank with black colour.
I check inspect element with remote device in chrome desktop connect usb debuging in my phone, this error WEBGL texImage2D appers.
size background image ( 4866x3000 ), after resize background image ( 1200x740 ) still no change. How to fix this?

This my game :
http://staging.luxebite.com/games/monster-defense/

This error log :

21%20AM
Screen Shot 2019-10-24 at 8.56.21 AM.png596×708 74.9 KB

Update :

This error so weird, using my phone ( mi 8 lite, chrome 77.0.3865.116, android 8.1.0 ) background doesn’t appear ( error WEBGL texImage2D )
using my friend phone ( oppo f11, chrome 77.0.3865.116, android 9 ) background appear.

2

Not an expert on WebGL by any means, but judging by the errors, you could try making the texture’s size a power of two (2, 4, 8, etc.). I haven’t really heard of implementations which don’t support NPOT textures, but I guess it’s still worth a try.

You should also consider the max texture size supported by the device. Look for the MAX_TEXTURE_SIZE shown by this website. You can also get it from Phaser’s renderer, but I’m not able to look up the particular command right now.

1 Like
3

Thanks for the reply, I’ll learn again about WEBGL from your suggestion.
But, today I check my prototype game again, background appear (don’t know how this program can solve himself).

4

I had the same problem, my config was set like this:
const config = {
type: Phaser.WEBGL,
width: 1920 * window.devicePixelRatio,
height: 1080 * window.devicePixelRatio,
…

and the " * window.devicePixelRatio" was causing the issue. Removing it fixed it for me.