Three.js: InstancedBufferGeometry: second material cannot read attributes on Intel GPU

[govizlora]

Description of the problem

I created an InstancedBufferGeometry based on an ExtrudeBufferGeometry, and I wanted to assign different ShaderMaterial for the face and the side.

It worked on the discrete GPU on MacBook, but on MacBooks with only the integrated Intel GPU (or force use the intel GPU using gfxcardstatus), the side material failed to read values from the InstancedBufferAttribute.

Live example: jsfiddle
In this example, both the face and the side shares the same ShaderMaterial and they should all be red.

• On discrete GPU it looks correct:
  

• But on intel GPU, the side cannot read the offset and color InstancedBufferAttribute:
  

Three.js version

• [ ] Dev
• [x] r104
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Safari

OS

• [ ] All of them
• [ ] Windows
• [x] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

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

Intel HD Graphics 630, Intel Iris Pro, Intel Iris Plus Graphics 650

[Mugen87]

Please execute the WebGL conformance test suite and share the failed tests in this thread:

https://www.khronos.org/registry/webgl/sdk/tests/webgl-conformance-tests.html

This is (similar to #16334) probably a hardware or driver related issue. In such cases, three.js is often not able to provide a solution or workaround. Hence, it makes more sense to report such problems directly to the GPU vendor or the a browser's issue tracker (e.g. https://bugs.chromium.org/p/v8/issues/list). If they can confirm a driver issue, they'll redirect it to Intel.

BTW: Your fiddles (this one and the one from #16334) run fine on my iMac with AMD graphics.

[Mugen87]

Closing. Please report the issue to a browser vendor or directly to Intel.