Unable to load certain gltf (.glb) models

[goldenratio]

Unable to load these models, getting runtime error as described below. https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Lantern/glTF-Binary https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/BarramundiFish/glTF-Binary

pixi3d version: 1.1.1

Please note: I was able to load these models in v0.9.8. Any help is appreciated.

pixi3d.js:10145 Uncaught TypeError: Cannot read properties of undefined (reading 'baseTexture')
    at glTFParser../src/gltf/gltf-parser.ts.glTFParser.parseTexture (pixi3d.js:10145)
    at new glTFParser (pixi3d.js:9965)
    at Function../src/gltf/gltf-parser.ts.glTFParser.createModel (pixi3d.js:9974)
    at Function../src/model.ts.Model.from (pixi3d.js:13325)
    at PixiGLTFManager.getModel (pixi-gltf-manager.ts:67)
    at showGTLFModel (index.ts:68)
    at index.ts:261
    at SafeSubscriber._next (pixi-gltf-manager.ts:41)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:192)
    at SafeSubscriber.next (Subscriber.js:130)

[jnsmalm]

I can load both of those models you linked to using this code:

let app = new PIXI.Application({
  backgroundColor: 0xdddddd, resizeTo: window, antialias: true
})
document.body.appendChild(app.view)

app.loader.add("assets/BarramundiFish.glb")

app.loader.load((_, resources) => {
  let model = app.stage.addChild(
    PIXI3D.Model.from(resources["assets/BarramundiFish.glb"].gltf))
})

You sure you downloaded those glb files correctly?

[goldenratio]

I am writing down my findings here,

this callback seems to be called multiple times, number of call is equal to number of images. https://github.com/jnsmalm/pixi3d/blob/develop/src/gltf/gltf-asset.ts#L119

I think this kinda messes up the loader's next() call, https://github.com/jnsmalm/pixi3d/blob/develop/src/loader/gltf-binary-loader.ts#L14

Adding a setTimeout before adding to stage, seems to do the trick, example:

import * as PIXI from 'pixi.js';
import { Model } from 'pixi3d';

const app = new PIXI.Application({
    width: 600,
    height: 400,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
    sharedTicker: true,
});

document.body.appendChild(app.view);

PIXI.Loader.shared
    .add('barramundi-fish', './resources/barramundi-fish.glb')
    .load((_, resources) => {
      // this fails
      // @ts-ignore
          app.stage.addChild(Model.from(resources['barramundi-fish'].gltf));

           // this works
           // setTimeout(() => {
             // @ts-ignore
             // app.stage.addChild(Model.from(resources['barramundi-fish'].gltf));
           // }, 100);
    });

[jnsmalm]

Which device/os/browser are you using?

[goldenratio]

mac os Catalina / Chrome

[goldenratio]

I created minimal reproducible demo, https://goldenratio.github.io/pixi3d-poc-72/ (please, open dev console to see the error)

Here is the repo, https://github.com/goldenratio/pixi3d-poc-72

mac os Catalina / Chrome

[jnsmalm]

Thanks! I noticed the issue you are experiencing only first time in Safari (not after that), Chrome works fine for me). I think I know what the issue could be, I'll look into it.

[jnsmalm]

I have updated the develop branch with an update, it would be huge help if you would like to test the following (because I can't really reproduce it)

1. Clone the repo git clone https://github.com/jnsmalm/pixi3d.git
2. npm install
3. Update the contents of the file /serve/src/index.js with the code below (pretty much a copy of your code)
4. npm run serve
5. Hopefully it will work now!

/serve/src/index.js

const app = new PIXI.Application({
    width: 600,
    height: 400,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
    sharedTicker: true,
});

document.body.appendChild(app.view);

PIXI.Loader.shared.add('barramundi-fish', './resources/barramundi-fish.glb').load((_, resources) => {
    // this should work now
    app.stage.addChild(PIXI3D.Model.from(resources['barramundi-fish'].gltf));

    // this works also
    // setTimeout(() => {
    //  app.stage.addChild(PIXI3D.Model.from(resources['barramundi-fish'].gltf));
    // }, 100);
});

[goldenratio]

fix seems to work. Thanks!

[jnsmalm]

Thanks for the help, fix is included in release 1.1.2.