# Problem with multiple materials for InstancedMesh

**URL:** <https://discourse.threejs.org/t/problem-with-multiple-materials-for-instancedmesh/21501>\
**Category:** Questions\
**Tags:** instanced-mesh\
**Created:** [December 11, 2020, 1:08pm UTC](https://discourse.threejs.org/t/problem-with-multiple-materials-for-instancedmesh/21501 "2020-12-11T13:08:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dmitry\_Mihaylov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dmitry_mihaylov/32/15083_2.png) [@Dmitry\_Mihaylov](https://discourse.threejs.org/u/Dmitry_Mihaylov)\
**Post date:** [December 11, 2020, 1:08pm UTC](https://discourse.threejs.org/t/problem-with-multiple-materials-for-instancedmesh/21501/1 "2020-12-11T13:08:46Z")

</div>

Hello  
I have a problem when creating InstancedMesh that has array of materials.

If I create InstancedMesh with one material like this, it works fine

```javascript
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const boxG = new THREE.BoxGeometry(10, 10, 10);

    const mesh = new THREE.InstancedMesh(boxG, material, 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);

```

When I try to create InstancedMesh with different materials for each face then it breaks.

```javascript
    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);

```

If I use simple Mesh in similar fashion then everything works fine

Checkout this demo

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/khjownq1/3/)**

Does InstancedMesh support an array of materials?

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [December 11, 2020, 2:32pm UTC](https://discourse.threejs.org/t/problem-with-multiple-materials-for-instancedmesh/21501/2 "2020-12-11T14:32:19Z")

</div>

It looks like your fiddle is working for me :

 ![Screenshot_4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/bfd5b443be924b4dcf650bc57c2e624aeb405985.png)

It may depend on hardware ? If so it would be useful to know some information about your system and browser.

---

<div class="post-metadata">

**Author:** ![Dmitry\_Mihaylov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dmitry_mihaylov/32/15083_2.png) [@Dmitry\_Mihaylov](https://discourse.threejs.org/u/Dmitry_Mihaylov)\
**Post date:** [December 11, 2020, 2:56pm UTC](https://discourse.threejs.org/t/problem-with-multiple-materials-for-instancedmesh/21501/3 "2020-12-11T14:56:42Z")

</div>

Thanks for reply  
It is very interesting  
I am using  
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  
or Firefox 82.0.3 (64-bit)  
or Safari Version 14.0  
(scene behave identical in these browsers)

Here is screenshot

 ![Screenshot 2020-12-11 at 16.01.41](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/75ba060369787502a699e6208aefa0df14fd870c.png)

And also video (it look strange when rotating scene)

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/b246dcb36665518ee1c5a01a24231a959625d88b.mov](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/b246dcb36665518ee1c5a01a24231a959625d88b.mov)

I also checked this on my Windows machine and yes, you right - it works fine  
Could this be an issue with OS?

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [December 11, 2020, 2:58pm UTC](https://discourse.threejs.org/t/problem-with-multiple-materials-for-instancedmesh/21501/4 "2020-12-11T14:58:25Z")

</div>

Yes this is weird…

In my opinion you should [file a bug on Github](https://github.com/mrdoob/three.js/issues)

Give all the information you sent here, including the pictures, videos and fiddle.

---

<div class="post-metadata">

**Author:** ![Dmitry\_Mihaylov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dmitry_mihaylov/32/15083_2.png) [@Dmitry\_Mihaylov](https://discourse.threejs.org/u/Dmitry_Mihaylov)\
**Post date:** [December 11, 2020, 3:31pm UTC](https://discourse.threejs.org/t/problem-with-multiple-materials-for-instancedmesh/21501/5 "2020-12-11T15:31:16Z")

</div>

Thanks a lot for your help  
I’ve created a bug report [https://github.com/mrdoob/three.js/issues/20882](https://github.com/mrdoob/three.js/issues/20882)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 11, 2020, 5:19pm UTC](https://discourse.threejs.org/t/problem-with-multiple-materials-for-instancedmesh/21501/6 "2020-12-11T17:19:56Z")

</div>

This is actually a Webkit bug:

> **[202522 – ANGLE instanced arrays fail conformance tests on macOS](https://bugs.webkit.org/show_bug.cgi?id=202522)**