Access image data when texture is loaded

Questions
,
1

Hi everyone, I am strugulling to access the image data once the texture is loaded.
I have explored the call stack for a long time and found the img variable I need to access in the fileTool.ts but I can’t find a way to add an observer or a callback to retrive this object.
Can someone help please ?
Here is a simple example of what I want.

PS: The goal is to benefit from the image data; I don’t want to fetch it again to access it because it’s causing performance issues in my app.

Thanks by advance.

2

Hello :slight_smile:

By image data do you mean pixels ?

(I changed the path since CORS issue)

3

Here is another example which returns IMG - https://playground.babylonjs.com/#0AM2NX#55

Most of the times fetched recources are in browser cache, so fetching them again is very fast usually.

4

Hi Tricotou, thanks for your answer; no in fact I need the original fetch response from the server or the complete image; I want to read the exifr data in the header of the png which contain useful informations

const fileResponse = await fetch(encodeURI(fileUrl));
const buffer = new Uint8Array(await fileResponse.arrayBuffer());

Hi Labris, thanks for your anwser; yes it’s very fast because they are in cache but if it can be done only 1 time it’s better as the number of images to load can be big.
Your exemple is closer than want I want to do but this uses a glb file. I’m not sure how to adapt this to load a texture.

5

How images are loaded in the beginning? Are they in GLB files or somewhere else?

6

They are simple png containing size and position informations;
I load them by giving the url to the texture.
I tried to mix your suggestions but the texture._buffer which contains the exifr informations in the Labris’s example is null is my case.

7

The image is created from pixel data, so there will be no exif information from the original image.

But if you already have original PNGs, I believe you don’t need to use readPixels which is CPU perf consuming. Just extract all needed information from PNGs at the moment of texture creation and store as texture.metadata for later use.

8

yes but I don’t know where to branch my code in the texture constructor

9

One of possible ways - https://playground.babylonjs.com/#G42D4P#2

10

thanks for your answer, I give up on that, internally that’s what Babylon does when you give a buffer or an image element so you always end up making 2 requests.
I can’t find a way to make [creating the texture using the url and requesting the metadata from a separate file] slower [than fetching the data, extracting the exifr and instantiating the texture with a blob url].
So I’ll keep my data in a separate file (which seemed counterintuitive at first)