Three.js: Removing map from material

[joaocraveiro]

Description of the problem

I am trying to remove the texture applied to a material. When I set the material map property to null the object seems to somehow get the first texture I loaded (and applied to another object) mapped.

Three.js version

• [ ] Dev
• [ ] r76

• [x] r73

  Browser

• [ ] All of them

• [x] Chrome
• [x] Firefox

• [ ] Internet Explorer

  OS

• [ ] All of them

• [x] Windows
• [ ] Linux
• [ ] Android
• [ ] IOS
  

  Hardware Requirements (graphics card, VR Device, ...)

[mrdoob]

Can you create a jsfiddle?

[tentone]

Maybe you are forgetting to set "needsUpdate" true? Something like

material.map = null;
material.needsUpdate = true;

[joaocraveiro]

needsUpdate does the trick but this behavior does seem weird.

Here goes a fiddle: https://jsfiddle.net/JoaoCraveiro/dy9roz6x/8/

[mrdoob]

What's weird about it?

[joaocraveiro]

Wrong version of the fiddle. Please check it again, I just edited my last post with the correct link.

Basically when you press the button the bigger box's material map is set to null but it maps the texture assigned to the smaller box.

[WestLangley]

Fiddle without errors: https://jsfiddle.net/dy9roz6x/7/

This seems to be the issue:

document.getElementById( "btn1" ).onclick = function () {

    //mesh.material.map = trigger.material.map; //works

    mesh.material.map = null; mesh.material.needsUpdate = true; // needsUpdate required

}

Note: the textures are solid green and solid purple in the fiddles.

[joaocraveiro]

Fiddle has no errors. It's to illustrate a weird behavior when you set map to null without the needsUpdate true.

[WestLangley]

@joaocraveiro When I run your fiddle

1285(index): Uncaught ReferenceError: stats is not defined

I simply cleaned up and removed the extraneous code from your fiddle to make it easier for others to follow.

[WestLangley]

@mrdoob To summarize, the issue here is:

mesh.material.map = mesh2.material.map; //works w/o setting needsUpdate

mesh.material.map = null; mesh.material.needsUpdate = true; // works with needsUpdate set

mesh.material.map = null; // assigns some other map as the texture

See fiddle above.

[Mugen87]

I've recently came across this issue. The problem is that removing a map (setting Material.map to null) means the respective map uniform becomes obsolete, too. Without setting Material.needsUpdate to true, it's not possible to reset the uniforms list and the define USE_MAP.

It's a different use case when an existing texture is replaced with another one. In this context, no change of the shader program is required.

Since there is no easy way to consistently solve this issue for all use cases, I vote to close the issue and mark it as Won't fix.

[WestLangley]

I vote to close the issue and mark it as Won't fix.

Well, closing is fine, but "Won't fix" means there is something defective. There is nothing defective here -- setting the needs update flag is required in this case.

---

Use this pattern when removing a map and setting material.map to null:

mesh.material.map = null;
mesh.material.needsUpdate = true; // required

[Mugen87]

but "Won't fix" means there is something defective.

According to my experience it's common to use this label for situations like that. In the sense of the reported "supposed faulty" behavior is not going to be changed.

[mrdoob]

One way would be by adding this here:

if ( material.map !== materialProperties.map ) {
    materialProperties.map = material.map;
    material.needsUpdate = true;
}

But then we would have to do the same for every property...

[Mugen87]

But then we would have to do the same for every property...

I have the feeling this will unnecessarily blow up the code. And make it more complex.

[EliasHasle]

Why not just pass the null value to texImage2d? Quoting the WebGL 1.0 specification:

If pixels is null, a buffer of sufficient size initialized to 0 is passed.

Edit: Sorry, that is only for the DataTexture version.