GLTFLoader: Doesn't work in Web Worker

Description of the problem

I have been using GLTFLoader with DracoLoader to load my GLTF model and it simply doesn’t without hacks.

There are errors that I have dealt with:

• Refused to execute script from ‘blob:http://localhost/70c5a9eb-f362-41b3-a00a-fdbdfd5159c8’ because its MIME type (‘’) is not executable. Fix is next: this.workerSourceURL = URL.createObjectURL( new Blob( [ body ], { type: 'text/javascript' } ) );

• ReferenceError: document is not defined at ImageLoader.load (http://localhost/ed0f7af9865be3c65a71.worker.js:42943:15) at TextureLoader.load (http://localhost/ed0f7af9865be3c65a71.worker.js:43068:10) at http://localhost/ed0f7af9865be3c65a71.worker.js:59389:12 at new Promise (<anonymous>) Fix is next: this.textureLoader = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope ? new ImageBitmapLoader( this.options.manager ) : new TextureLoader( this.options.manager );

• Uncaught (in promise) Error: context.requestAnimationFrame is not a function at Wheel.worker.ts:69 at _onError (GLTFLoader.js:118) Fix is next: animation.setContext( window || self );

Partially related to https://github.com/mrdoob/three.js/issues/15556

Three.js version

• Dev
• r113
• …

Browser

• [] All of them
• Chrome
• Firefox
• Internet Explorer

OS

• [] All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, …)

Any device that supports https://caniuse.com/#feat=offscreencanvas I am testing on my Pixel 4XL

[stickyfingies]

Unless you are also rendering in the Web Worker, with OffscreenCanvas, in which case using GLTFLoader in the same Worker makes sense.

Specifically, serializing scene data (images, geometries, materials) from the main thread --> render thread is possible but impractically slow. Getting images across the CPU border means:

1. load GLTF model on the main thread
2. for all textures, render them to an html canvas
3. extract canvas data with getImageData()
4. transfer the image data via postMessage() to the render thread
5. finally, reconstruct the images using a DataTexture in the render thread.

Somewhere during this process, readPixels() is called to extract the texture data. On integrated GPU systems (Intel Core i7), moving this memory around isn’t a big problem. On dedicated devices, however (NVidia GTX 1650) the readPixels() operation takes orders of magnitude longer (I presume this is because texture data must pass through PCI).

In this context, being able to load .gltf models directly from a worker thread is incredibly invaluable, as there is no longer any need for this crazy image (de)serialization bullshit 😆

@donmccurdy @takahirox @mrdoob I’ll ping you in small PRs that fix references to resources not available in Web Workers, e.g. window → self.

[takahirox]

In addition to them, I think the following line in .loadTexture() can cause an error because of no window in workers.

var URL = window.URL || window.webkitURL;