Three.js: MaterialLoader changes transparent to true when alphaMap present

[meliharvey]

Description of the problem

MaterialLoader changes the loaded material's transparent property to true if there is an alphaMap defined. This might be desirable when transparent is undefined so that transparent doesn't default to false. However, when transparent is explicitly defined as false in the material JSON, it should probably be recognized as false by MaterialLoader.

Here is the code from MaterialLoader.js

if ( json.alphaMap !== undefined ) {

    material.alphaMap = getTexture( json.alphaMap );
    material.transparent = true;

}

The following is a potential solution to this

if ( json.alphaMap !== undefined ) {

    material.alphaMap = getTexture( json.alphaMap );

    if (json.transparent !== undefined) {
        material.transparent = json.transparent;
    }
    else {
        material.transparent = true;
    }
}

This example shows why you might want to have transparent = false with an alphaMap. This material uses alphaTest to create sharp edges with the AlphaMap. If transparent = true, the edges start to fade and no longer look clean.

{
    "uuid": "9ebca7f1-90b0-49d2-8a87-94a7b381811f","type": "PointsMaterial",
    "color": 15728768,
    "size": 0.3,
    "sizeAttenuation": true,
    "alphaMap": "da9f3d50-e5d3-4384-a594-861c5ab02a6d",
    "transparent": false,
    "alphaTest": 0.5
}

Here is what the fix looks like when I test it. It provides the clean edges that you might want in a data visualization, for instance.

current (transparent=true):

proposed (transparent=false):

Three.js version

• [x] Dev
• [x] r113

Browser

• [x] All of them

OS

• [x] All of them

[meliharvey]

Actually this might be a better solution:

if ( json.alphaMap !== undefined ) {

    material.alphaMap = getTexture( json.alphaMap );

    if ( json.transparent === undefined ) material.transparent = true;

}

[WestLangley]

material.alphaMap = getTexture( json.alphaMap );
material.transparent = true;

That was added in #6509 and later copy-pasted from ObjectLoader to MaterialLoader.

I am inclined to think that MaterialLoader should load the material simply as it is defined in JSON.

What is imported should match what is exported.

[Mugen87]

The problem is that Material.transparent is only serialized if its value is true:

https://github.com/mrdoob/three.js/blob/421e6105525999e8d5dd716b9e0c2f9f18022c76/src/materials/Material.js#L254

With this in mind, the if statement in your code does not really have an effect. No matter what's in the JSON, Material.transparent will always be set to true if an alpha map is present.

I also think it's better if the line material.transparent = true; is just completely removed.

[meliharvey]

I agree that we should just remove material.transparent = true;. It doesn't seem to make sense to change transparent based on the presence of an alpha map.

To give some more context, I am creating an three.js JSON writer that explicitly states whether transparent is true or false. So I was expecting that the material would match the JSON that was loaded.

[WestLangley]

Exactly. If you export and then import, and don't get what you started with, then something is wrong.

Would you like to file a PR?

[meliharvey]

Sure I'll file a PR.