fileTools: why LoadImage loads the image as blob

In function noOfflineSupport, which is the default branch, instead of directly setting img.src, it requested the url and converted to blob, and converted to blob url, and loaded into img.src.

This could lead to at most 3x memory usage before gc kick in, the memory usage could include the requested response, the blob, and img.src, making it against memory optimizations espacially on low-end devices, like a mobile phone.

So here are the questions:

  1. Why doing this?
  2. Could there be a method or option to disable this?
  3. If this is for doing retry, could it just retry using error event?
loadImageWithRetry by gpt
function loadImageWithRetry(src, maxRetries, delay) {
  let retries = 0;

  function load() {
    const img = new Image();

    img.onload = function () {
      // Image loaded successfully.
      console.log('Image loaded successfully');
    };

    img.onerror = function () {
      // Image failed to load.
      retries++;

      if (retries < maxRetries) {
        // Retry loading the image after a delay.
        console.log(`Retry ${retries} of ${maxRetries}`);
        setTimeout(load, delay);
      } else {
        console.error(`Failed to load image after ${maxRetries} retries`);
      }
    };

    img.src = src;
  }

  // Start loading the image.
  load();
}

// Usage
const imageUrl = 'https://example.com/your-image.jpg';
const maxRetries = 3; // Maximum number of retry attempts
const retryDelay = 1000; // Delay in milliseconds between retries

loadImageWithRetry(imageUrl, maxRetries, retryDelay);

cc @sebavan, I’m not sure why we don’t use image.src = url directly, but this path is a special path when using an offline provider and when enableTexturesOffline is enabled.

cc @carolhmj and @RaananW who updated this part I believe as they might have more background on it

The reason behind it was to allow custom WebRequests to work correctly when loading an image:

Use LoadFile when loading images so that WebRequest custom headers ar… by carolhmj · Pull Request #12891 · BabylonJS/Babylon.js (github.com)

2 Likes

So how can users opt-out this for memory?

we could check if there are any webrequest modifiers and only do that in this case. I guess this could be a viable solution

If it improves memory usage, I am all in !!! can you do the PR @RaananW ?

yeah, on my list for today

you are the best !!!

Use LoadFile only if needed by RaananW · Pull Request #14340 · BabylonJS/Babylon.js (github.com)

3 Likes