Scene Graph Swap Textures problem

[colordrop]

Description

I'd like to use USDZ autogenerate for my project. As far as I know, it's not released yet so I use the version from that link: https://modelviewer.dev/node_modules/@google/model-viewer/dist/model-viewer.min.js

With version 1.6.0 I was able to swap textures based on texture channel, so in my case, I change independently the base and fabric of a chair.
Using model-viewer with auto-generate USDZ changing textures from both lists affects the whole model - I can't change the material on just one part of 3d model.

Live Demo

https://glitch.com/edit/#!/mire-cookie-attack?path=index.html%3A17%3A63 - model-viewer from unpkg.com
https://glitch.com/edit/#!/unexpected-fern-geology?path=index.html%3A1%3A0 - model-viewer from modelviewer.dev

Version

https://modelviewer.dev/node_modules/@google/model-viewer/dist/model-viewer.min.js

Browser Affected

• Chrome, version: xx.x.xxxx.xx
• Edge
• Firefox
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows

AR

• WebXR
• SceneViewer
• QuickLook

[elalish]

It seems the problem is that despite having two materials, they both point to the same baseColor texture. In fact, the legs don't appear to be textured at all, so you'd be better off with their material having just a baseColorFactor and no texture.

Not sure why this would ever have worked before. Also, I recommend putting a link to a specific npm version rather than the latest, since I just made a release and now your two examples behave the same.

[colordrop]

Thanks for the answer. I'm not a programmer so maybe I'm wrong, but there are two variables: applyPBRTexture and applyPBRTexture1, so I thought that I can use two textures for two channels in my model. Especially that it works with 1.6.0 (https://glitch.com/edit/#!/unexpected-fern-geology?path=index.html%3A82%3A38)

let material = modelViewerTexture.model.materials[0];
  let material1 = modelViewerTexture.model.materials[1];

  let applyPBRTexture = (channel, event) => {
    material.pbrMetallicRoughness[channel].texture.source.setURI(event.target.value);
  }
  let applyPBRTexture1 = (channel, event) => {
    material1.pbrMetallicRoughness[channel].texture.source.setURI(event.target.value);
  }
  
  document.querySelector('#diffuse').addEventListener('input', (event) => {
    applyPBRTexture('baseColorTexture', event);
  });
  document.querySelector('#diffuse2').addEventListener('input', (event) => {
    applyPBRTexture1('baseColorTexture', event);
  }); 

Could you help me with adding baseColorFactor to options in the dropdown list? Can I use hex/RGB or what color system? What should I do to control diffuse textures in multiple channels (index no)?

[elalish]

The problem is inside your glTF, as both modelViewerTexture.model.materials[0].pbrMetallicRoughness.baseColorTexture.texture and modelViewerTexture.model.materials[1].pbrMetallicRoughness.baseColorTexture.texture point to the same object, hence there is no difference between your functions. If your glTF had separate textures for its separate materials (most common), this would not be a problem.

You can use modelViewerTexture.model.materials[1].pbrMetallicRoughness.setBaseColorFactor([1, 0, 0, 1]) to set the factor, since those objects are still separate for the two materials you've built. These are reflectivity values between zero and 1, so they are independent of color system.

[colordrop]

Thanks a lot - now everything works fine.
I have one more question: is there a way to swap textures on load - let's say that I have one 3d model and multiple product pages with variants of that model, can I swap textures on load with some script or so?

[elalish]

I would recommend authoring the file using the actual gltf variants extension. Then you can simply select them by name with an attribute, including on load: https://modelviewer.dev/examples/scenegraph/#variants