WebGL Image Compression

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?

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.

1 Like