Unable to load certain gltf (.glb) models about pixi3d

[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]

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

[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]

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!