Problem with using InstancedMesh, non-instanced meshes and SSAO together

[threedian]

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)

[Mugen87]

This is actually a duplicate of #17701. The renderer can only generate a single shader program for an overrideMaterial material. So depending on where the instanced mesh is positioned in the render list, the shader does work with normal meshes or with instanced ones.

[threedian]

Thanks - I did see that ticket/those tickets but assumed that was something different because in my example and in the react-three-fiber example the instances meshes and the non-instances mesh aren't sharing their materials, which is what I thought the linked issue was about.

I'll be honest though, my knowledge on this isn't great and I don't fully understand what's going on under the hood 😏

Could you suggest a workaround in the meantime to be able to have ambient occlusion, lots of instanced meshes and some non-instanced objects? Or is that not really viable until the issue you linked is resolved? So the only solution for me would be to avoid instancing for now? Thanks for your help btw, and all your contributions to this project, I've learnt a lot from your posts

[Mugen87]

Unfortunately, you can't fix this on app level as long as you use InstancedMesh. It's an internal issue of the engine.

[threedian]

Understood, thank you