Three.js: FBX Loader example silently fails on iOS 9.3 (latest for iOS 9)

[benguild]

Description of the problem

Self-explanatory based on title. This is a fairly dated iOS version at this point, but the FBX example silently fails to load: https://threejs.org/examples/webgl_loader_fbx.html _(just doesn't do anything... no errors reported)_

There's no issue with the OBJ loader, or other examples, though: https://threejs.org/examples/webgl_loader_obj.html

Three.js version

• [ ] Dev
• [x] r94
• [ ] ...

Browser

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

OS

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

Hardware Requirements (graphics card, VR Device, ...)

Tested on iOS Simulator, can also test on a real device as I have an iPhone 4s lying around here somewhere. _(but there's probably no difference)_

[Mugen87]

(but there's probably no difference)

Please perform a test on the real device. Simulators and real devices are not always comparable, especially in context of GPU related code.

[benguild]

Just checked. It's the same ... nothing loaded. Usually the Simulator does work, it's just slower since it's not native.

[Mugen87]

Thanks for testing. Can you please perform a test with a different browser than Safari?

BTW: I'm not able to reproduce the issue on an Android smartphone (Pixel).

[benguild]

I'm not able to reproduce this issue on any other hardware/Simulators that I have access to at the moment. It works fine in the iOS 10 and 11 Simulators, and on native hardware running those iOS versions as well. However, both the Simulator and native hardware running iOS 9[.3] exhibit this issue and return nothing in the console as to why it's not working.

Therefore, as far as I know, there's an incompatibility with iOS 9[.3] only, and it's on the software level. All other third-party browsers on iOS are required to use the same WebKit rendering that the OS provides, which is what Safari uses, so testing in another browser is unnecessary in this case unless another browser somehow implements its own WebGL extension... which would be unusual. — This issue is about Safari (the default) and all other typical browsers, and not those instances/exceptions.

To reproduce, download Xcode from the Mac App Store, install the iOS 9.3 Simulator from Preferences (normally it only bundles the latest iOS release), and then open that example on the iOS Simulator's version of Safari.

As mentioned, the OBJ and other loaders work fine. It's just the FBX loader and/or its dependencies that are exhibiting this issue.

[Mugen87]

Does this example work? https://threejs.org/examples/#webgl_animation_skinning_morph

The FBXLoader example is animated whereas the OBJLoader examples are static.

[benguild]

Yeah, that works fine. (animated + static both work)

[Mugen87]

All other third-party browsers on iOS are required to use the same WebKit rendering that the OS provides, which is what Safari uses, so testing in another browser is unnecessary in this case unless another browser somehow implements its own WebGL extension... which would be unusual.

Can you still make a test with Chrome, please? Just to be sure 😇

[benguild]

I don't have access to the App Store on that device at the moment, unfortunately. However, since this is an issue with Safari on iOS 9.3 specifically (typical use), if you'd prefer to scope the issue to be about iOS 9.3 Safari instead of that entire iOS release, I guess we could and if the workaround trickles down into fixing all of the other instances as well, that'd be a bonus.

[RemusMar]

testing in another browser is unnecessary in this case unless another browser somehow implements its own WebGL extension... which would be unusual.
This issue is about Safari (the default) and all other typical browsers, and not those instances/exceptions.

That's a false statement.
The "not showing skinned mesh" is a very old bug on various mobile devices / browser combinations.
The same issue with (the latest version or not) Firefox Android.
But on the same Android device Chrome works just fine ...
Talking about Firefox Android, I've reported the issue 5 months ago, they were able to replicate it, but the bug is still not fixed.
Honestly, WebGL development does not look good at all.

[benguild]

@RemusMar RE: https://github.com/mrdoob/three.js/issues/14482#issuecomment-405212800 — Just to reiterate, I'm referring to iOS specifically and Apple's App Store guidelines:

2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript.

and...

4.7 HTML5 Games, Bots, etc.
Apps may contain or run code that is not embedded in the binary (e.g. HTML5-based games, bots, etc.), as long as code distribution isn’t the main purpose of the app, the code is not offered in a store or store-like interface, and provided that the software (1) is free or purchased using in-app purchase; (2) only uses capabilities available in a standard WebKit view (e.g. it must open and run natively in Safari without modifications or additional software); your app must use WebKit and JavaScript Core to run third party software and should not attempt to extend or expose native platform APIs to third party software; (3) is offered by developers that have joined the Apple Developer Program and signed the Apple Developer Program License Agreement; and (4) adheres to the terms of these App Review Guidelines (e.g. does not include objectionable content). Upon request, you must provide an index of software and metadata available in your app. It must include Apple Developer Program Team IDs for the providers of the software along with a URL which App Review can use to confirm that the software complies with the requirements above.

Regardless, like I said, this is an issue in iOS 9.3 Safari anyway.

_Reference: https://developer.apple.com/app-store/review/guidelines/_

[benguild]

@RemusMar https://github.com/mrdoob/three.js/issues/14482#issuecomment-405212800 — If you want to reference your issue(s) here, please feel free to do so if they're related.

[benguild]

@Mugen87 RE: https://github.com/mrdoob/three.js/issues/14482#issuecomment-405203227 — This example does also work... https://threejs.org/examples/?q=fbx#webgl_loader_fbx_nurbs

The completion block for loader.load() is not called on the originally referenced example. However, on that one, it is.

Could it be an issue with inflating certain binary files?

[benguild]

Also, I tried another binary FBX file and that one didn't work on iOS 9.3 either.

[looeee]

The FBXloader is the only loader using Map internally. @benguild can you check that Map is supported in your version of Safari?

[RemusMar]

If you want to reference your issue(s) here, please feel free to do so if they're related.

It's not a THREE.js bug (and not related to the FBX loader).
It's a global Browser/OS/WebGL implementation bug.

In any case, here is a much more detailed test case (includes the best THREE.js features):
1) Chrome - Android

Everything is ok

2) Firefox - Android

The skinned meshes and the video texture don't show up.

Again: these are not THREE.js bugs.

[benguild]

@looeee RE: https://github.com/mrdoob/three.js/issues/14482#issuecomment-405218105 — Sure, how?

[benguild]

@RemusMar RE: https://github.com/mrdoob/three.js/issues/14482#issuecomment-405218960 — Thanks for posting. That demo actually works fine on iOS 9.3's Safari (no difference like as seen in your screenshots), so unless your issue is related to this one, let's keep this topic focused on this particular issue as it doesn't involve Android or Firefox at all.

[RemusMar]

For the last time: the Safari browser is buggy on OS 9.3.
Your issue has nothing to do with THREE.js and FBX.

[looeee]

@benguild open this page: https://kangax.github.io/compat-table/es6/

The first column is "current browser". Scroll down to Map and see if it's supported.

[benguild]

@looeee RE: https://github.com/mrdoob/three.js/issues/14482#issuecomment-405221125 —

[looeee]

OK, that looks fine. Would you mind expanding the "Typed Arrays" section as well? Looks like there are some limitations there.

[looeee]

By the way, what simulator are you using for IOS?

[benguild]

@looeee RE: https://github.com/mrdoob/three.js/issues/14482#issuecomment-405224657 — Sure, here goes:

By the way, what simulator are you using for IOS?

It's just the one bundled with Xcode from Apple. I wrote instructions on how to get this particular version in an above post, but you need macOS.

[mrdoob]

I happened to have a iPod Touch laying around and I was able to debug this a bit.

This is the line that breaks:
https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/FBXLoader.js#L3712

Apparently, Uint8Array doesn't have indexOf() in Safari 9.

[benguild]

RE: @mrdoob https://github.com/mrdoob/three.js/issues/14482#issuecomment-407822222 — Cool, I polyfilled it here: #14560

However, it didn't solve the problem for me on my end. 🤔

[mrdoob]

https://threejs.org/examples/webgl_loader_fbx.html now loads on iPod Touch with Safari 9/iOS 9.3.

[benguild]

Can confirm issue on https://threejs.org/examples/webgl_loader_fbx.html is resolved on iOS 9.3 here as well 👍🏻

However, I did notice that the FBX loader block is still silently not being called in other instances as well, such as on my personal site: https://benguild.com