# Get texture source from GLB files

**URL:** <https://forum.babylonjs.com/t/get-texture-source-from-glb-files/12575>\
**Category:** Questions\
**Created:** [July 17, 2020, 6:19am UTC](https://forum.babylonjs.com/t/get-texture-source-from-glb-files/12575 "2020-07-17T06:19:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [July 17, 2020, 6:19am UTC](https://forum.babylonjs.com/t/get-texture-source-from-glb-files/12575/1 "2020-07-17T06:19:15Z")

</div>

Hi.

I am loading GLB into the scene, and I have modal in the app that contains the list of the textures in the scene. Same as you have in your inspector tool, under textures tab.

So I need to get images/textures and populate the previewImageContainer (green container), with those textures. So the user can see the texture preview there.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/a/a1bac870f6be792488d2a9babd625b30fce62103.png)

Basically I need exactly what you have in the inspector

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/3035c2ef751c3b13388ef6ccce695cb192f6722b.jpeg)

Of course. I noticed that you are using “canvas” element there. Should I use canvas? I would like to use “img” element if possible.

I kinda get textures urls but I don’t know what to do with them, as I cannot set them as source of the image.  
This is what I get from the textures src property

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/1/1bdf203910ab7927a33ce71a966988246a58f805.png)

Thanks

---

<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 17, 2020, 3:27pm UTC](https://forum.babylonjs.com/t/get-texture-source-from-glb-files/12575/2 "2020-07-17T15:27:01Z")

</div>

I’m not sure you can use `img` because you need to provide a value for the `src` property: you can create a temporary url with `URL.createObjectURL(blob)`, so it ends up being able to create `blob` given an ArrayBuffer (what you get when doing `texture.readPixels()`).

However, I don’t know how to create a blob representing a picture given a raw array of r/g/b/a bytes… I don’t think a mime type exists that would match a rgba array of data, in which case you would do: `img.src = URL.createObjectURL(new Blob([texture.readPixels().buffer], { type: "mimetype" }))`.

If you can convert the raw data to png, you can do: `img.src = URL.createObjectURL(new Blob([dataPng], { type: "image/png" }))`.

`canvas` allows you to create a png data url easily ( `canvas.toDataURL("image/png");`), but if you use a canvas in the first place, you don’t need to do all that, just display the canvas!

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [July 28, 2020, 12:17pm UTC](https://forum.babylonjs.com/t/get-texture-source-from-glb-files/12575/3 "2020-07-28T12:17:18Z")

</div>

I just started working on this. I am not sure I figured it out properly though. Not sure how I render blob on canvas? I used this

URL.createObjectURL(new Blob([texture.readPixels().buffer])) which gives me a string

Did I understand this correct? I need to create a blob and then draw it on canvas?

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [July 28, 2020, 12:21pm UTC](https://forum.babylonjs.com/t/get-texture-source-from-glb-files/12575/4 "2020-07-28T12:21:25Z")

</div>

basically the question is, how do you draw texture image from glb file onto canvas in inspector?

---

<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 28, 2020, 2:34pm UTC](https://forum.babylonjs.com/t/get-texture-source-from-glb-files/12575/5 "2020-07-28T14:34:26Z")

</div>

If you use a canvas it’s easy:

[https://playground.babylonjs.com/#0AM2NX](https://playground.babylonjs.com/#0AM2NX)

However, in the end the canvas is 300x150 whereas it should be 512x512 and I don’t understand why. If someone has a clue…

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [July 28, 2020, 3:45pm UTC](https://forum.babylonjs.com/t/get-texture-source-from-glb-files/12575/6 "2020-07-28T15:45:24Z")

</div>

Thank you so much. This helps a lot. As for your question, canvas default size is 300x150. When setting with and height in ImageData you define size for image drawn inside the canvas (and canvas is by default 300x150, basically the rest of the image get cut off). You need to set size of the canvas element separately.

[https://playground.babylonjs.com/#0AM2NX#1](https://playground.babylonjs.com/#0AM2NX#1)

---

<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 28, 2020, 4:39pm UTC](https://forum.babylonjs.com/t/get-texture-source-from-glb-files/12575/7 "2020-07-28T16:39:51Z")

</div>

Ah thanks, stupid me, I did this instead:

```javascript
canvas2.style.width = size.width + "px";
canvas2.style.height = size.height + "px";

```

!

---

<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 28, 2020, 4:40pm UTC](https://forum.babylonjs.com/t/get-texture-source-from-glb-files/12575/8 "2020-07-28T16:40:30Z")

</div>

you have to do both 🙂

---

<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 28, 2020, 5:05pm UTC](https://forum.babylonjs.com/t/get-texture-source-from-glb-files/12575/9 "2020-07-28T17:05:56Z")

</div>

Hum, my code is commented in the PG from @nogalo and it does work.