<h5 dir="auto">Description of the problem</h5>
<p dir="auto">Hi - I'm working in a react-three-fiber project but I can reproduce the issue in threejs standalone.</p>
<p dir="auto">Context: I have a scene with many objects loaded in via gltfLoader, some of which are instanced and some of which aren't. A background environment model, non-instanced, and lots of smaller objects instanced many times. It all works fine until I try to add ambient occlusion. If I just have the background model it works, and similarly if I only have instanced meshes and no background model it also works. It's the combination of the two where it fails with:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot read property 'isInterleavedBufferAttribute' of undefined
    at Object.get (three.module.js:10446)
    at setupVertexAttributes (three.module.js:17652)
    at WebGLRenderer.renderBufferDirect (three.module.js:17538)
    at renderObject (three.module.js:17976)
    at renderObjects (three.module.js:17957)
    at WebGLRenderer.render (three.module.js:17830)
    at SSAOPass.renderOverride (SSAOPass.js:231)
    at SSAOPass.render (SSAOPass.js:142)
    at EffectComposer.render (EffectComposer.js:91)
    at Object.current (Effects.js:22)
    at web.js:81
    at Array.forEach (&lt;anonymous&gt;)
    at renderGl (web.js:81)
    at web.js:100
    at Map.forEach (&lt;anonymous&gt;)
    at renderLoop (web.js:97)"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: Cannot read property 'isInterleavedBufferAttribute' of undefined
    at Object.get (three.module.js:10446)
    at setupVertexAttributes (three.module.js:17652)
    at WebGLRenderer.renderBufferDirect (three.module.js:17538)
    at renderObject (three.module.js:17976)
    at renderObjects (three.module.js:17957)
    at WebGLRenderer.render (three.module.js:17830)
    at SSAOPass.renderOverride (SSAOPass.js:231)
    at SSAOPass.render (SSAOPass.js:142)
    at EffectComposer.render (EffectComposer.js:91)
    at Object.current (Effects.js:22)
    at web.js:81
    at Array.forEach (&lt;anonymous&gt;)
    at renderGl (web.js:81)
    at web.js:100
    at Map.forEach (&lt;anonymous&gt;)
    at renderLoop (web.js:97)
</code></pre></div>
<p dir="auto">I can reproduce the error (I took the dynamic instancedmesh example and added two boxes and ambient occlusion) :<br>
<a href="https://jsfiddle.net/threedian/kLve6f1g/12/" rel="nofollow">https://jsfiddle.net/threedian/kLve6f1g/12/</a></p>
<p dir="auto">Some other info/observations:</p>
<ul dir="auto">
<li>
<p dir="auto">Similar issue reported here (with NormalPass instead of SSAOPass) where <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/drcmda/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/drcmda">@drcmda</a> thinks the issue might be in the post-processing code:<br>
<a href="https://spectrum.chat/react-three-fiber/general/why-does-instancedmesh-not-allow-to-have-other-meshes-in-canvas~6a231bd5-3437-405c-97ed-7260cfc17bd7" rel="nofollow">https://spectrum.chat/react-three-fiber/general/why-does-instancedmesh-not-allow-to-have-other-meshes-in-canvas~6a231bd5-3437-405c-97ed-7260cfc17bd7</a></p>
</li>
<li>
<p dir="auto">In the jsfiddle example I can fix the issue by creating my non-instanced meshes outside of the gltfLoader success callback. It's not immediately obvious to me how this helps me in my react-three-fiber project though so I've just listed it as an observation.</p>
</li>
</ul>
<p dir="auto">Appreciate any advice or nudges in the right direction</p>
<p dir="auto">Thanks!</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=""> r115</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r117</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"> All of them</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"> Firefox (untested)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer (untested)</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" checked=""> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS (untested)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux (untested)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android (untested)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS (untested)</li>
</ul>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">I'm having a problem where the InstancedMesh method <code class="notranslate">setMatrixAt</code> seems to fail (the matrix positions doesn't change visually) whenever I add another object with the same material object (not a clone) in the scene. No log/warning/errors are emitted.</p>
<p dir="auto">The following briefly illustrates:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    var geometry = new THREE.BoxBufferGeometry();
    var material = new THREE.MeshStandardMaterial( { roughness: 0, envMap: texture });
    var mesh1 = new THREE.Mesh( geometry, material );
    mesh1.position.set(0, 1, 0);
    scene.add( mesh1 ); // removing this line makes the instanced mesh work as intended
    mesh = new THREE.InstancedMesh( geometry, material, 9 ); // same material usage
    scene.add( mesh ); // This works and I can see both meshes in the scene.
    
    var dummy = new THREE.Object3D();
    dummy.position.set( 1, 5, 1 );
    dummy.updateMatrix();
    mesh.setMatrixAt( 0, dummy.matrix ); // Nope, doesn't work, it just stays where it's at.
    mesh.setMatrixAt( 1, dummy.matrix ); // Rotation seems to be applied, but position doesn't.
    // It looks like every instance is at the same place, but I don't know."><pre class="notranslate">    <span class="pl-k">var</span> <span class="pl-s1">geometry</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">BoxBufferGeometry</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">material</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">MeshStandardMaterial</span><span class="pl-kos">(</span> <span class="pl-kos">{</span> <span class="pl-c1">roughness</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">envMap</span>: <span class="pl-s1">texture</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">mesh1</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">Mesh</span><span class="pl-kos">(</span> <span class="pl-s1">geometry</span><span class="pl-kos">,</span> <span class="pl-s1">material</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">mesh1</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">0</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</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">mesh1</span> <span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// removing this line makes the instanced mesh work as intended</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">geometry</span><span class="pl-kos">,</span> <span class="pl-s1">material</span><span class="pl-kos">,</span> <span class="pl-c1">9</span> <span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// same material usage</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> <span class="pl-c">// This works and I can see both meshes in the scene.</span>
    
    <span class="pl-k">var</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">1</span><span class="pl-kos">,</span> <span class="pl-c1">5</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-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-c">// Nope, doesn't work, it just stays where it's at.</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">1</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-c">// Rotation seems to be applied, but position doesn't.</span>
    <span class="pl-c">// It looks like every instance is at the same place, but I don't know.</span></pre></div>
<p dir="auto">Note that if I use material.clone() at the instanced mesh declaration, the problem also goes away / is fixed, but now I have two materials, and I intend to have one for performance reasons.</p>
<p dir="auto">A live example is available here:</p>
<ul dir="auto">
<li><a href="https://jsfiddle.net/ghmrdk4z/4/" rel="nofollow">jsfiddle</a> (The problem is that you should see multiple boxes, but only 1 or 2 are visible, remove line 41 to fix)</li>
</ul>
<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" checked=""> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r109</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> r108</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"> All of them</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"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> 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" checked=""> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> 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"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>
<p dir="auto">(Not applicable, as far as I know)</p>