Three.js: CylinderBufferGeometry with Multiple Materials fails (on Firefox)

[mhop1]

Bug on CylinderBufferGeometry with Multiple Materials (on Firefox)

Create a geometry using CylinderBufferGeometry. Then use in a mesh with 3 different materials for torso, top, and bottom.

In Firefox browser (v62, Win10) the mesh will not display properly with missing parts. Other browsers (Chrome, Edge, IE) all work correctly.

Originally seen with canvas textures but seems to be a problem even with the Normal material.

Regular original CylinderGeometry is fine. In the fiddle you can see the problem with the Buffer on the right cylinder:

• jsfiddle

Three.js version

• [ ] Dev
• [x] r96

Browser

• [ ] All of them
• [ ] Chrome
• [x] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them (?? not tried others)
• [x] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

[mrdoob]

Can't reproduce on Firefox v62 on MacOS.

Can you also share a screenshot so we can see what you mean with "fails"?

[mhop1]

It seems to vary. With the canvas textures, the torso was missing, the top and bottom were switched, and a chunk missing from them!

On the fiddle with Normal Material, it looks like this:

[Mugen87]

I'm also unable to reproduce with FF 62 and macOS.

[mrdoob]

I can reproduce on Firefox 62, Windows 10. Weird...

[mrdoob]

@mhop1 Do you mind filing a bug to Mozilla too?

[mhop1]

Reported to Firefox here:

https://bugzilla.mozilla.org/show_bug.cgi?id=1489761

[vyv03354]

Firefox 62.0.2 fixed this bug.