[Editor] How can I add an alpha texture for transparencies in the editor?

[nestorchura2019]

https://modelviewer.dev/editor/
I see that I can add the other maps like occlusion, normal map etc,
but how can I add an alpha texture to make the model transparent?

[nestorchura2019]

I found a partial solution, if I edit the texture in PS, GIMP, etc. deleting part of the photo and saving in .png with transparency, the model works with transparency (alpha) in the editor.
In three.js you can add an alphaMap for opacity, is that possible with modelViewer?

[elalish]

Keep in mind that here we're editing a glTF, which is a subset of everything three.js can do with materials. In glTF, alpha is a channel of the baseColor. Keep in mind that this isn't the best way to create transparency, as it's for things like gauze, rather than glass. There is a real glTF transparency extension coming soon that should improve this.

[gcrockenberg]

Hello,

Great work on model-viewer! I'm following up on this subject as I have not seen transparency in the code or examples as it relates to alphaMap. I am looking to accomplish the following in model-viewer.
https://discourse.threejs.org/t/please-help-how-to-create-a-physical-material-that-is-transparent-only-in-certain-areas/46422

The partial solution above works for me when I am setting the texture with the alpha built into the texture but not when I want to directly apply an alphaMap to the material without otherwise changing its map/settings.

I can get the alphaMap scenario working by adding the following to pbr-metallic-roughness.ts

  setAlphaMap(texture: any) {
    
    for (const material of this[$threeMaterials]) {
      material.alphaMap = texture;
    }

    this[$onUpdate]();
  }

Thanks!

[elalish]

Thanks! Our API is based on glTF, not Three.js (this keeps our API very stable), and glTF packs alpha into the baseColor texture. So, you'll just have to switch out the whole baseColorTexture if you want to change your alpha map on the fly. The transmission map is separate though (for glass-like materials), so you could swap that out. It appears we neglected to update our documentation on this, but we do in fact have material.transmissionTexture, etc.