GLB with WEBP Textures Converter

Hello friends,

We are glad to introduce GLB with WEBP Textures Converter. Just drop some 3D model into it and see the size difference, compare visual quality and download if satisfied.
For example, the size of the most of Sketchfab models could be reduced 5-10 times without visual quality losses and without any geometry changes.
Based on well-known Sandbox, GLB with WEBP Textures Converter has only two additional buttons at the bottom right corner: Toggle Skybox and Export GLB.
The next step will be the option to resize textures to the chosen dimensions.
Enjoy, test and give some feedback!
This is the part of the bigger project related to assets optimization pipeline, so any advices are welcome!

The updated version with much more features: https://glb.babylonpress.org/

Forum thread - GLB Optimizer for Geometry and Texture Conversion (WEBP and KTX2)

12 Likes

Pretty good! Barely noticeable :heart_eyes:

a_b

1 Like

Later there will be implemented pixel comparison, first for 3D screenshots, then for all textures.

1 Like

wish avif was already everywhere :slight_smile:

Seems that Edge browser is the biggest issue with AVIF - AVIF image format | Can I use... Support tables for HTML5, CSS3, etc

Meanwhile my Sandbox is already able to display uploaded AVIF images as textures.

1 Like

This is awesome!

It looks so cool, thank you for doing it!

1 Like

Hi, @labris,

Thank you for your proposal, i use it a lot to convert huge glb files.

But sometimes, it does not work (nothing happens) and I don’t know why. Could you try with this uploaded file (zipped glb file) and tell me ?

Thanks in advance,

Boris
Arbre_15.zip (5.6 MB)

Thanks for the report!
Seems that there is the problem with the processing of Draco compressed files.
I’ll have a look how it is possible to correct it.
Meanwhile, here is your file, un-dracoed, webp-ed and draco-ed again
Arbre_webp_draco.zip (3.2 MB)
The size reduced from 6 Mb to 3.5 Mb.
For batch processing of such files one may use Command-line quickstart | glTF Transform where there are some other settings.

Thanks a lot @labris !!! The reduction rate is quite amazing.

I have a question : If i use theses webp textures glb in a project and if i save this project in the babylon format, will the size of the babylon file be smaller than if the glb file was not reduced ?

Shortly, if you would manage to save .babylon file with .webp textures, it usually will be smaller than the same .babylon file with .jpg or .png textures.
By default Babylon.js exporter uses lossless png.

Can’t open the link ((

It works for me - https://webp.babylonpress.org/
Let me know if the problem will occur again; currently I don’t see any downtimes at my server.

Check your VPN connection :slight_smile:

Thanks for creating the tool @labris . I’ve always struggled with understanding when to use ktx2 vs. webp. My intuition is that Ktx2 offers the GPU texture compression but webp offers less bits over the network. Do you by any chance know if ktx2 is closer in size to webp? What razors/rules of thumb you use to determine when to go with either of those appraches?

There is a really good Artist Guide here which probably could answer all your questions - 3D-Formats-Guidelines/KTXArtistGuide.md at main · KhronosGroup/3D-Formats-Guidelines · GitHub
Cannot resist to quote here a piece about GLTF texture formats:

glTF Texture Formats

glTF supports four texture formats. Each has different capabilities; choose the appropriate format for the task.

  1. JPEG
  • General guidelines: Use for small file sizes, and wide compatibility. Download is fast, but loading time is slow. Uses a lot of memory, does not support alpha.
  • Does not stay compressed in memory.
  • Wide compatibility.
  • File sizes can be small.
  • Good image quality. Lossy compression, can be noisy.
  • Does not support alpha.
  1. PNG
  • General guidelines: Use for highest image quality, wide compatibility, and alpha channel. Loading time is slow, uses a lot of memory, and file sizes can be large.
  • Does not stay compressed in memory.
  • Wide compatibility.
  • File sizes can be very large, unless mostly flat colors.
  • Perfect image quality overall. Lossless compression, but can use palettized compression.
  • Supports alpha.
  1. KTX
  • General guidelines: Use for fastest loading time, and smallest memory footprint. Download may be slower.
  • Stays compressed in memory.
  • Renderer must support KHR_texture_basisu.
  • File sizes are similar to JPEG but can be larger.
  • Good image quality. Lossy compression, can be blocky.
  • Supports alpha.
  1. WEBP
  • General guidelines: Use for smallest file size, and alpha channel. Download is fastest, but loading time is slow, and uses a lot of memory. If normal maps are too noisy, use JPEG or PNG instead.
  • Does not stay compressed in memory.
  • Renderer must support EXT_texture_webp.
  • File sizes are usually the smallest, much smaller than JPEG.
  • Good image quality. Lossy compression, can be blurry and noisy.
  • Supports alpha.

As for the practical tool for me the best is GLTF-Transform CLI.
Here is another very good guide how to use it to KTX your GLBs :slight_smile: - 3D-Formats-Guidelines/subpages/KTXArtistGuide_glTF-Transform.md at main · KhronosGroup/3D-Formats-Guidelines · GitHub

As for KTX pipeline it works best with homogenous assets packs, so you can find the best settings for each texture channel and batch process all assets with these settings before production. KTX is lossy format so one needs to perform visual checks to avoid artefacts.
When dealing with different third-party assets like Sketchfab models etc I believe the best you can do without touching the geometry is to convert textures to WEBP, check if quality is acceptable and save the file if satisfied (or use the original if the quality loss is unacceptable). Sometimes it is good idea to exclude normal maps from lossy processing.
For me the biggest problem was the convenient visual comparison between the original and optimized GLBs, that is why I created this tool :slight_smile: and I think I’ll add more features into it.

3 Likes

Thanks @labris for the very detailed explanation!

1 Like

Added the possibility to choose texture resize dimensions.
The new Resize button is available instantly and is situated at the right bottom corner, near Upload button.

By default there is No Resize.
One may choose from available resize values before uploading the GLB file.
Resize settings are stored in localstorage for user’s convenience.
Resize value change will have no effect on the file already loaded.
Resize value is displayed at the top right panel.

The next step could be the ability to exclude normal maps from downscaling for better visual results in some cases.
But probably it would be more interesting to add a geometry optimizer?

Very compressible :grin:

  • original: 41.31MB
  • webp: 25.7MB

2 Likes