WebGL Image Compression

Phaser 3
1

There are older articles (https://phaser.io/phaser3/devlog/48) that make mention of Phaser 3 being able to use compressed textures such as PVRTC, S3TC and ETC1.

Looking at the current state of Phaser 3, it would appear that this is no longer supported. Am I correct in assuming that once the Pixi.js renderer was replaced with the new custom WebGL renderer that this functionality got lost along the way?

Currently I see in the source of the renderer that the supported texture extensions are queried but never used (https://github.com/photonstorm/phaser/blob/v3.24.1/src/renderer/webgl/WebGLRenderer.js#L673)

Has anyone else had any experience with getting these compressed texture extensions back up and running within Phaser 3?

2

To follow up on this for anyone else that stumbles across this in the future.

The answer is that as of 3.24.1, Phaser 3 does NOT implement compressed textures but that doesn’t mean that you can’t implement them on your own.

You can write a custom Loader plugin to handle loading of compressed textures. I ended up creating a CompressedImageFile that extends the BinaryFile class. By overriding the onProcess function, we can parse the compressed image file (.pvr, .pkm, .dds, .ktx), create the compressed WebGL texture, and associate it with a key in the TextureManager. This will then allow any image or sprite to use your compressed texture via a normal key reference.

The trickiest part is correctly parsing the loading binary data. Luckily Phaser-CE actually already handled this. You can port over the associated header functions from the LoaderParser here: https://github.com/photonstorm/phaser-ce/blob/master/src/loader/LoaderParser.js

You pass the binary data to the header function that matches your file type and then use the returned textureData, width, height, and format to setup your compressed texture within WebGL.

Unfortunately the only compression supported on Android devices at the moment is ETC1, which doesn’t allow alpha. So while Android needs compressed textures the most, it’s also the most restrictive. For desktop browsers, implementing S3TC compression will go a long way if you really need the extra RAM.

5 Likes
3

Hi @Xellow - did you have any working code for this? I could really do with making this work and only need ETC1 (because Kindle 2017 :frowning: )

Thanks so much for your notes - they’ve helped point me in the right direction :slight_smile:

4

Would love to know if the code for your work is available @Xellow or if you had any success with this @Fost. After pulling my hair out dealing with iOS horrible fps I have made the decision to downgrade to 3.24.1 until apple pushes out a fix. 3.24.1 magically fixes all of my fps issues, but I lack some features and this is one of them.

I plan to implement/port it over myself, and I don’t expect this to be too difficult since newer versions of phaser 3 have the feature and like @Xellow said, phaser-ce has the support as well. With that said, I figured it was worth checking on any updates from this thread before I devote some time to it.
Cheers

5

So I spent some time this last weekend and put together a plugin that enables the use of compressed textures in 3.24.1 (possibly other versions as well, but I haven’t tested it yet). I just wanted to follow up here and include a link for anybody who finds themself in the same position I was =)

https://github.com/fielding/phaser-compressed-texture-plugin

Oh, and repo is pretty bare still, but I hope to get some time this weekend to add some stuff to the readme.

Now on to the next feature that I need in 3.24.1 … isometric tilemaps.

6
1 Like