<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">InstancedMesh with simple geometry and multiple materials doesn't render correctly</p>
<p dir="auto">This is probably hardware specific or OS specific issue, because it is reproducible on my macOS machine, but not on my Windows machine</p>
<p dir="auto"><strong>To Reproduce</strong></p>
<p dir="auto">Steps to reproduce the behavior:</p>
<ol dir="auto">
<li>Create InstancedMesh with BoxGeometry and an array of MeshBasicMaterial</li>
<li>Render</li>
<li>See weird behavior</li>
</ol>
<p dir="auto">or alternatively check live example</p>
<p dir="auto"><em><strong>Code</strong></em></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    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) =&gt; {
      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);"><pre class="notranslate">    <span class="pl-k">const</span> <span class="pl-s1">materialA</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">MeshBasicMaterial</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">color</span>: <span class="pl-c1">0x0000ff</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">materialB</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">MeshBasicMaterial</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">color</span>: <span class="pl-c1">0xff0000</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">boxG</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">BoxGeometry</span><span class="pl-kos">(</span><span class="pl-c1">10</span><span class="pl-kos">,</span> <span class="pl-c1">10</span><span class="pl-kos">,</span> <span class="pl-c1">10</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">boxG</span><span class="pl-kos">.</span><span class="pl-c1">faces</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">face</span><span class="pl-kos">,</span> <span class="pl-s1">i</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-s1">face</span><span class="pl-kos">.</span><span class="pl-c1">materialIndex</span> <span class="pl-c1">=</span> <span class="pl-s1">i</span> <span class="pl-c1">%</span> <span class="pl-c1">2</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">const</span> <span class="pl-s1">mesh</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">InstancedMesh</span><span class="pl-kos">(</span><span class="pl-s1">boxG</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">materialA</span><span class="pl-kos">,</span> <span class="pl-s1">materialB</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">dummy</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Object3D</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">dummy</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-c1">-</span><span class="pl-c1">20</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">-</span><span class="pl-c1">20</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">dummy</span><span class="pl-kos">.</span><span class="pl-en">updateMatrix</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">mesh</span><span class="pl-kos">.</span><span class="pl-en">setMatrixAt</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">dummy</span><span class="pl-kos">.</span><span class="pl-c1">matrix</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">mesh</span><span class="pl-kos">.</span><span class="pl-c1">instanceMatrix</span><span class="pl-kos">.</span><span class="pl-c1">needUpdate</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
    <span class="pl-s1">scene</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">mesh</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><em><strong>Live example</strong></em></p>
<p dir="auto"><a href="https://jsfiddle.net/khjownq1/4/" rel="nofollow">https://jsfiddle.net/khjownq1/4/</a></p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">Code from <em>Code</em> section should produce a box with red and blue faces</p>
<p dir="auto"><strong>Screenshots</strong></p>
<p dir="auto">initial position of camera<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/36445024/101920201-94c95b00-3bdc-11eb-8b61-3f29b0856165.png"><img width="561" alt="Screenshot 2020-12-11 at 16 01 41" src="https://user-images.githubusercontent.com/36445024/101920201-94c95b00-3bdc-11eb-8b61-3f29b0856165.png" style="max-width: 100%;"></a></p>
<p dir="auto">when rotated there is some weirdness<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/36445024/101920228-9c88ff80-3bdc-11eb-8941-60a819a6c4ae.png"><img width="575" alt="Screenshot 2020-12-11 at 18 11 37" src="https://user-images.githubusercontent.com/36445024/101920228-9c88ff80-3bdc-11eb-8941-60a819a6c4ae.png" style="max-width: 100%;"></a></p>
<p dir="auto">gif with scene rotation<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/36445024/101921209-cabb0f00-3bdd-11eb-810b-1e9d28ff6b8d.gif"><img src="https://user-images.githubusercontent.com/36445024/101921209-cabb0f00-3bdd-11eb-810b-1e9d28ff6b8d.gif" alt="Screen Recording 2020-12-11 at 17 49 43" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Platform:</strong></p>
<ul dir="auto">
<li>Device: Desktop<br>
MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)<br>
Processor 2,3 GHz Dual-Core Intel Core i5<br>
Memory 8 GB 2133 MHz LPDDR3<br>
Graphics Intel Iris Plus Graphics 640 1536 MB</li>
<li>OS: MacOS Catalina version 10.15.6</li>
<li>Browser:<br>
Google Chrome Version 87.0.4280.88<br>
Firefox 82.0.3 (64-bit)<br>
Safari Version 14.0<br>
(identical behavior)</li>
<li>Three.js version: r123</li>
</ul>
<p dir="auto"><strong>Note:</strong><br>
It works as expected on Windows machine</p>
<ul dir="auto">
<li>Device: Desktop</li>
<li>OS: Windows 10 64-bit</li>
<li>Browser: Google Chrome Version 87.0.4280.88</li>
<li>Three.js version: r123</li>
</ul>
<p dir="auto">screenshot of expected behavior<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/36445024/101921775-6b113380-3bde-11eb-89fa-a25f6efb9f13.PNG"><img src="https://user-images.githubusercontent.com/36445024/101921775-6b113380-3bde-11eb-89fa-a25f6efb9f13.PNG" alt="Capture" style="max-width: 100%;"></a></p>
<p dir="auto">macOS and iOS seems to have an issue drawing instanced geometries with multiple materials. I am unsure whether this is an issue in Three.js or if the problem lies deeper than that.</p>
<p dir="auto">Some older macbooks does not display the faulty behavior but I have limited access to different hardware to test on, so I am not sure exactly which generations are affected. I have tested on Safari and Chrome on MacOS and iOS.</p>
<p dir="auto">Correct render on Linux (Chrome) <a href="https://ibb.co/Y0x0w1F" rel="nofollow">image</a><br>
Faulty render on Macbook Air (Chrome) <a href="https://ibb.co/DGjf4XN" rel="nofollow">image</a></p>
<p dir="auto">Live example <a href="https://codepen.io/AnotherHermit/pen/GVBPQw" rel="nofollow">codepen</a></p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r107</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them (probably)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Safari</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> iOS</li>
</ul>