WebGLRenderer alpha GLTFLoader texture issue

[enijar]

Describe the bug

There is an issue with some incorrect texture colours when loading a GLTF model via GLTFLoader when WebGLRenderer is instantiated with alpha set to true.

To Reproduce

Steps to reproduce the behavior:

Instantiate WebGLRenderer with alpha set to false.

Code

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

const renderer = new THREE.WebGLRenderer({
  // ...
  antialias: true,
  alpha: true // this is what causes the texture colour issue
});

const width = 1024;
const height = 768;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

const ambientLight = new THREE.AmbientLight();
scene.add(ambientLight);

// Load model and add to scene
const loader = new GLTFLoader();
loader.load("model.gltf", (gltf) => {
  scene.add(gltf.scene);
});

// Render scene
(function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
})();

Live Demos

alpha: true	alpha: false
https://codesandbox.io/s/pedantic-cloud-vgppt?file=/src/index.js	https://codesandbox.io/s/dry-http-fdykp?file=/src/index.js

Below is the output where WebGLRenderer has been instantiated with alpha set to true and false

alpha: true	alpha: false

Expected behavior

I believe setting the alpha to true or false shouldn't have an effect on how solid textures are rendered. The expected behaviour would be for textures to render consistently regardless of the alpha setting.

[donmccurdy]

This sounds like #15483. It was fixed at one point in #18631, but we had to revert that fix because it caused additional issues. I'll close this issue as a duplicate of the first, but feel free to comment on either of these.

A workaround is to set material.map.format to RGB, for textures where you're sure the alpha channel is not needed:

model.traverse((node) => {
  if (node.material && node.material.map && !node.material.transparent && !node.material.alphaTest) {
    node.material.map.format = THREE.RGBFormat;
  }
});