# GLTF and / or GLB online optimization and compression

**URL:** <https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753>\
**Category:** Resources\
**Created:** [March 13, 2024, 8:25pm UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753 "2024-03-13T20:25:56Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [March 13, 2024, 8:25pm UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/1 "2024-03-13T20:25:56Z")

</div>

This is intended for all who would be looking for a quick way of optimizing and compressing their GLTF / GLB models online.

Some other viewers are available in the later posts but initially you can try using my [GM Viewer](https://githubdragonfly.github.io/viewers/templates/GM%20Viewer.html) which includes the following PRESET export options from [glTF Transform](https://gltf-transform.dev/):

- `DRACO` (marked as GLB\_d)
- `MESHOPT` (marked as GLB\_m)

The viewer will allow you to select the maximum exported texture resolution and a choice of 8 texture formats:

- `None` (original texture format)
- `PNG` (from glTF Transform)
- `JPEG` (from glTF Transform)
- `AVIF` (using [@jsquash/avif](https://github.com/jamsinclair/jSquash) encoder)
- `WEBP` (from glTF Transform)
- and from experimental [ktx2-encoder](https://npm.io/package/ktx2-encoder):
  - `KTX2` for ETC1S + UASTC compression texture dependent
  - `KTX2e` for ETC1S Only compression
  - `KTX2u` for UASTC Only compression

You could export your model by using all available options and then, size / quality wise, compare their outputs to see if any of them might work for your purposes.

Any other options that you might require would involve using the command line in terminal, as you might find as a suggestion in some other topics.

This viewer can be used as a standalone so modify and improve whatever you can.

Viewing the exported models in any GLTF Viewer would require that it has DRACO and / or MESHOPT decoders already included plus any texture extension that might be required.

---

<div class="post-metadata">

**Author:** ![didi\_softwares](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didi_softwares/32/22686_2.png) [@didi\_softwares](https://discourse.threejs.org/u/didi_softwares)\
**Post date:** [March 13, 2024, 11:26pm UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/2 "2024-03-13T23:26:26Z")

</div>

Nice one i using to compress my GLBs

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [March 14, 2024, 2:09am UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/3 "2024-03-14T02:09:17Z")

</div>

> [@GitHubDragonFly](#):
>
> The viewer will allow you to select the maximum exported texture resolution.
> 
> You could export your model by using all available options and then, size / quality wise, compare their outputs to see if any of them might work for your purposes.
> 
> Any other options that you might require would involve using the command line in terminal, as you might find as a suggestion in some other topics.
> 
> This viewer can be used as a standalone so modify and improve whatever you can.
> 
> Viewing the exported models in any GLTF Viewer would require that it has DRACO and / or MESHOPT decoders already included.

That’s awesome!! Might I request drag and drop? And also maybe a link to the boilerplate for setting up the loaders with meshopt+ktx2 etc? 😃 Then I can direct people to one stop for optimizing and how to load the optimized meshes.  
Cool stuff!

---

<div class="post-metadata">

**Author:** ![Arthur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arthur/32/22954_2.png) [@Arthur](https://discourse.threejs.org/u/Arthur)\
**Post date:** [March 14, 2024, 12:12pm UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/4 "2024-03-14T12:12:03Z")

</div>

Good stuff. I’ll be sticking with [gltf.report](https://gltf.report/) for now though, as it’s more mature.  
Kudos on having the WebP option, I think gltf.report might be able to do it but I’d have to check the gltf transform docs for that.

What I’d really love is for options to convert textures to KTX2 formats, so that 3D modellers can send me a fully optimised model when working on a project.

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [March 14, 2024, 6:56pm UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/5 "2024-03-14T18:56:32Z")

</div>

@manthrax and @Arthur,

KTX compression appears to only be available in command line interface, so there is no way for me to include it as a web option.

I have not included either drag-and-drop or ZIP support in any of my viewers and not really looking to do so.

This is not to stop anyone from trying to improve it on their own since this viewer’s HTML file can be used as a standalone. If somebody does come up with a code that can be weaved into the existing code then I could include it as well.

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [March 15, 2024, 9:53am UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/6 "2024-03-15T09:53:48Z")

</div>

@manthrax and @Arthur and all other forum users,

There is now KTX2 support included with a choice of either ETC1S or UASTC. Even though it appears to work properly it should be considered as experimental.

A recently posted ktx2-encoder on NPM is providing this KTX2 support and appears to be doing it properly. Do note that this process can be a little bit slow so just be patient.

My GM Viewer’s menu controls were adjusted and my initial post was updated to reflect this new change.

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [June 17, 2024, 9:25pm UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/7 "2024-06-17T21:25:19Z")

</div>

This is just a little bit late of a reply to the question by @manthrax about boilerplate for setting up the loaders with meshopt+ktx2 etc.

Try to take your time and just inspect the code of my [GLTF Viewer](https://github.com/GitHubDragonFly/GitHubDragonFly.github.io/blob/93a6707d44914d27556ac8f8167c0176e86f9c15/viewers/templates/GLTF%20Viewer.html) where you might observe that:

- most of the stuff is setup within the `importmaps` and `module` scripts on the top of the document:
  - this is applicable to both loading and exporting
  - all the imports that start with `../static/jsm` are actually calling modified version of the components and can be replaced with `three/addons` to call the official components instead

- creation of the gltf\_loader is done in the `init` function after the `renderer` is created:
  - this is where KTX2 and DRACO and MESHOPT are attached to the gltf\_loader

You will not get overwhelmed with the code if you can focus only on the parts that might be applicable to your setup.

Everything can be simplified and rearranged, maybe look at the official three.js examples where they usually contain the code within the `module` script.

If you might be interested in exporting only, then observe the `export_gltf` function:

- this is where the `draco_compress` and `meshopt_compress` functions are called so check those functions as well
- some of my other viewers also have the same setup which allows for other formats, like OBJ and DAE and 3DM etc, be exported as GLB with compression applied.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [June 18, 2024, 2:28am UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/8 "2024-06-18T02:28:59Z")

</div>

I wasn’t suggesting making the boilerplate available for my benefit. I have all that in my workflow just fine. I was suggesting you make it available on your site as a popup or something, so that users don’t use your site to compress a model, and then end up here asking how to set up the loaders, aka one stop shopping!

Additionally If I could drag a .glb file onto your website and get meshopt+ktx2 compressed output, I would definitely use that, and direct users there for ease of implementation!

I’m not sure why there is so much inertia to supporting drag and drop of files?  
Locating files with the file picker is a horrible user experience. That alone is enough to keep me using the commandline tools.

However imo meshopt without ktx2 is of limited use. Glb file size is often dominated by texture size for the majority of models, so ktx2 is a huge win there.  
Additionally, vertex dense geometries tend to be much larger files, (point clouds, giant environments) so if that is a limitation for doing compression on the web, then again, I would probably default to the commandline. The commandline tool is multithreaded, and can handle files on the order of gigabytes.

I like what you’re building… it looks like a very capable tool, but some basic quality of life features are going to prevent it being widely adopted.

Correct me if I’m wrong but:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/d/0d874fb86cdbfca8158a61310836b956df53e8f3.png)

You have a gigantic spinning 2d logo that serves Zero purpose, with a TON of UI scrunched up into the header bar of the page. There are 2 buttons for choosing files, with no indication of what they are/what they mean.

As a user this would be fine if I could drag a .glb file onto your spinning logo, and it would load my model and display it. As it stands that is not the case.  
I’m not clear on the reasoning behind this design? Is there something I’m missing that prevents it from being as seamless/usable/uncluttered as something like:

[gltf](https://gltf-viewer.donmccurdy.com/)

or

[https://gltf.report/](https://gltf.report/) ?

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [June 18, 2024, 5:40am UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/9 "2024-06-18T05:40:19Z")

</div>

@manthrax there is only one thing users should realize, which is that all they need to do is pay a single visit to my repository, download `GM Viewer.html` file to their device and run it from their device every time they need some GLB file compressed. This way they would not need to visit my webpage ever again.

Since this file is standalone, all they would need to remove from it is a single line on top that actually looks for `favicon.ico` in my repository. Once this line is removed then the file will be like their own and they can modify it if they wish.

By the way, the picture of the GLTF Viewer that you posted doesn’t really do it any justice since it doesn’t show as maximized on the screen. I never really suggested to users to actually use this GLTF Viewer for compression but to only look at its code and try to use whatever parts of it they can in their own projects. And KTX2 support is included.

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [June 18, 2024, 6:32am UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/11 "2024-06-18T06:32:21Z")

</div>

@manthrax just so users don’t get confused with your picture of the GLTF Viewer, here is a picture of it at 80% zoom and window resized to 874x763.

This just shows that a proper combination of zoom and window size can still have it visible and its controls uncluttered.

 ![GLTF Viewer (80 Zoom - 874x763)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/7/d74dfd0239a89b6ec9793f1f4cc366c97ed3bdc8.png)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [June 18, 2024, 6:52am UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/12 "2024-06-18T06:52:25Z")

</div>

I apologize for the tone of my reply above.  
The windows file picker just fills me with rage.

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [July 8, 2024, 6:22pm UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/13 "2024-07-08T18:22:59Z")

</div>

This is a notice for all who might have downloaded the `GM Viewer.html` file previously.

It appears that revisions of the `ktx2-encoder` beyond `0.0.0-experimental.5` are not importable by the `esm.sh` network so this has been corrected on my end with hard coding of the experimental version. Maybe update this import on your end as well.

EDIT: This `ktx2-encoder` import issue appears to have been resolved with its `0.1.1` version

Also, for those who might be interested in trying a slightly stripped down mobile version of the `GM Viewer` then check this [link](https://githubdragonfly.github.io/viewers/templates/Mobile/MGM%20Viewer.html). Maybe try it and see if it works for you.

As it was suggested before, KTX2 exports do take some time to process even on a desktop and not to mention mobile hardware requirements that might be needed for certain models. My testing of standard damaged helmet model did complete the export in Chrome browser on Huawei P10 mobile phone.

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [September 20, 2024, 5:17am UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/14 "2024-09-20T05:17:36Z")

</div>

For those who might be interested in WebGPU version of optimizer / compressor, maybe try using my [GLTF WebGPU](https://githubdragonfly.github.io/viewers/templates/GLTF%20WebGPU.html) viewer.

Not really sure of how much of a difference it might make.

It does have a different interface since it is using three.js library directly, unlike my GM Viewer which is using Google’s model-viewer web component.

This viewer is using customized loader and exporter from my repository. If there is to be any easy way of making it standalone then I will eventually post that version here as well.

EDIT: There is now a standalone version of the GLTF WebGPU viewer that can be downloaded from my [repository](https://github.com/GitHubDragonFly/GitHubDragonFly.github.io/tree/main/viewers/webgpu). It currently only offers GLTF / GLB exports by using the official three.js GLTF Exporter and it also supports drag-n-drop as well as ZIP files.

---

<div class="post-metadata">

**Author:** ![Carston\_Obrien](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/carston_obrien/32/52987_2.png) [@Carston\_Obrien](https://discourse.threejs.org/u/Carston_Obrien)\
**Post date:** [November 6, 2024, 11:14pm UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/15 "2024-11-06T23:14:38Z")

</div>

hello is anyone on today

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [November 10, 2024, 7:46pm UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/16 "2024-11-10T19:46:12Z")

</div>

I don’t really expect users to come around knocking on the door without asking some specific question related to this topic.

This topic is pretty much self-descriptive and most of the viewers are standalone with open sourced code, so all it takes is to dedicate some time to try to understand it.

---

<div class="post-metadata">

**Author:** ![Santi3D](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/santi3d/32/54201_2.png) [@Santi3D](https://discourse.threejs.org/u/Santi3D)\
**Post date:** [December 5, 2024, 11:48am UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/17 "2024-12-05T11:48:28Z")

</div>

A little bit too late probably but there is a new tool called Objectverse Converter that support .glb compression and texture conversion/compression. It uses various solutions including draco. Support KTX2, JPEG, PNG, WEBP and other image formats.

> **[3D File Converter and Compressor by Objectverse](https://converter.objectverse.io)**
>
> Optimise your 3D assets(GLB, glTF, FBX) with Objectverse Converter! Compress files without quality loss for smoother 3D websites, VR/AR, and game experiences. Try it today!

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [December 5, 2024, 4:33pm UTC](https://discourse.threejs.org/t/gltf-and-or-glb-online-optimization-and-compression/62753/18 "2024-12-05T16:33:21Z")

</div>

Yeah, finally a PAY FOR version of something users get here completely for FREE.

Right in time for this holiday season.

Not really overlooking the part that they can actually get you started for FREE.