Issue 1:
Description of the problem

Hi - I'm working in a react-three-fiber project but I can reproduce the issue in threejs standalone.

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:

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 (<anonymous>)
at renderGl (web.js:81)
at web.js:100
at Map.forEach (<anonymous>)
at renderLoop (web.js:97)

I can reproduce the error (I took the dynamic instancedmesh example and added two boxes and ambient occlusion) :

https://jsfiddle.net/threedian/kLve6f1g/12/

Some other info/observations:

Similar issue reported here (with NormalPass instead of SSAOPass) where @drcmda thinks the issue might be in the post-processing code:

https://spectrum.chat/react-three-fiber/general/why-does-instancedmesh-not-allow-to-have-other-meshes-in-canvas~6a231bd5-3437-405c-97ed-7260cfc17bd7

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.

Appreciate any advice or nudges in the right direction

Thanks!

Three.js version

Dev

r115

r117

Browser

All of them

Chrome

Firefox (untested)

Internet Explorer (untested)

OS

All of them

Windows

macOS (untested)

Linux (untested)

Android (untested)

iOS (untested)

Issue 2:
Description of the problem

I'm having a problem where the InstancedMesh method setMatrixAt 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.

The following briefly illustrates:

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.

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.

A live example is available here:

jsfiddle (The problem is that you should see multiple boxes, but only 1 or 2 are visible, remove line 41 to fix)

Three.js version

Dev

r109

r108

Browser

All of them

Chrome

Firefox

Internet Explorer

OS

All of them

Windows

macOS

Linux

Android

iOS

Hardware Requirements (graphics card, VR Device, ...)

(Not applicable, as far as I know)