Three.js: Basis textures working intermittently on Safari

[igghera]

Description of the problem

While testing the official example for the BasisTextureLoader on my devices (iPhone X, MacBook Pro 16) I noticed that sometimes the texture did not appear and the cube remained white.

At first I thought of a network error or similar, so I started digging.

• No error happens on the Network, no error in the console.
• The loading progress is logged in the console and it's ok.

I have uploaded a screen capture of the whole thing here.

The link to the official example is this: https://threejs.org/examples/?q=basis#webgl_loader_texture_basis

Not sure if it helps, but these guys here use the .basis format in this demo and that seems to work fine on Safari even after 50 page reloads: https://demo.shapespark.com/naniby-apartment-basis/
Maybe it's just a bug that has been introduced in a recent version?

I really hope so :) I've just discovered the basis format and I'm looking forward to using it into my projects.

I'll try to go through the source code of the BasisTextureLoader myself and see if I can debug it. Being intermittent makes it really hard.

Thanks for the great work to everyone!

Three.js version

• [ ] Dev
• [x] r117
• [ ] ...

Browser

• [x] Safari
• [x] iOS Safari

OS

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

[mrdoob]

It may be worth reporting the issue to basis directly:
https://github.com/BinomialLLC/basis_universal

[igghera]

I thought about it, then I went to their examples page and I could not reproduce the bug even after refreshing the page 100 times, hence I thought it could be an issue with the three.js loader.

But I'm not sure whether my logic makes sense or not.

The thing that baffles me the most is this one:

Not sure if it helps, but these guys here use the .basis format in this demo and that seems to work fine on Safari even after 50 page reloads: https://demo.shapespark.com/naniby-apartment-basis/

If their version works fine, what is the difference there? The version of three.js?
Although if I log THREE.revision it says "71" and I don't understand how that's possible.

Anyhow, @mrdoob if you think it makes sense I can open an issue on basis' repo

[JordyvanDortmont]

We're currently having an issue with loading our own recently compressed basis textures as well. Our (probably separate) issue occurs on Chromebooks Google Chrome OS, Version 83.0.4103.119. The basis texture does not load anymore and loading the same basis texture worked on a previous Chrome OS build.

This is relevant, because we discovered that the three.js example loads a basis texture that hasn't been re-compressed since June 2019. The basis texture example still works for the Chrome OS build that does not load our recently compressed basis texture. It might be a good idea to re-compress the basis texture of the example and check if it works consistently for Safari.

[igghera]

@JordyvanDortmont I don't have any machine to run Chrome OS, but I'd be curious to see if the issue with Safari happens with your textures, both the recently compressed and the old ones.

I have looked into the three.js BasisTextureLoader but I have no idea how to solve the problem. It doesn't throw an error, it only happens sometimes... I'm stuck.

Out of curiosity, do you guys use any special parameter when using the basis universal codec? I simply run basisu image.jpg with no special inputs

[JordyvanDortmont]

Out of curiosity, do you guys use any special parameter when using the basis universal codec? I simply run basisu image.jpg with no special inputs

@igghera it might be the mipmaps! Maybe you can try basisu -mipmap image.jpg.

[JohannesDeml]

@JordyvanDortmont @igghera I'm using basis textures with mipmaps which are created with version 1.12 (latest version as of now). I didn't find the described problems. Tested on Chrom+Firefox on Windows and Safari on iOS. Here is a simple example scene with the latest threejs version: https://rawcdn.githack.com/JohannesDeml/three.js/2ac64131c77a82a86b0726845e5d83450b2f7898/examples/webgl_loader_gltf_basis.html
Can you reproduce your problem in this minimal setup?

Edit: Changed the link to the fixed version that should also work in Chrome.

[donmccurdy]

^This example is working consistently in Safari 13.1.1 on macOS 10.15.5 for me.

[JordyvanDortmont]

Can confirm this works consistently on Safari on iOS 12.4.6 @JohannesDeml.

@igghera the issue that the textures only load intermittently and the cube remains white also occurs on Windows 10 Chrome for this example. Although I can't reproduce it on my own device. Maybe it has something to do with https://github.com/mrdoob/three.js/pull/19541?

The example of @JohannesDeml turns black on Windows 10 Chrome, because of the ImageBitmapLoader bug that was fixed in r118.3 (https://github.com/mrdoob/three.js/pull/19738).

[JohannesDeml]

The example of @JohannesDeml turns black on Windows 10 Chrome, because of the ImageBitmapLoader bug that was fixed in r118.3 (#19738).

Oh, you're right, I posted the link I used for the bug report, here is the new one that works in chrome as well: https://rawcdn.githack.com/JohannesDeml/three.js/2ac64131c77a82a86b0726845e5d83450b2f7898/examples/webgl_loader_gltf_basis.html

[JordyvanDortmont]

Alright that works on Windows 10 Chrome! Thanks for updating your example. I checked our example again and the issue was that we didn't use the rawcdn, so I fixed the link in my previous comment.

[JordyvanDortmont]

Update on the issue I mentioned here https://github.com/mrdoob/three.js/issues/19717#issuecomment-648806402:
https://bugs.chromium.org/p/chromium/issues/detail?id=1100834

[wrr]

https://demo.shapespark.com/naniby-apartment-basis/

We had a similar problem on Safari with a code that runs this demo. We've managed to figure out that workers on Safari were for some reason breaking: post messages from workers were sent, but did not reach the main thread. We haven't managed to figure out what is causing this and added a workaround to disable decoding in workers on Safari. Our code doesn't use examples/jsm/loaders/BasisTextureLoader.js, but because this loader also uses workers, this can be the same issue.