Compressing BABYLON/GLTF Scenes To Produce High End Experiences for Mobile Devices

Content creation (3dsMax, Maya, Blender, glTF)
1

Reference: Unit 21

I am using their materials and all the credits go to the creators of this wonderful scene.

Long story short, I looked at this scene and it was amazing. Problem is it doesn’t run on a mobile phone. So I set out to create a workflow to bring high quality scenes like this to mobile phones.

I have a guide talking about the extraction process from BABYLON and rebuilding it with Blender. Now here is how you compress it to get it run on a mobile phone.

  1. Download ZenCompress Zen Compress Releases

  2. Open the application and load a GLTF Separated file from Blender. Before you go on, visit this
    website called GLTF Report to check how much memory your file will take in the VRAM
    guide1

  3. When you have Zen Compress open, Leave the settings default for now, Import GLTF Separate > Add Directory to Save Compressed > Export GLB

    guide2
    guide21244×380 145 KB

  4. When it’s done you should have a GLB. Upload it to GLTF Report website and see the difference in VRAM
    guide3

It went from 286MB in VRAM to 73MB in VRAM. That is super significant when you are working with mobile devices and such a massive feature to have in your arsenal.

Thank you to the Babylon.JS Team, The Khronos Group and all the wonderful individuals that tirelessly work everyday to make 3D on the web a dream come true for us developers and users who enjoy interacting with it everyday. Enjoy :smiley:

**NOTE: A big factor in VRAM usage is the size of your textures. This one uses the default 4K textures for most of them. Another fix is downscaling the textures to 2K and then compressing them to save more on VRAM. This conversion table should help you. Keep in mind these are not accurate numbers just a rough estimate. (Per Texture)

1K - 5MB VRAM
2K - 22MB VRAM
4K - 90MB VRAM

**NOTE: To enable KTX Textures, in your code in the createscene function add the following line

//KTX Textures
BABYLON.KhronosTextureContainer2.DefaultNumWorkers = 0;
1 Like
2

Very cool! Thanks for sharing.
I found something similar that works really well in reducing gltf file size which i used a while ago to compress large CAD models. Works really well. This one is just a simple lightweight API , you could do the compression as a service somewhere on your backend instead of manually having to do it ahead of time. 📦 gltfpack | meshoptimizer

1 Like
3

No problem. I am mobile first so I try to port over the best graphics Babylon has to offer. Honestly it’s down to user preference. It’s just nice to know we can push 4K textures on mobile experiences. The load time will increase as a result of all that compression. I tested it on an iPhone 12 Pro Max and it worked flawlessly after the long load time. I also downscaled the textures to 1K and tried it and it loaded much faster with lower resolution of course. I am glad you found it useful.

4

I use Command-line quickstart | glTF Transform for the same purposes, especially for the batch processing. It works with usual GLB as well.
More on this topic also here - https://github.com/KhronosGroup/3D-Formats-Guidelines/blob/main/KTXArtistGuide.md
There is also glTF Compressor for KTX from Khronos.

2 Likes