Three JS Loaders don't work with Service Worker Cache

Hello again,

I am almost finished my 3rd revision of my Three.js Earthquake Visualizer. A large part of the 3rd revision is making it work offline since it is a Progressive Web App and will be in the play store.

I have implemented Server Side rendering of my JSON and Three.js Buffer Objects… I then store them with IndexedDB on the front end. So the 3D Objects are covered. My css and js chunks are cached and work offline.

Problem:
However, my Three.js textures do not work offline. I believe this is because the loaders use XHR requests for the progress API callbacks. That’s great and all but I really need a Fetch implementation because my assumption is my fetch service worker listener isn’t executed with XHR requests that the Threejs Loaders use. This is a major feature here that is being overlooked… or I simply don’t understand the implementation.

Here is an example of how I am loading the textures in my React Component. My understanding is that if these loaders used Fetch instead of xhr under the hood then my service worker would trigger the loading from the cache.

Um, the problem is that THREE.TextureLoader internally uses THREE.ImageLoader which uses HTML5 image API in order to load images. So there is actually no XHR call.

However, you can try to use THREE.ImageBitmapLoader instead since this loader actually uses the fetch API in order to load images from the backend. Notice that you have to manually create an instance of CanvasTexture in order to use the image bitmap as a texture. The workflow should be explained in the docs and in the following example:

https://threejs.org/examples/#webgl_loader_imagebitmap

Awesome! I will definitely give this a try this weekend. Thanks Mugen.

Mugen you’ve gone and flipped my world! xD

It looks like the imageBitmap loader inverts the world texture… I did some research this time though!

Found you over here: https://github.com/mrdoob/three.js/issues/15896

I guess what I’m wondering is that this was reffed in r102 and I’m using r106.2 so I was thinking this version would have it fixed? I’m using the npm module on chrome win64.

Have you done this before loading the texture via ImageBitmapLoader?

loader.setOptions( { imageOrientation: 'flipY' } );
2 Likes

First time using the bitmapLoader…

image

Thanks Mike!

2 Likes

Okay so I’ve gone and deployed to production for testing the service worker.

I’m curious if you had some thoughts as to why it wouldn’t be working - the SW cache that is.

Do you think this is an issue with Three.js and Service Worker functionality or non three related?

It loads from cache here in the initial splash page

When I go to see the viz though it fails and my backup error handler appears.