Normal is not correct when switching Variant in webgl_loader_gltf_variants

Describe the bug

I tried the sample KHR_materials_variants extension of glTF. However, when I switch the Variant from midnight to beach, Normal does not seem to be correct.

To Reproduce

1. Go to https://threejs.org/examples/?q=variant#webgl_loader_gltf_variants
2. Switch the Variant from midnight to beach
3. Look at the logo on the side of the shoe.

Expected behavior

Since this model refers to the same normal.jpg, the expected behavior is that the unevenness will not change.

Screenshots

Variant	image
midnight
beach

Platform:

• Device: MacBook Air
• OS: Windows 10 (BootCamp)
• Browser: Chrome 87.0.4280.141
• Three.js version: r124

[elalish]

Well, I gave it a try and no such luck. assignFinalMaterial negates normalScale.y every time, so it ends up switching back and forth as you swap back to already-loaded variants. I think that line needs to move inside the cached ClonedMaterial block. I’ll work up a PR.

[donmccurdy]

As @Mugen87 points out, the assignFinalMaterial would normally do some adjustments to materials based on the mesh they’re attached to, as we need to know whether the geometry has tangents or not. See https://github.com/mrdoob/three.js/issues/11438#issuecomment-501942328. Variants are applied well after the model was loaded, outside of GLTFLoader, and the example wouldn’t know about these details.

Ideally this model would contain vertex tangents… Blender can generate them, but won’t read/write the variants, so unfortunately that’s difficult to add at the moment. With vertex tangents this would not be an issue.

Perhaps https://github.com/mrdoob/three.js/pull/20789 would also help fix this, but I’m still worried about several parts of that.