GLTF Exporter : Optimize textures files

Questions
1

Hi,

I’m playing with the GLTF serializer and I noticed that when exporting to GLB / GLTF the textures created are larger than the original files. For example I had a 80 kb JPEG texture that became a 561 kb png

Looking at the code I saw that texture file for export seems to be created from the webgl scene canvas as base64 string… which would explain this…

I’m looking into a way to pack the original texture files instead of recreating them from base64 strings… I’m currently investigating this in the code, but I though I would ask here also get some help.

Thanks

1 Like
2

We are recreating them as you may have used uv transform and then the texture may need to be changed.

We can definitely be smarter in our tests. Please feel free to send a PR if you find a better way

3

Thanks for the explanation, I don’t think there is a quick win here, a room for optimization may be when calling .toBlob() , we could keep the .jpg format of the original texture, but we don’t know if people have set-up transparency stuff that might require png.

Another idea I had was to run an image optimizer like pngquant or mozjpeg in browser before packing to GLB… but I’m not sure if that is possible and if so it might be really slow…

I think for my use case my workaround would be to send the assets on the server after exporting to GLTF and optimize them there, repack the GLB and send it back …

Open to any other ideas !

4

pinging @kcoley to get his thoughts

5

@tdurand probably the simplest method would be your approach of modifying the textures on the server.

The exporter can potentially do a number of modifications to the textures, for example, converting specular glossiness textures to metallic roughness, converting standard material textures to pbr values, converting dynamic textures, and modifying the alpha channel base on the blend mode.

Applying a texture compression during export could slow down the exporter, which can cause time out issues with browsers. But you may be able to gather the textures after export and then run the JavaScript texture compression code after the glTF exporter promise resolves in your code if you serialize to glTF. This sample playground I made a while ago may be a reference: Babylon.js Playground

Hope this helps

6

:+1: thanks for your though … Yes I think I will go for the server side optim, in my case I have a large texture that can go from 8 Mo png down to 500 kb jpeg :wink: if optimized after exporting

1 Like
7

For those interested, I found this project that implements client side optimizations of texture (converting to Jpeg)

Demo: https://glb-packer.glitch.me/
Code: Glitch :･ﾟ✧

It was mentioned in the facebook doc about GLTF files :wink:

3 Likes
8

For those who are interested there is online GLB Converter with WEBP and KTX2 textures support - https://glb.babylonpress.org/
More info here - GLB Optimizer for Geometry and Texture Conversion (WEBP and KTX2)

2 Likes