Hiding materials

[dmkrtz]

Description

I am using a custom function to hide materials which sets the color of said material to "0,0,0,-1". This worked fine until the last update, forcing me to use 1.8.0 instead of the recently released 1.9.0.
Was this on purpose or am I just abusing a bug? :D
I mean, it works. See video below. Where it works I used [email protected], then after pressing reload I changed the src to newest version 1.9.0 and instead of hiding the material it's painted black.

Live Demo

https://puu.sh/Ijj97/fb5f20f0f1.mp4

Version

• model-viewer: v1.9.0

[elalish]

Hmm, [0, 0, 0, -1] does sound like abusing a bug 😂. It should definitely be possible to hide materials though. Have you tried [1, 1, 1, 0]? You'll also need to make sure to set alphaMode to 'MASK' or 'BLEND'.

[dmkrtz]

modelViewer.model.materials[i].setAlphaMode("MASK");

This little piece of code made it possible for me to finally use >1.8.0.

function hideTexture(that, i) {
	var colorString = ""; 
	var color = "";

	if (that.innerHTML == '<i class="fas fa-eye"></i>') {	
		colorString = "0,0,0,0";
		colorBefore = modelViewer.model.materials[i].pbrMetallicRoughness.baseColorFactor;
		alphaModeBefore = modelViewer.model.materials[i].getAlphaMode();

		color = colorString.split(',')
			.map(numberString => parseFloat(numberString));
		that.innerHTML = '<i class="fas fa-eye-slash"></i>'
		$(that).attr("colorBefore", colorBefore);
		$(that).attr("alphaModeBefore", alphaModeBefore);
		
		modelViewer.model.materials[i].setAlphaMode("MASK");
		modelViewer.model.materials[i].pbrMetallicRoughness.setBaseColorFactor(color);
	} else {
		colorString = $(that).attr("colorBefore");
		alphaModeBefore = $(that).attr("alphaModeBefore");

		color = colorString.split(',')
			.map(numberString => parseFloat(numberString));
		that.innerHTML = '<i class="fas fa-eye"></i>'

		modelViewer.model.materials[i].setAlphaMode(alphaModeBefore);
		modelViewer.model.materials[i].pbrMetallicRoughness.setBaseColorFactor(color);
	}
}

Now that I add the MASK mode to the material before changing color, the 0, 0, 0, 0 does its job. Not all materials of a model I provide in my program need any Alpha Mode except Opaque, so this is possibly the best way to achieve that.

Thank you very much @slightHYP!!

[Biglow230]

I used the setter function to update the alphaMode value. Something like this:

modelViewer.model.materials[i].setAlphaMode("MASK");

In my case this works well. I have tried your .glb model and I'm able to hide it.

I'm still rather confused as to why I am having such a difficult time getting this to work.

I even tried @dmkrtz updated method. I just can't seem to get this to do what's being shown and I'm confused on where the disconnect would be.

The updated code is as follows: Sorry in advance if I'm asking dumb questions 😔 I'm still very new to this level of coding. Thank you for your time an patience.
Show Hide <input type="checkbox" id="checked" >

modelViewer.addEventListener('load',()=>{
        
var isChecked = $(this).prop("checked");
var materials = modelViewer.model.materials;
const hideMaterials = [ "Material0GMObj0.820" ];

if(isChecked) {
for (var i=0,j=materials.length; i<j; i++) {
	if ( hideMaterials.includes(materials[i].name) ) {
	
		colorString = "1,1,1,0";
		color = colorString.split(',')
	.map(numberString => parseFloat(numberString));
         modelViewer.model.materials[i].setAlphaMode("MASK");
	modelViewer.model.materials[i].pbrMetallicRoughness.sourceObject.setBaseColorFactor(color);
			}
			}
			} else {
	for (var i=0,j=materials.length; i<j; i++) {
	if ( hideMaterials.includes(materials[i].name) ) {
		colorString = "1,1,1,1";
		color = colorString.split(',')
	.map(numberString => parseFloat(numberString));
        modelViewer.model.materials[i].setAlphaMode("MASK");
	modelViewer.model.materials[i].pbrMetallicRoughness.sourceObject.setBaseColorFactor(color);
			}
			}}});

[slightHYP]

I've just tried your 3d model and this loop works for me:

    for (var i=0,j=materials.length; i<j; i++) {
        if ( hideMaterials.includes(materials[i].name) ) {
	        colorString = "1,1,1,0";
	        color = colorString.split(',').map(numberString => parseFloat(numberString));
                this.modelViewerElement.model.materials[i].setAlphaMode("MASK");
                **this.modelViewerElement.model.materials[i].pbrMetallicRoughness.setBaseColorFactor(color);**
        }
    }

The baseColorFactor have to be applied directly to the material not to the sourceObject.

[Biglow230]

@slightHYP Thank you so much for your patience, used this exact code and it still isn't working. Apparently I may have overlooked that "colorString" apparently is not defined but wouldn't it be defined by the "1,1,1,0" or am I missing something here? I most likely am.

[slightHYP]

The setBaseColorFactor function accepts an array of 4 integer and in your code is correct, as you can see in the following gif.

So the problem is somewhere else.

Is the isChecked flag correct?
You retrieve the value inside the 'load' callback function with the following code:

$(this).prop("checked");

You are in another scope. I suppose that the $(this) doesn't refer to your checkbox state, it returns always "false" and skip the "hiding loop" entering to the "else" condition where colorString is "1,1,1,1". Could this be?

Have a look there.