WebGPURenderer: errors thrown rendering line segments

[WestLangley]

Description

I get the following error if AxesHelper is rendered prior to VertexNormalsHelper (WebGPU backend only):

Reproduction steps

See below.

Code

In webgpu_materials_matcap.html, add these lines in the loader call-back:

// Switch the order of these two lines and the scene renders correctly.

scene.add( new THREE.AxesHelper( 5 ) );

scene.add( new VertexNormalsHelper( mesh, 0.1, 0xff0000 ) );

Also include

import { VertexNormalsHelper } from 'three/addons/helpers/VertexNormalsHelper.js';

Live example

https://jsfiddle.net/62tzex3v/3/

Screenshots

No response

Version

r167 dev

Device

Desktop

Browser

Chrome

OS

MacOS

[cmhhelgeson]

TLDR: Did some testing and VertexNormalsHelper is rendering using AxesHelper pipeline and vertex state.

Maybe somebody's already found this, but here were the modifications I used to test the code.

1. Only add the helpers to the scene without the mesh.
2. Add a suffix to the renderPipeline name with the number of vertex buffers it sets during a draw call.

Axes Helper uses two vertex buffers, one for positions and one for color. It's pipeline is named renderPipeline_2.

VertexNormalsHelper uses just one vertex buffer for positions. It's pipeline is named renderPipeline_1.

When AxesHelper is added to a scene before VertexNormalsHelper, it's pipeline is run beforehand. So renderPipeline_2 first then renderPipeline_1.

3. At the end of each WebGPUBackend.draw call, add this code to unset the vertex buffers.

for ( let i = 0; i < vertexBuffers.length; i ++ ) {

     passEncoderGPU.setVertexBuffer( i, null );

}
		

And voila, the inciting problem, the render pass being used to render the VertexNormalsHelper is still using the Axes Helper render pipeline ( i.e "renderPipeline_2"), since it expects vertex buffer slot 1, the second vertex buffer, to be set.

The strange thing is, when logging the code, all the buffers and pipelines seem to be passed and configured in the correct order. The label render pipelines let us conditionally check which pipelines are being set right before the setPipeline call, yet the pipelines appear to be in the correct order, and with the correct number of vertex buffers to boot.

[Mugen87]

For explanation: An error in a cache key computation produces a wrong cache key. That means the wrong node builder was selected returning the wrong shaders for the render object.