# How to get texture file bytes embedded in GLB after loading it in the scene via GLTFLoader?

**URL:** https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569
**Category:** Questions
**Tags:** gltf-loader, textures
**Created:** [March 15, 2019, 10:10am UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569 "2019-03-15T10:10:55Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![n2k\_s2it](https://avatars.discourse-cdn.com/v4/letter/n/a8b319/32.png) [@n2k\_s2it](https://discourse.threejs.org/u/n2k_s2it)
#### Post date: [March 15, 2019, 10:10am UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/1 "2019-03-15T10:10:55Z")

</div>

Hello,

I’m trying to access textures image files that are embedded inside a GLB file.  
The model, material and texture loads successfully and is visible in the scene, but how can I access the texture image file from a material of a model in the GLB file?  
I’m accessing the `image` property of the material like this: `material.map.image`. This image has a `src` property which just contains a reference to an blob object url. And I’m unable to access the blob data via that url, it always results in file not found error.  
Please note I’m trying to get the actual image _file_ bytes, including content type and instead of just the image _data_ bytes (so drawing the texture to a canvas and reading pixel data from it wouldn’t be sufficient).

Any idea how I would get to this data?  
Maybe I could access [the gltf image data](https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#image) via the GLTFLoader and its parse function, but then I would have to re-link it to the correct reference…

---

<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: [March 15, 2019, 4:54pm UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/2 "2019-03-15T16:54:37Z")

</div>

Something like this should work:

```javascript
loader.load('model.glb', (gltf) => {
  const parser = gltf.parser;
  const bufferPromises = parser.json.images.map((imageDef) => {
    return parser.getDependency('bufferView', imageDef.bufferView));
  });
  Promise.all(bufferPromises).then((buffers) => {
    console.log(buffers); // Array<ArrayBuffer>
  });
});

```

The Blob URLs don’t work because GLTFLoader revokes them after it’s done loading to clean up resources: [https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/GLTFLoader.js#L2077](https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/GLTFLoader.js#L2077).

---

<div class="post-metadata">

### Author: ![amsi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amsi/32/11619_2.png) [@amsi](https://discourse.threejs.org/u/amsi)
#### Post date: [June 10, 2020, 5:21am UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/3 "2020-06-10T05:21:58Z")

</div>

> [@donmccurdy](#):
>
> Something like this should work:

**Thank you** @donmccurdy , this worked!!!

I was facing the exact problem and did get the issue but was not able to get the solution. Did not want to copy the image data and reencode!  
Just for information:

1. **how do we associate the image in the scene to the buffer we got here???**

2. the buffers are encoded jpeg/png data … right? (just checked … it is)  
imageDef.name for name  
imageDef.mimeType for mime type  
imageDef.bufferView for index of the buffer  
[for others facing the issue]

3. Why does the gltf loader does this i.e. revoke URI?  
How exactly does the renderer get the image data, if the image is revoked of uri?

4. will be doing

and resetting the images after getting the scene, any other way to work on it?

---

<div class="post-metadata">

### Author: ![amsi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amsi/32/11619_2.png) [@amsi](https://discourse.threejs.org/u/amsi)
#### Post date: [June 10, 2020, 5:53am UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/4 "2020-06-10T05:53:46Z")

</div>

how do we associate the image in the scene to the buffer we got here???

---

<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: [June 10, 2020, 4:23pm UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/5 "2020-06-10T16:23:34Z")

</div>

> [@amsi](#):
>
> Why does the gltf loader does this i.e. revoke URI?

Revoking the URI does not destroy the image data. Once the image has been loaded the URI is not needed, and can be cleaned up.

> how do we associate the image in the scene to the buffer we got here?

If you want a Texture to put into the scene, then you’ll have an easier time requesting that from the parser rather than an ArrayBuffer:

```javascript
console.log( parser.json.textures );
const texture = await parser.getDependency( 'texture', 0 /* textureIndex */ );

```

Or, if you have a URI from a Blob:

```javascript
const sourceURI = URL.createObjectURL( blob );
const texture = new TextureLoader().load( sourceURI );
texture.flipY = false;

```

The first example is easier, because it will configure the texture for you. Otherwise you need to set `flipY` and perhaps other settings, which require some knowledge beforehand.

---

<div class="post-metadata">

### Author: ![amsi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amsi/32/11619_2.png) [@amsi](https://discourse.threejs.org/u/amsi)
#### Post date: [June 11, 2020, 1:17am UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/6 "2020-06-11T01:17:44Z")

</div>

> [@donmccurdy](#):
>
> If you want a Texture to put into the scene, then you’ll have an easier time requesting that from the parser rather than an ArrayBuffer:

I mean i wanted the link between Texture and the encoded image(s) … getting texture using getDependency, you get a fully initialized Texture with direct link to image(s) (which only has decoded image data bites), actual encoded image is lost after parsing

so one way is to turn off revokeURL 😁, by commenting it out in GLTFImporter, so now we have aa working URI which helps in giving the relationship between texture and images and the image file data itself after the parsing.

The scene would have to be exported again and this relation ha to be maintained externally again (as images dont have uuid),

**as it is now if we export using gltf or toJSON, and if there are two textures using one image, we would eventually get two images in export one for each textures, which is an issue for here.**

---

<div class="post-metadata">

### Author: ![amsi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amsi/32/11619_2.png) [@amsi](https://discourse.threejs.org/u/amsi)
#### Post date: [June 11, 2020, 4:25am UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/7 "2020-06-11T04:25:57Z")

</div>

just an update:  
there are three images in the glt file, but when imported to a scene there are 5 different URI,  
i did check the images uri, while they are 5 different urls but the actual content of two of those are repeated.  
Also when i see the number of textures i see 3 different texture but when converted to scene there are 5, two extra (based on uuid)

 ![Screenshot 2020-06-11 at 9.49.16 AM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/f20f00751b57d4a0d231358a8672d7f4aed232b3.png)

Should i move it to a different thread?

---

<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: [June 11, 2020, 5:43am UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/8 "2020-06-11T05:43:27Z")

</div>

You’ll need to share a demo or complete code to reproduce this, I don’t know what you’re asking sorry.

---

<div class="post-metadata">

### Author: ![amsi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amsi/32/11619_2.png) [@amsi](https://discourse.threejs.org/u/amsi)
#### Post date: [June 19, 2020, 10:30am UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/9 "2020-06-19T10:30:05Z")

</div>

ok, let me see if i can make a demo  
Thanks for the help otherwise tho 🙂

---

<div class="post-metadata">

### Author: ![iamvvx](https://avatars.discourse-cdn.com/v4/letter/i/5f9b8f/32.png) [@iamvvx](https://discourse.threejs.org/u/iamvvx)
#### Post date: [February 23, 2022, 9:23am UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/10 "2022-02-23T09:23:02Z")

</div>

You solutioned this ? i am meetting the problem too。i am getting the ArrayBuffer but it can’t be as a show in website tag

---

<div class="post-metadata">

### Author: ![iamvvx](https://avatars.discourse-cdn.com/v4/letter/i/5f9b8f/32.png) [@iamvvx](https://discourse.threejs.org/u/iamvvx)
#### Post date: [February 24, 2022, 1:50am UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/11 "2022-02-24T01:50:04Z")

</div>

can glb export \*.ai file ?

---

<div class="post-metadata">

### Author: ![amsi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amsi/32/11619_2.png) [@amsi](https://discourse.threejs.org/u/amsi)
#### Post date: [February 24, 2022, 3:40am UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/12 "2022-02-24T03:40:54Z")

</div>

Its been long time i worked on the project, but i gonna start again.  
I ended up customising importer and exporter (to save) … this helps me in finer managing of image/media data, like storing them seperately also having a Uri of each image (which guessing you want to use in a image tag) …

This is the way i would do it 🙂

---

<div class="post-metadata">

### Author: ![iamvvx](https://avatars.discourse-cdn.com/v4/letter/i/5f9b8f/32.png) [@iamvvx](https://discourse.threejs.org/u/iamvvx)
#### Post date: [February 24, 2022, 3:53am UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/13 "2022-02-24T03:53:53Z")

</div>

Thank you also , The code worked!! in image tag

```
				Promise.all(bufferPromises).then((buffers) => {  
					var arrayBufferView = new Uint8Array( buffers[0]);
					var blob = new Blob( [arrayBufferView], { type: "image/png" } );
					var urlCreator = window.URL || window.webkitURL;
					var imageUrl = urlCreator.createObjectURL( blob );
					var image = document.getElementById('image');
					image.src = imageUrl;  
				});
```

---

<div class="post-metadata">

### Author: ![Cristopher\_Marcon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cristopher_marcon/32/8109_2.png) [@Cristopher\_Marcon](https://discourse.threejs.org/u/Cristopher_Marcon)
#### Post date: [August 16, 2022, 3:07pm UTC](https://discourse.threejs.org/t/how-to-get-texture-file-bytes-embedded-in-glb-after-loading-it-in-the-scene-via-gltfloader/6569/14 "2022-08-16T15:07:23Z")

</div>

Hello,  
I am trying to do something similar, when I load my model everything is fine with all materials,  
My need is to get the path || the data of all the images related to the specific material (map, normalMap, etc …), if I try this snipped I get an error and if I check that no bufferView is present inside “parser.json.images”, only

- first name
- mime type
- uri  
but without any association

I’m loading the Gltf model compressed with draco and generated with blender

Can you guys help me to get it done?  
Thanks in advice  
C
