Migrating Line to webgpu LineSegments2 for XR controller

Questions
1

I am trying to migrate the WebXR controller Line to LineSegments2 to be able to have a line wider than 1 pixel. I am running into a shader compilation issue with the migration. It doesnt like the position array. Any ideas

const line = new LineSegments2( );
line.geometry.setPositions([ 0, 0, 0, 0, 0, -0.8 ]);
line.geometry.setColors([ 0.5, 0.5, 0.5, 0, 0, 0 ]);
line.material.linewidth = 4;
line.computeLineDistances();
line.scale.set( 1, 1, 1 );

From this

geometry = new THREE.BufferGeometry();
						geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, -0.8 ], 3 ) );
						geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );


material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );

return new THREE.Line( geometry, material );

produces this


ERROR: 0:107: 'cameraProjectionMatrix' : undeclared identifier
ERROR: 0:107: 'expression' :  left of '[' is not of type array, matrix, or vector 
ERROR: 0:107: 'expression' :  left of '[' is not of type array, matrix, or vector 
ERROR: 0:133: 'cameraProjectionMatrix' : undeclared identifier
ERROR: 0:134: 'cameraProjectionMatrix' : undeclared identifier
2

Do you have this issue with LineMaterial (not LineBasicMaterial)?

3

they can’t do linewidth. It’s for the WebGPURenderer so trying to migrate to those functions. Its confusing there is a few methods. LineSegments2 which creates a default material. The other is Line2 which has the same result. I think it doesnt like that array as inputs. This might need to be setup a different way

line.geometry.setPositions([ 0, 0, 0, 0, 0, -0.8 ]);
4

From what I see so far, the problem highly likely comes from material, not geometry. That’s why I asked which one you use.

5

It’s a linenodematerial. I’ll try and create a few tests

1 Like
6

I might have found a bug. I need it to drop off in opacity for a VR controller line also somehow.