# Using webp with gltf

**URL:** <https://forum.babylonjs.com/t/using-webp-with-gltf/12732>\
**Category:** Questions\
**Created:** [July 22, 2020, 7:40am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732 "2020-07-22T07:40:48Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![samevision](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@samevision](https://forum.babylonjs.com/u/samevision)\
**Post date:** [July 22, 2020, 7:40am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/1 "2020-07-22T07:40:48Z")

</div>

Hello guys,

since we are using web3D file size is always an important point to consider. I had in mind to use webp files as textures instead of jpg and png. I am glad that gltf does already support webp with an extension ([glTF/extensions/2.0/Vendor/EXT\_texture\_webp at master · KhronosGroup/glTF · GitHub](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_texture_webp)).

Unfortunately babylon throws an error: **Require extension EXT\_texture\_webp is not available**

It seems that this extension isn’t supported yet ([Extensions - Babylon.js Documentation](https://doc.babylonjs.com/api/modules/babylon.gltf2.loader.extensions)).

Is anyone willing either to implement it or to explain how to do it?

I appreciate your help very much!

Best

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [July 22, 2020, 10:46am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/2 "2020-07-22T10:46:09Z")

</div>

I am pretty sure I am using webp, the format of one frame of VP8 codec, for my video capture work flow. It only works on Chrome. Have you tried it on that browser?

FYI, extensions have to be supported at the browser level and higher. Not something doable at applications level. I saw that Safari has started to support it. Think you should re-think your plans.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [July 22, 2020, 11:14am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/3 "2020-07-22T11:14:44Z")

</div>

I didn’t even know that this image format existed…

It seems the native browser support is not that bad:

- [WebP - Wikipedia](https://en.wikipedia.org/wiki/WebP#Support)
- [Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#search=webp)

Only Safari is lacking, support is coming with iOS 14.

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [July 22, 2020, 11:20am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/4 "2020-07-22T11:20:54Z")

</div>

Correction, this is not a Webgl extension, but gltf, so yes it is implemented below the browser level. Unless it is easily searched on how to convert to a 2 dimension array of values, it might be challenging.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [July 22, 2020, 11:23am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/5 "2020-07-22T11:23:33Z")

</div>

I would say to just rely on the browser support, and if not raise an error if the extension is tagged “required”: it would make for an easy implementation and would still provide support for the major browsers.

---

<div class="post-metadata">

**Author:** ![samevision](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@samevision](https://forum.babylonjs.com/u/samevision)\
**Post date:** [July 22, 2020, 12:01pm UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/6 "2020-07-22T12:01:32Z")

</div>

Yes, meanwhile webp is supported by most browser at newest version and Safari will follow soon. The compression is massive wherefore I would love to use it with babylon.

The gltf extension I mentioned above allows to load the webp if the browser supports it and if not it uses a fallback to load the jpg or png.

Cesium integrated it last year: [Faster and Smaller 3D Tiles with WebP Image Compression | cesium.com](https://cesium.com/blog/2019/02/12/faster-3d-tiles-streaming-webp/)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 22, 2020, 2:22pm UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/7 "2020-07-22T14:22:18Z")

</div>

Pinging @bghgary as this seems a great plugin to add

---

<div class="post-metadata">

**Author:** ![samevision](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@samevision](https://forum.babylonjs.com/u/samevision)\
**Post date:** [July 26, 2020, 7:19am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/8 "2020-07-26T07:19:57Z")

</div>

I created a feature request on git:

> <https://github.com/BabylonJS/Babylon.js/issues/8614>
>
> Since we are using 3D in web, the smaller the file size the better. Unfortunately 2k, 4k, 8k textures are very...

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 29, 2020, 8:49pm UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/9 "2020-07-29T20:49:42Z")

</div>

I can tackle it but I’ll need a glb to test

---

<div class="post-metadata">

**Author:** ![samevision](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@samevision](https://forum.babylonjs.com/u/samevision)\
**Post date:** [July 30, 2020, 7:39am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/10 "2020-07-30T07:39:17Z")

</div>

Sounds good. Thank you!

I wasn’t able to create a glb but a gltf with seperated textures: [Gofile](https://gofile.io/d/PpzOjP)  
The webp texture is different from the png one in this case.

I wasn’t able to test it because I can’t find a gltf viewer that supports this extension.

I hope this helps.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [December 28, 2022, 5:23pm UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/11 "2022-12-28T17:23:26Z")

</div>

Full Necro: Is this implemented?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [December 29, 2022, 10:10am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/12 "2022-12-29T10:10:04Z")

</div>

Yes, webp support has been added in the file loader, so it’s available for regular textures and in gltf/glb files.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [December 29, 2022, 4:07pm UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/13 "2022-12-29T16:07:32Z")

</div>

Cool because Im talking to @MackeyK24 about adding support to the Unity Toolkit. One of my coworkers showed we the compression savings with webp and I got excited.

---

<div class="post-metadata">

**Author:** ![amobi](https://avatars.discourse-cdn.com/v4/letter/a/7cd45c/32.png) [@amobi](https://forum.babylonjs.com/u/amobi)\
**Post date:** [August 7, 2023, 5:31am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/14 "2023-08-07T05:31:35Z")

</div>

Please tell me, is auto-selection of textures possible? If it does not support webp, then download png, do not download all textures at once.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [August 7, 2023, 9:03am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/15 "2023-08-07T09:03:37Z")

</div>

If you are using glTF files, yes, webp support is an extension, so if it’s not availalbe it will fall back to a default texture (if you provided one!).

---

<div class="post-metadata">

**Author:** ![amobi](https://avatars.discourse-cdn.com/v4/letter/a/7cd45c/32.png) [@amobi](https://forum.babylonjs.com/u/amobi)\
**Post date:** [August 7, 2023, 10:21am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/16 "2023-08-07T10:21:05Z")

</div>

Webp is working. For some reason both web and png files are loaded from the server together. I would like to download only webp if the browser supports it.

```auto
"textures": [
    {
        "source": 0,
        "extensions": {
            "EXT_texture_webp": {
                "source": 1
            }
        }
    }
],
"images": [
    {
        "uri": "image.png"
    },
    {
        "uri": "image.webp"
    }
]

```

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [August 7, 2023, 11:03am UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/17 "2023-08-07T11:03:00Z")

</div>

cc @bghgary, I don’t know if it’s the expected behavior of the loader.

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [August 14, 2023, 8:42pm UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/18 "2023-08-14T20:42:31Z")

</div>

Sorry, was on vacation. That is certainly not the expected behavior. Do you have an example glTF I can test?

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [August 14, 2023, 8:49pm UTC](https://forum.babylonjs.com/t/using-webp-with-gltf/12732/19 "2023-08-14T20:49:33Z")

</div>

I don’t see this happening in this playground: [https://playground.babylonjs.com/#LSAUH2#2](https://playground.babylonjs.com/#LSAUH2#2). @amobi If you can provide a repro, I will investigate.
