Cannot find variable: ImageBitmap

[chalupagrande]

Description of the problem

When loading a texture (or image) using THREE.TextureLoader on iOS Safari or iOS Chrome, I get the error "Cannot find variable ImageBitmap"

Hack Solution

Before loading the texture:
window.ImageBitmap = window.ImageBitmap || function () { return null }

Three.js version

• Dev
• r102

Browser

• All of them
• Chrome
• Firefox (did not test)
• Safari
• Internet Explorer

OS

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

[mrdoob]

Is that a runtime error and the whole thing stops or a warning in the console?

[chalupagrande]

@mrdoob - Runtime ( i suppose)
I am using the Device Orientation Controls, and it only throws the error when I look at the object that is loading the texture...

[tonygentilcore]

Just bumped into this on v102 as well (it affects Safari on OSX too). v101 works fine.

[Mugen87]

Can you please share the line of code where the runtime error occurs? THREE.TextureLoader and THREE.ImageLoader do not use ImageBitmap at all.

Just bumped into this on v102 as well (it affects Safari on OSX too). v101 works fine.

Can you please share a live demo that demonstrates this issue? I've tested with Safari on macOS (10.14.3) with some examples but I was not able to reproduce.

[tonygentilcore]

Sure, here's a repro: https://codepen.io/tonygentilcore/pen/EMyKZM?editors=0010

The line const texture = new THREE.TextureLoader().load(eyeData) (where eyeData is data:image/jpg;base64,<<ELIDED>>) crashes safari with:

ReferenceError: Can't find variable: ImageBitmap

Again, chrome works fine and it works fine in Safari if the external script in settings is changed from //cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js to //cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js.

[WestLangley]

ImageBitmap has limited support according to https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap.

This regression appears to have been introduced in #15805.

[chalupagrande]

Yes!! Line 33 of #15805. That's the line I was trying to find to reference but couldn't.

[Mugen87]

It seems the PR changed the order of tests in the related if statement for no reasons (/cc @merwaaan). This should be easy to fix.

[merwaaan]

@Mugen87 the order is actually important. It was changed so that types not available in web workers are evaluated last (HTMLImageElement, HTMLCanvasElement).

Reverting the order would break this in web worker.

Would using typeof(Type) === "undefined" instead of instanceof fix both issues?

[Mugen87]

I see but the current order breaks the code in Safari. I've added now the typeof statement to all tests as suggested so the if statement works in all environments.