Loading textures in Three.js with XHR progress events - three.js

Question

The current build of Three.js (R84) uses image tags to load textures, which do not support onProgress events. I can reason how many files have loaded, but cannot expose granular information about bytes loaded.
What is the best way to load a texture with onProgress event support? I would like to support a wide range of mobile clients, but legacy desktop support is not a concern.

Answer 1

One solution is to load the file via FileLoader first, then load from the cache with a TextureLoader. In-memory caching means the file is only loaded once, even if it doesn't get cache headers from the server.
The result is that we get progress events via FileLoader's initial AJAX fetch, but can still exploit all the useful behaviour of the proper TextureLoader (such as disabling alpha channels for JPEG textures, and other optimisations).
/**
* Loads THREE Textures with progress events
* #augments THREE.TextureLoader
*/
function AjaxTextureLoader() {
/**
* Three's texture loader doesn't support onProgress events, because it uses image tags under the hood.
*
* A relatively simple workaround is to AJAX the file into the cache with a FileLoader, create an image from the Blob,
* then extract that into a texture with a separate TextureLoader call.
*
* The cache is in memory, so this will work even if the server doesn't return a cache-control header.
*/
const cache = THREE.Cache;
// Turn on shared caching for FileLoader, ImageLoader and TextureLoader
cache.enabled = true;
const textureLoader = new THREE.TextureLoader();
const fileLoader = new THREE.FileLoader();
fileLoader.setResponseType('blob');
function load(url, onLoad, onProgress, onError) {
fileLoader.load(url, cacheImage, onProgress, onError);
/**
* The cache is currently storing a Blob, but we need to cast it to an Image
* or else it won't work as a texture. TextureLoader won't do this automatically.
*/
function cacheImage(blob) {
// ObjectURLs should be released as soon as is safe, to free memory
const objUrl = URL.createObjectURL(blob);
const image = document.createElementNS('http://www.w3.org/1999/xhtml', 'img');
image.onload = ()=> {
cache.add(url, image);
URL.revokeObjectURL(objUrl);
document.body.removeChild(image);
loadImageAsTexture();
};
image.src = objUrl;
image.style.visibility = 'hidden';
document.body.appendChild(image);
}
function loadImageAsTexture() {
textureLoader.load(url, onLoad, ()=> {}, onError);
}
}
return Object.assign({}, textureLoader, {load});
}
module.exports = AjaxTextureLoader;