Changing material variant might be buggy since version 1.9.0

[Godelaune]

Hi,
I just updated to version 1.9.0. We have some animated parts in our models. When changing the GLTF material variant, some parts of the model now stay with the old texture.

The console throws this error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'gltf')
at Zy.[getLoadedMaterial] (/js/ext/model-viewer.min.js:1204)
at async sx.setActiveMaterial (/js/ext/model-viewer.min.js:1204)
at async Promise.all (index 17)
at async bx.[switchVariant] (/js/ext/model-viewer.min.js:1219)
at async HTMLElement.updated (/js/ext/model-viewer.min.js:1248)

Is anyone else experiencing this?
Is it right to just change the .variantName attribute of the modelviewer to change material variant?

Best regards

[samaneh-kazemi]

Hi, thanks for trying the latest version. Can you share more details on how you are using model-viewer? Which params you're setting etc.

Hi,

I just updated to version 1.9.0. We have some animated parts in our models. When changing the GLTF material variant, some parts of the model now stay with the old texture.

The console throws this error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'gltf')

at Zy.[getLoadedMaterial] (/bundles/em24arplugin/js/ext/model-viewer.min.js:1204)

at async sx.setActiveMaterial (/bundles/em24arplugin/js/ext/model-viewer.min.js:1204)

at async Promise.all (index 17)

at async bx.[switchVariant] (/bundles/em24arplugin/js/ext/model-viewer.min.js:1219)

at async HTMLElement.updated (/bundles/em24arplugin/js/ext/model-viewer.min.js:1248)

Is anyone else experiencing this?

Is it right to just change the .variantName attribute of the modelviewer to change material variant?

Best regards

[elalish]

@Godelaune Can you share a repro link so we can debug?

[MTheProgrammer]

Same here, I'm updating material texture after switching variant. Active material is from the previously selected variant, as if call to variantName = 'desired-variant' should be replaced with async/await method call.

async[$switchVariant](variantName: string|null) {
    for (const primitive of this[$primitivesList]) {
      await primitive.enableVariant(variantName);
    }
...

https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/features/scene-graph/model.ts

EDIT:
Yup, I've just tested and it works for the following case:

Instead of using what is stated in the documentation

modelViewer.variantName = 'desired-variant'

promisify the statement

await Promise.resolve(() => modelViewer.variantName = 'desired-variant');

or

await (() => modelViewer.variantName = materialInstance.variant);

However, it feels a a bit hacky.

[MTheProgrammer]

This does not work, it behaves the same way as updating variantName without await call. Active material points to the material from previously selected variant.

[elalish]

I can't quite follow what the problem is; I'm not sure what "active material" is. Would you mind making a small repro site and linking it here so I can debug?

[MTheProgrammer]

Hi, sorry for late reply. Here is the repo: https://github.com/MTheProgrammer/model-viewer-variant-update-bug

Buggy behavior with modelViewer.variantName = variant;

Correctly updated materials with: await Promise.resolve(() => modelViewer.variantName = variant);

[elalish]

Sorry, I've been getting a lot of github links lately - I think I need to be more clear: I need a repro URL, not a Github repo.

[MTheProgrammer]

Oh, right.

This is buggy: https://precious-frangollo-daa3cd.netlify.app/
This is correct: https://coruscating-liger-4f2f5b.netlify.app/