GLTF/GLB texture and compression support in babylon.js

Questions
, ,
1

Hi!
In trying to reduce file size I just recently discovered Draco compression for GLB/GLTF files - which is amazing at compressing them! I’ve got a couple of doubts though - the babylon.js documentation doesn’t cover this much :sweat_smile:

  • Will Draco-compressed files (exported from Blender with the compression option that afaik is Draco) load correctly into babylon.js on any platform? How big are the relevant loaders if so?
  • Will WEBP textures only work in browsers that support WEBP or does babylon.js manage them itself? Unfortunately as Safari only started supporting it a couple of years ago if it’s tied to the browser I guess I’ll have to stick to JPEG/PNG. Why is Safari always behind on these things :cry:

Feel free to let me know if my approach to optimizing my meshes is wrong! Any advice is greatly appreciated. Thanks :slight_smile:

2

Hello!

We use gtlf-transform in a pipeline:

  1. step: gtlf-transform webp file.glb file.webp
  2. step: gtlf-transform dedup file.webp file.dedup
  3. step: gtlf-transform draco file.dedup final.glb

The final model can be used with babylon.js with absolutely no issues and let me tell you the file sizes are so small that many times I’m wondering wtf is happening and where are those tens of megabytes packed :smiley:

An example, from 93.6 to 9.3 MB…

image
image1518×114 23 KB

1 Like
3

Thank you for the example, it’s amazing how much smaller you get it!
Do you then use the final.glb without issues? My main concern is that with WEBP textures older iPhones / Macs (which don’t support iOS 14+ / macOS 11+) won’t be able to view it… Although also they only seem to add up to just over 0.6% of devices so maybe I shouldn’t be worrying too much about it…

2 Likes
4

One may unite these steps with

gtlf-transform optimize file_webp.glb final.glb

for even smaller file size.

3 Likes
5

@labris optimize is an all-in type optimizationm and may change the node names so you can’t look them up using scene.getXXXByName. We tried a lot of combinations of the available parameters and ended up with the current three steps to achieve the smalest file size whilst keeping the scene structure intact.

1 Like