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

textures
gltf-loader

#1

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 via the GLTFLoader and its parse function, but then I would have to re-link it to the correct reference…


#2

Something like this should work:

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.