# GLTF image texture imported into three.js uses different color space than in Blender

**URL:** <https://discourse.threejs.org/t/gltf-image-texture-imported-into-three-js-uses-different-color-space-than-in-blender/42710>\
**Category:** Questions\
**Tags:** gltf-loader, blender, blender-exporter, gltf, textures\
**Created:** [September 20, 2022, 1:41am UTC](https://discourse.threejs.org/t/gltf-image-texture-imported-into-three-js-uses-different-color-space-than-in-blender/42710 "2022-09-20T01:41:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![toilet\_boy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toilet_boy/32/29644_2.png) [@toilet\_boy](https://discourse.threejs.org/u/toilet_boy)\
**Post date:** [September 20, 2022, 1:41am UTC](https://discourse.threejs.org/t/gltf-image-texture-imported-into-three-js-uses-different-color-space-than-in-blender/42710/1 "2022-09-20T01:41:28Z")

</div>

I’m trying to import this shirt model from Blender into my three.js code as a gltf:  
 ![blender](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/9/9941536e034278cd0e422cebd763c8f70d0b4eca.png)

However, when it shows up on my site, the image texture that’s overlayed on the center of the shirt appears different than it does in Blender:  
 ![website](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/6/16dae2a9981adb47129d9c8a2846d9d39601bd8d.png)

The transparency from the original image texture is lost and is replaced with flat blue and white. Is this a problem with my three.js code or with my Blender/export settings?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [September 20, 2022, 2:44am UTC](https://discourse.threejs.org/t/gltf-image-texture-imported-into-three-js-uses-different-color-space-than-in-blender/42710/2 "2022-09-20T02:44:45Z")

</div>

Hi!

> Is this a problem with my three.js code or with my Blender/export settings?

We can neither see your three.js code, nor your Blender file — please share those if you have questions about them. I would suggest opening the glTF file in online viewers first. That will tell you whether your code has anything to do with it:

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

---

<div class="post-metadata">

**Author:** ![toilet\_boy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toilet_boy/32/29644_2.png) [@toilet\_boy](https://discourse.threejs.org/u/toilet_boy)\
**Post date:** [September 20, 2022, 4:50am UTC](https://discourse.threejs.org/t/gltf-image-texture-imported-into-three-js-uses-different-color-space-than-in-blender/42710/3 "2022-09-20T04:50:38Z")

</div>

Thanks for the reply! I’m gonna try uploading it to a viewer and I’ll reply with my three.js code and Blender settings in a little while.

---

<div class="post-metadata">

**Author:** ![toilet\_boy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toilet_boy/32/29644_2.png) [@toilet\_boy](https://discourse.threejs.org/u/toilet_boy)\
**Post date:** [September 20, 2022, 5:54am UTC](https://discourse.threejs.org/t/gltf-image-texture-imported-into-three-js-uses-different-color-space-than-in-blender/42710/4 "2022-09-20T05:54:44Z")

</div>

So, I tried uploading it to babylon.js, and got this:

 ![babylon](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/e/ee8e2a3d5a33ade53066df883f2e99ce7582104b.jpeg)

These are the properties of the image according to babylon:

 ![babylonSettings](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/1/1108e711d12c0736c09b90edab3fdde905866dc9.png)

According to these properties, the image doesn’t have any alpha, even though its a transparent PNG which has a functioning alpha value in Blender:

 ![blender2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/a/9a1a868c18e0847d804c7e51c9c489f2d48b8cdb.png)

So I assume the problem lies within how the image is being exported in the glTF, not with my three.js code. Do you know what could be causing this? Thanks again.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [September 20, 2022, 12:37pm UTC](https://discourse.threejs.org/t/gltf-image-texture-imported-into-three-js-uses-different-color-space-than-in-blender/42710/5 "2022-09-20T12:37:29Z")

</div>

The “Mix” node above is not going to export, you’ll need to bake the texture so that it can be connected directly to the “Base Color” socket. Most of Blender’s nodes cannot be exported to any format. I’d refer to the [Blender glTF addon documentation](https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html) for examples of supported node graph setups.

---

<div class="post-metadata">

**Author:** ![toilet\_boy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toilet_boy/32/29644_2.png) [@toilet\_boy](https://discourse.threejs.org/u/toilet_boy)\
**Post date:** [September 21, 2022, 3:03am UTC](https://discourse.threejs.org/t/gltf-image-texture-imported-into-three-js-uses-different-color-space-than-in-blender/42710/6 "2022-09-21T03:03:46Z")

</div>

This worked. Thank you so much!

---

<div class="post-metadata">

**Author:** ![HappyTorso](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/happytorso/32/30050_2.png) [@HappyTorso](https://discourse.threejs.org/u/HappyTorso)\
**Post date:** [October 6, 2022, 8:26am UTC](https://discourse.threejs.org/t/gltf-image-texture-imported-into-three-js-uses-different-color-space-than-in-blender/42710/7 "2022-10-06T08:26:15Z")

</div>

Hi @donmccurdy, the latest Blender glTF addon documentation is for Blender 2.80.  
Has the workflow remained unchanged in subsequent versions?  
Cheers

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [October 6, 2022, 2:39pm UTC](https://discourse.threejs.org/t/gltf-image-texture-imported-into-three-js-uses-different-color-space-than-in-blender/42710/8 "2022-10-06T14:39:23Z")

</div>

Newer documentation is available, there’s a dropdown in the lower left hand corner of the Blender docs to select a version:

 ![Screen Shot 2022-10-06 at 9.39.05 AM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/5/359f354eb1abc9e3b5b6e50882fb6cfceb4aeb81.jpeg)

Here’s a link for latest stable docs —

[https://docs.blender.org/manual/en/latest/addons/import\_export/scene\_gltf2.html](https://docs.blender.org/manual/en/latest/addons/import_export/scene_gltf2.html)

---

<div class="post-metadata">

**Author:** ![HappyTorso](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/happytorso/32/30050_2.png) [@HappyTorso](https://discourse.threejs.org/u/HappyTorso)\
**Post date:** [October 6, 2022, 3:17pm UTC](https://discourse.threejs.org/t/gltf-image-texture-imported-into-three-js-uses-different-color-space-than-in-blender/42710/9 "2022-10-06T15:17:38Z")

</div>

That’s great! Thank you. I wasn’t aware of the existence of a parallel “/latest” manual.  
Bookmarked.