gltf/glb models not loading in Microsoft Edge

[dsinni]

Description:

gltf and glb models don't appear to be loading in Microsoft Edge on Windows, using the current A-Frame master branch.

Console says:

 components:gltf-model:warn 'TextDecoder' is not defined 

and/or:

[object Error]: {description: "'TextDecoder' is not defined", message: "'TextDecoder' is not defined", number: -2146823279, stack: "ReferenceError: 'TextDecoder' is not defined at THREE.LoaderUtils.decodeText (https://unpkg.com/aframe-extras@4.2.0/dist/aframe-extras.min.js:1:1300) at GLTFLoader.prototype.parse (https://cdn.jsdelivr.net/gh/aframevr/aframe@826e983d989312fe7cd75b9cc92e58b7a5cc195f/dist/aframe-master.js:56338:5) at Anonymous function (https://cdn.jsdelivr.net/gh/aframevr/aframe@826e983d989312fe7cd75b9cc92e58b7a5cc195f/dist/aframe-master.js:56286:6) at Anonymous function (https://cdn.jsdelivr.net/gh/aframevr/aframe@826e983d989312fe7cd75b9cc92e58b7a5cc195f/dist/aframe-master.js:36129:20)"}
description: "'TextDecoder' is not defined"
message: "'TextDecoder' is not defined"
number: -2146823279
stack: "ReferenceError: 'TextDecoder' is not defined at THREE.LoaderUtils.decodeText (https://unpkg.com/aframe-extras@4.2.0/dist/aframe-extras.min.js:1:1300) at GLTFLoader.prototype.parse (https://cdn.jsdelivr.net/gh/aframevr/aframe@826e983d989312fe7cd75b9cc92e58b7a5cc195f/dist/aframe-master.js:56338:5) at Anonymous function (https://cdn.jsdelivr.net/gh/aframevr/aframe@826e983d989312fe7cd75b9cc92e58b7a5cc195f/dist/aframe-master.js:56286:6) at Anonymous function (https://cdn.jsdelivr.net/gh/aframevr/aframe@826e983d989312fe7cd75b9cc92e58b7a5cc195f/dist/aframe-master.js:36129:20)"

__proto__: Object

• A-Frame Version: master 35384188aeac514aa23891f0daa8b5c9f7e4abfc
• Platform / Device: Microsoft Edge / Windows 10
• Reproducible Code Snippet or URL: https://bunker-bake.glitch.me

[donmccurdy]

The quick fix is including a TextDecoder polyfill, like https://github.com/samthor/fast-text-encoding.

But I'm not sure why that's necessary, so, could you try adding this tag to the page head element, and see if anything changes?

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

[dsinni]

Tried the tag, but no dice. I left it in there anyway just to rule it out.

I'll try the polyfill approach tomorrow to see if that works.

Thanks again, Don.

[dsinni]

Please excuse the delayed response here, but adding the fast-text-encoding polyfill did work in Edge:

<script src="https://cdn.jsdelivr.net/npm/fast-text-encoding@1.0.0/text.min.js"></script>

That said, should A-Frame not work in Edge out of the box? Should the polyfill be included in core?

[donmccurdy]

I'm still not sure why the polyfill is even necessary... the relevant code in threejs is careful to check when TextDecoder is available, and use a fallback if not:

https://github.com/mrdoob/three.js/blob/34dc2478c684066257e4e39351731a93c6107ef5/src/loaders/LoaderUtils.js#L9-L28

Perhaps that check is being stripped in minification somewhere?

[dmarcos]

The provided link above does not render on any browser for me. @dsinni Any working link you can provide for evaluation?

[arpu]

@dmarcos https://bunker-bake.glitch.me/ works fine for me in chrome Version 71.0.3578.80 linux

[dmarcos]

Thanks. I understood the problem was with Edge. I tried on Microsoft EdgeHTML 17.17134 and it worked for me.

[dsinni]

@dmarcos

The provided link above does not render on any browser for me. @dsinni Any working link you can provide for evaluation?

Ah, I think that's because of another issue (#3868) with <audio> assets not loading properly in Firefox and it's blocking. I made the mistake of referencing this Glitch for more than one issue.

I have another version using <a-asset-item> rather than <audio> so there isn't any interference from the audio issue, but it's still not working in Edge (Microsoft Edge 42.17134.1.0 / Microsoft EdgeHTML 17.17134) for me: https://bunker-baked.glitch.me

I also just updated to the last master build A-Frame Version: 0.8.2 (Date 2018-11-18, Commit #7f9c5bf) just to be sure.

If you enter full-screen view, you'll also notice the issue outlined in #3902

[dmarcos]

IE 11 / Edge is working on master and GLTF models included in the examples work for me (anime-UI, shopping). Not sure what's special about to model provided in the example.

[dsinni]

@dmarcos Hm, that's really odd because it's working for me in Firefox and Chrome, but not in Edge. I'm on Windows 10.

Note that there are 2 links, which are very similar:

• https://bunker-bake.glitch.me
• https://bunker-baked.glitch.me

The latter one should be working in Firefox and Chrome (at least I hope, as they are for me).

[dsinni]

Update: I updated A-Frame in the https://bunker-baked.glitch.me/ demo to the latest master build: A-Frame Version: 0.8.2 (Date 2019-02-04, Commit #2c3ad68)

The issue still persists in Edge for me. All other browsers tested (Firefox, Chrome) work as expected.

[dsinni]

Congrats on the 0.9.0 release! Thanks for all the great work you guys have been doing.

Just wanted to let you know that this issue is still persisting in 0.9.0.

I tried another glb model entirely, and I'm receiving the following error in Edge:

2 %ccomponents:gltf-model:warn %c'TextDecoder' is not defined%c  color: orange color: inherit color: orange

[donmccurdy]

This was a bug in A-Frame Extras - the fbx-model component included a shim for older versions of three.js that broke something on Edge. If you update Extras to v5.1.0, Microsoft Edge will work correctly.

[dsinni]

Aha! That did it. Thanks, @donmccurdy!