Failed to load Duck.gltf model

[cx20]

I tried loading Duck.gltf using PlayCanvas + glTF Loader. http://jsdo.it/cx20/yh4S

However, glTF-Embedded format can be load, but otherwise it got an error.

[OK] https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/Duck/glTF-Embedded/Duck.gltf [NG] https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/Duck/glTF/Duck.gltf

gltf-loader.js:5 
Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at dataURItoArrayBuffer (https://cdn.rawgit.com/playcanvas/playcanvas-gltf/5489ff62/src/gltf-loader.js:5:26)
    at https://cdn.rawgit.com/playcanvas/playcanvas-gltf/5489ff62/src/gltf-loader.js:516:35
    at Array.forEach (<anonymous>)
    at loadBuffers (https://cdn.rawgit.com/playcanvas/playcanvas-gltf/5489ff62/src/gltf-loader.js:515:26)
    at loadGltf (https://cdn.rawgit.com/playcanvas/playcanvas-gltf/5489ff62/src/gltf-loader.js:602:54)
    at XMLHttpRequest.req.onload (http://jsrun.it/cx20/yh4S:132:16)

https://github.com/playcanvas/playcanvas-gltf/blob/master/src/gltf-loader.js#L5

If the normal glTF format is supported, I will add playcanvas-gltf to gltf-test.

[willeastcott]

This is because the glTF loader currently only supports:

• Embedded glTF
• Binary glTF (.glb)

I just committed the first part of support non-embedded glTF files here: https://github.com/playcanvas/playcanvas-gltf/commit/6ff7720d12a1a54b2b758f710e626a5a7bdf80db

This gives the loader code access to the external .bin and image files referenced by the glTF file. Now I just need to update the loader to load the days from these files.

[cx20]

I have understood the status of current glTF Loader. I added the following tests to gltf-test. Other tests are added when normal glTF format is supported.

• Format Tests ( https://github.com/cx20/gltf-test#format-tests )
• All Tests ( https://cx20.github.io/gltf-test/ )

https://github.com/cx20/gltf-test#format-tests

https://cx20.github.io/gltf-test/

[cx20]

I tried loading non-embedded glTF files with the latest glTF viewer. Since the geometry of Duck is displayed, it seems that the bin file can be load correctly. However, image file seems not to be load.

[willeastcott]

Fixed in https://github.com/playcanvas/playcanvas-gltf/commit/be2b66f9b001ad50e6e9a94fc501a8eb5db43abd

[cx20]

I confirmed that non-embedded glTF files can be load with the latest glTF viewer.

[willeastcott]

Excellent. 👍

[cx20]

However, in my gltf-test, I can not display it yet. https://cx20.github.io/gltf-test/examples/playcanvas/index.html?model=Duck&scale=1&type=glTF

I think it is necessary to pass more than one file name, but I did not understand how to do it.

[willeastcott]

Currently, you have to pass an array of File objects, which is not so easy to generate. At the moment, this is generated in the viewer index.html. I think I'm going to change this such that you can pass in a callback to the loadGltf function, and when the loader requests a file, you can load it from whatever source you like.

[cx20]

Thank you for the advice. I think it is difficult to create an array of File objects, so I'd like to test waiting for loader fixes.

[willeastcott]

OK. I'll figure out an easier mechanism for loading multi-file glTF.

[willeastcott]

I have made it much easier to loaded multi-file glTF for you. See this change. Now you can do:

        app.assets.loadFromUrl('assets/car.gltf', 'json', function (err, asset) {
            var json = asset.resource;
            var gltf = JSON.parse(json);
            loadGltf(gltf, app.graphicsDevice, function (roots) {
                // add the loaded scene to the hierarchy
                roots.forEach(function (root) {
                    app.root.addChild(root);
                });
            }, {
                basePath: 'assets/'
            });
        });

I have updated the API function descriptions in the top-level readme. 😄

[cx20]

I confirmed that playcanvas-gltf supported normal glTF format and added test to gltf-test. The following is the current test result.

https://github.com/cx20/gltf-test#format-tests

https://github.com/cx20/gltf-test#simple-models-for-testing-individual-features

https://github.com/cx20/gltf-test#more-complex-models

https://github.com/cx20/gltf-test#pbr-models

https://github.com/cx20/gltf-test#further-pbr-models

https://github.com/cx20/gltf-test#agi-sample-models

[willeastcott]

OK, well, I guess that's progress. 😄

TODO:

• Keyframe animation
• Skinning
• Morphing
• Draco support
• Vertex color support
• Fix tangent space problem

[willeastcott]

I've fixed the problem preventing the SciFi Helment loading here:

[cx20]

I confirmed that the Sci Fi Helmet is displayed and I updated the status of gltf-test. https://github.com/cx20/gltf-test#further-pbr-models

[willeastcott]

I've done a first pass at supporting morph target animation from glTF. This means the following models (from the glTF sample models repo) should now work correctly:

• AnimatedMorphCube
• AnimatedMorphSphere
• SimpleMorph

[cx20]

I confirmed that morph target animation works and updated the status of gltf-test. https://github.com/cx20/gltf-test#simple-models-for-testing-individual-features

[willeastcott]

I've just added support for vertex colors. This required an update to the PlayCanvas Engine itself. See here. This allows tests 'VertexColorTest' and 'BoxVertexColors' to work correctly. Because the engine PR to support vertex colors has not yet been merged, I've checked in a 'dev' build of the engine into this repo. Hopefully we can merge and deploy that on Monday.

[cx20]

I understand. I will test again when PR is merged into the PlayCanvas Engine.

[cx20]

I confirmed that VertexColorTest and BoxVertexColors can be displayed with the latest PlayCanvas engine.

[willeastcott]

Excellent. 👍 I'll look at transform-based keyframes next, I think.

[willeastcott]

My latest commit fixes:

• Animated Triangle
• Box Animated
• Cesium Milk Truck
• Animated Cube
• Virtual City (VC)

We're getting closer... 😸

[cx20]

I confirmed that the above five models will be displayed. https://github.com/cx20/gltf-test

[willeastcott]

I've added initial support for Draco mesh compression here. Try the duck to verify this for yourself.

[cx20]

Thank you for working quickly to support Draco. I confirmed that Box and Duck glTF Draco format can be displayed. https://cx20.github.io/gltf-test/index.html I am waiting for other models to be displayed as well.

[willeastcott]

Ah yes, most other Draco models weren't loading. Corset and Boombox now work too because of this commit. Still some problems with GearboxAssy. I'll look into it...

[cx20]

I noticed a mystery problem. However it is interesting :-)

2CylinderEngine.gltf Draco format result:

Lantern.gltf Draco format result:

[willeastcott]

OK, this is now fixed. All Draco models should now work in PlayCanvas (obviously, I still need to finish skinning support though).

2CylinderEngine.gltf Draco format result:

Lantern.gltf Draco format result:

[cx20]

I confirmed that the glTF Draco model is displayed except skinning animation. I updated the following status. https://github.com/cx20/gltf-test#format-tests

[willeastcott]

I have now implemented skinning. This means all Draco models now work correctly. Plus the following scenes:

• RiggedSimple
• BrainStem

Unfortunately, there are some issues with:

• RiggedFigure
• Monster
• CesiumMan

[willeastcott]

I think I see why RiggedSimple has problems. There are vertices where the skin weights do not sum to 1. Calling @guycalledfrank - what do you think about this? I could try normalizing the weights on load, but I notice Three.js can load this model fine without renormalizing. Three's skinning GLSL is slightly different to PlayCanvas. I wonder if PlayCanvas is bugged somehow...

[cx20]

I updated the status of gltf-test because I confirmed that RiggedSimple and BrainStem are displayed correctly. https://github.com/cx20/gltf-test

[willeastcott]

OK, the following now work due to this PR in the engine:

• RiggedFigure
• Monster
• CesiumMan

So you can now also remove the comment 'skinning animation support yet' for the Draco format.

[cx20]

Wonderful work! I confirmed that all skinning animation models are displayed. https://github.com/cx20/gltf-test

[willeastcott]

Since this issue was originally about fixing unpacked glTF scenes, I'm going to close it.

The remaining issues that I'm aware of that are preventing the PlayCanvas glTF loader from passing every one of your test have now been added as new issues. These cover:

• Sparse accessors.
• Interleaved vertex data.
• Tangent generation.

Thank you so much for all your help so far! 😄