Get texture source from GLB files


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.

Basically I need exactly what you have in the inspector

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



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!

1 Like

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?

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

If you use a canvas it’s easy:

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

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.

Ah thanks, stupid me, I did this instead: = size.width + "px"; = size.height + "px";


you have to do both :slight_smile:

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