InstancedMesh with multiple materials looks broken

Describe the bug

InstancedMesh with simple geometry and multiple materials doesn’t render correctly

This is probably hardware specific or OS specific issue, because it is reproducible on my macOS machine, but not on my Windows machine

To Reproduce

Steps to reproduce the behavior:

1. Create InstancedMesh with BoxGeometry and an array of MeshBasicMaterial
2. Render
3. See weird behavior

or alternatively check live example

Code

    const materialA = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    const materialB = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const boxG = new THREE.BoxGeometry(10, 10, 10);
    boxG.faces.forEach((face, i) => {
      face.materialIndex = i % 2;
    });

    const mesh = new THREE.InstancedMesh(boxG, [materialA, materialB], 1);
    const dummy = new THREE.Object3D();
    dummy.position.set(-20, 0, -20);
    dummy.updateMatrix();
    mesh.setMatrixAt(0, dummy.matrix);
    mesh.instanceMatrix.needUpdate = true;
    scene.add(mesh);

Live example

https://jsfiddle.net/khjownq1/4/

Expected behavior

Code from Code section should produce a box with red and blue faces

Screenshots

initial position of camera

when rotated there is some weirdness

gif with scene rotation

Platform:

• Device: Desktop MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports) Processor 2,3 GHz Dual-Core Intel Core i5 Memory 8 GB 2133 MHz LPDDR3 Graphics Intel Iris Plus Graphics 640 1536 MB
• OS: MacOS Catalina version 10.15.6
• Browser: Google Chrome Version 87.0.4280.88 Firefox 82.0.3 (64-bit) Safari Version 14.0 (identical behavior)
• Three.js version: r123

Note: It works as expected on Windows machine

• Device: Desktop
• OS: Windows 10 64-bit
• Browser: Google Chrome Version 87.0.4280.88
• Three.js version: r123

screenshot of expected behavior

[mrdoob]

It does work? Surprising… 😅

[mrdoob]

I don’t think we can add multi-material support to InstancedMesh. Probably better to update docs and d.ts to clarify.