Unable to load compressed textures

[goldfire]

Phaser version(s): 2.7+

Line: https://github.com/photonstorm/phaser-ce/blob/master/src/loader/Loader.js#L2314

What should happen: When loading compressed textures using a format object:

game.load.image('key', {
  truecolor: 'image.png',
  pvrtc: 'image.pvr',
});

The file should then be loaded like any regular PNG/JPG file.

What happens instead: The correct compressed texture is detected and used; however, it doesn't load the file. The file gets a type of texture. However, inside of loadFile, there is a check for if the key has _truecolor in the name. If it doesn't, the file never gets loaded and the game is unable to start.

I'm not sure if the issue is that the file should be marked as image internally instead of texture or if that check shouldn't be there. I haven't worked with Phaser enough to make that distinction, but hopefully someone else has some insight into why it is setup like that.

[samme]

Are you seeing this problem? Loader stalls when requesting PVR texture

[goldfire]

Yes, that is exactly what I am seeing. The debug output on that sample shows the type as texture instead of image, which is what I was seeing as well.

[samme]

Loader stalls when requesting PVR texture

The truecolor file (png) loads normally. The compressed texture (pvr) is in the queue and loading indefinitely but I don't see a network request for it. state#create isn't called unless you do game.load.finishedLoading().

https://samme.github.io/phaser-examples-mirror/texture-compression/example.html seems to have the same problem.

@photonstorm can you advise?

[goldfire]

@samme Did you take a look at the line number I linked? There's no network request because the check for truecolor prevents loadImageTag from getting called on the texture. I'm not sure if the issue is that it is being incorrectly classified as a texture rather than an image or if that check is just incorrect though.

[samme]

Yes, I expected it would load compressed textures elsewhere, maybe by XHR instead of an image tag, but I don't see anything like that.

I think file.type texture is still correct because compressed textures need special handling in Loader#fileComplete (L2796).

I'm confused since this must have worked at some point.

[samme]

Hi @goldfire can you try phaser-test.js.zip?

[goldfire]

It does successfully load the files now; however, I'm not able to get anything from these files to render on screen. I'm still not sure if that is a separate issue or if I'm just doing something wrong. Will dig into it some more in the morning.

[goldfire]

@samme Okay, so I discovered the first issue was that our webpack setup adds query strings to the files, which was breaking the extension type extraction. I've opened a PR to fix that at #166. However, that is now causing the following error to be thrown when trying to load the compressed textures (inside of addCompressedTextureMetaData):

Phaser.Loader - texture[textures]: Cannot read property 'width' of null

[samme]

Phaser.Loader - texture[textures]: Cannot read property 'width' of null

That's only when using query string URLs?

[goldfire]

No, that is without as well. The error didn't happen because it never got to that point since the extension was detected as pvr?asldjflds... instead of just pvr. The error is when it is creating the texture object, where it calls data.width and data.height. However, in this instance the data isn't an image, it is an ArrayBuffer.

[samme]

It's working correctly for me now: http://codepen.io/samme/pen/YVwYzm

ArrayBuffer can be passed unparsed (as data) if Phaser.LoaderParser doesn't recognize the extension. But I don't know why ArrayBuffer itself would be null — can you trace that?

[goldfire]

Thanks for that example! It turns out the sample PVR file I was using was corrupted. I exported a new one using TexturePacker on Windows and it is now working perfectly. Thanks for the quick turnaround, really appreciated!

[samme]

Fixed in #165

[mattcolman]

I'm still experiencing this issue. @goldfire said he fixed the issue by using Texture Packer on Windows. Not sure if this is a Phaser bug or if Texture Packer on Mac is just exporting dodgy pvrs. The pvrs however seem fine (I can view them on the mac, they don't appear to be corrupt).

[goldfire]

@mattcolman I was never able to get them to work when exported on Mac, but they worked fine when exported on Windows. However, we ended up not using any compressed textures anyway because there were all sorts of issues with them on mobile and the quality was just too poor on most of our textures.

[CodeAndWeb]

The code should work on all systems. It's the first time that I hear that TexturePacker is producing malformed PVRs. Which settings do you use? Can you send me the .tps file and the generated files on Mac? If possible also on Windows? (put 'em in dropbox and send a link to support@codeandweb.com)

[mattcolman]

ah ok. Good to know. Thanks @goldfire . @CodeAndWeb I'll send over the files tomorrow.

[RenaudRohlinger]

I have the same issue, and after further investigation only DXT1 looks to works for my google chrome on macOS but it is available only on Windows. I tried every formats on osx and none looks to works.

Edit :
DXT: supported by all desktop devices and some Android devices
PVR: supported by all iOS devices and some Android devices
ETC1: supported by most Android devices

Already so basically, it is normal if PVR doesn't work on chrome desktop, and since we can't compress with DXT on osx we won't be able to make it works on a desktop.

[RenaudRohlinger]

@goldfire @samme you look really better with webgl than me, could we have a talk about ASTC compression ?

It'is like the new standard for texture compression since 1 or 2 years now and I would like to use texture compression on my webview based game like lots of phaser users I think.
As you must know since Android 5+ (like (50/60)% of current android ATM) chromium webview is implemented in every android as an external app always up to date or packed with the chrome app so all the html5 based game could use texture compression with ASTC compression. (ATM -2% android can use texture compression with phaser)

I already forked phaser-ce to implement this feature. The only problem still is that I absolutely don't understand how the loader parser of phaser works :
https://github.com/photonstorm/phaser-ce/blob/df0eb59635a88557cea2de3f5b183c6716330650/src/loader/LoaderParser.js#L295
(we just need to update this dds function and it should work ?)

If you wants to try, here an excellent texture cli compressor : (You can use this one on osx hehe)
https://github.com/TimvanScherpenzeel/texture-compressor

ASTC compression is available in all the latests versions of chrome/chrome mobile/firefox/ firefox mobile !!

Some sources :
https://developer.nvidia.com/astc-texture-compression-for-game-assets
https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_compressed_texture_astc

[mattcolman]

@RenaudRohlinger I'd recommend using Phaser 2.6.2 or Phaser 3 and NOT Phaser-ce for webgl on mobile. In my experience phaser-ce webgl on mobile is very slow. There is actually another Open issue about it #356

[RenaudRohlinger]

@mattcolman I am pretty sure if we manage to use texture compression instead of png we can easily go from 15/20fps to 60fps. There is a lots of benchmark like :
https://blog.playcanvas.com/webgl-texture-compression-made-easy/
We drop from PNG 400 VRAM Usage to 60/70 usage for the same texture.