Geometry does not update if Material.wireframe === true

Describe the bug

When updating a geometry’s index buffer using setIndex the new geometry does not update if material.wireframe = true. It updates correctly if wireframe = false.

To Reproduce

• Create a mesh with a geometry and material with wireframe set to true
• Render the mesh once
• Change the geometry’s index buffer using setIndex
• Render the geometry again
• Geometry is not updated

Code

geometry = new THREE.PlaneBufferGeometry( 0.2, 0.2, 1, 1 ).toNonIndexed();    
material = new THREE.MeshBasicMaterial( { side: 2, wireframe: true } );

geometry.setIndex( [ 0, 1, 2 ] );
setTimeout( () => {
    
  geometry.setIndex( [ 3, 4, 5 ] );
    
}, 1000 );

Live example

https://jsfiddle.net/fqx1mp3a/

NOTE: Set wireframe to false to see the expected behavior (updated geometry renders).

Expected behavior

The geometry is rendered with the updated index buffer whether or not wireframe is true. Platform:

• Device: Desktop
• OS: Windows
• Browser: Chrome
• Three.js version: r123

[Mugen87]

Closing. As stated above using setIndex() multiple times to update the values of an index is a user error. The only valid approach is to update the existing index. If the range of data varies over time, it’s the responsibility of the application to allocated large enough buffers in the first place and use drawRange to define the effective drawing range of the geomtry.

[Mugen87]

It was planned to introduce BufferAttribute.dispose(). Since VAOs are used, however, it becomes much harder to introduce this feature, see https://github.com/mrdoob/three.js/pull/17063#issuecomment-737993363. So you actually have to work on geometry level.