Shader issue in WebGLBackend with WebXR when using Line2 and LineSegments2

[danrossi]

Description

I am trying to migrate the WebXR controller line to WebGPURenderer to also support linewidths and somehow drop off in opacity. There seems to be a shader compile issue when going into WebXR. It may not be liking the position and colors arrays given.

Error given

Error 0 - VALIDATE_STATUS false

Program Info Log: Vertex shader is not compiled.

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

Reproduction steps

1.Setup Line2 or LineSegments2
2. Launch into WebXR with the emulator, Rift, Quest etc
3. Shader compile error in the console will appear

Code

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

or

 const line = new Line2( );
 line.material.linewidth = 4;
 line.material.color.setHex(0xffffff);
 line.geometry.setPositions([ 10, 10, -10, 0, 0, -0.8 ]);
line.geometry.setColors([ 0.5, 0.5, 0.5, 0, 0, 0 ]);

Live example

• LineSegments2
• Line2

Screenshots

No response

Version

r176

Device

Desktop

Browser

Chrome

OS

Windows

[danrossi]

I've debugged the generated shader. And cameraProjectionMatrix doesn't exist yet because it's set on the trimSegment method.

https://github.com/mrdoob/three.js/blob/dev/src/materials/nodes/Line2NodeMaterial.js#L148

#version 300 es

// Three.js r177dev - Node System


// extensions


// precision

precision highp float;
precision highp int;
precision highp sampler2D;
precision highp sampler3D;
precision highp samplerCube;
precision highp sampler2DArray;

precision highp usampler2D;
precision highp usampler3D;
precision highp usamplerCube;
precision highp usampler2DArray;

precision highp isampler2D;
precision highp isampler3D;
precision highp isamplerCube;
precision highp isampler2DArray;

precision lowp sampler2DShadow;
precision lowp sampler2DArrayShadow;
precision lowp samplerCubeShadow;


// uniforms

layout( std140 ) uniform vertex_cameraIndex {
	uint v_u_cameraIndex;
};

layout( std140 ) uniform vertex_object {
	mat4 v_nodeUniform5;
	vec4 v_nodeUniform6;
	float v_nodeUniform7;
};
uniform NodeBuffer_1028 {
	mat4 buffer1028[2];
};

uniform NodeBuffer_1021 {
	mat4 buffer1021[2];
};


// varyings
uint v_cameraIndex;
out vec2 nodeVarying1;
out vec3 nodeVarying2;
out vec3 nodeVarying3;
out vec3 nodeVarying4;


// attributes
layout( location = 0 ) in vec2 uv;
layout( location = 1 ) in vec3 position;
layout( location = 2 ) in vec3 instanceColorStart;
layout( location = 3 ) in vec3 instanceColorEnd;
layout( location = 4 ) in vec3 instanceStart;
layout( location = 5 ) in vec3 instanceEnd;


// codes
vec4 trimSegment ( vec4 start, vec4 end ) {

	mat4 cameraProjectionMatrix;

	cameraProjectionMatrix = buffer1028[ v_cameraIndex ];

	return vec4( mix( start.xyz, end.xyz, ( ( ( ( cameraProjectionMatrix[ 3u ][ 2u ] * -0.5 ) / cameraProjectionMatrix[ 2u ][ 2u ] ) - start.z ) / ( end.z - start.z ) ) ), end.w );

}



void main() {

	// vars
	mat4 cameraViewMatrix;
	mat4 modelViewMatrix;
	vec4 start;
	vec4 end;
	vec4 nodeVar4;
	vec4 nodeVar5;
	vec2 nodeVar6;
	float nodeVar7;
	vec4 nodeVar8;
	vec2 offset;
	vec2 nodeVar9;
	vec4 nodeVar10;

	// transforms
	

	// flow
	// code

	v_cameraIndex = v_u_cameraIndex;
	nodeVarying1 = uv;
	nodeVarying2 = position;
	nodeVarying3 = instanceColorStart;
	nodeVarying4 = instanceColorEnd;
	cameraViewMatrix = buffer1021[ v_cameraIndex ];
	modelViewMatrix = ( cameraViewMatrix * v_nodeUniform5 );
	start = ( modelViewMatrix * vec4( instanceStart, 1.0 ) );
	end = ( modelViewMatrix * vec4( instanceEnd, 1.0 ) );

	if ( ( cameraProjectionMatrix[ 2u ][ 3u ] == -1.0 ) ) {


		if ( ( ( start.z < 0.0 ) && ( end.z > 0.0 ) ) ) {

			end = trimSegment( start, end );
			

		} else {


			if ( ( ( end.z < 0.0 ) && ( start.z >= 0.0 ) ) ) {

				start = trimSegment( end, start );
				

			}

			

		}

		

	}

	nodeVar4 = ( cameraProjectionMatrix * end );
	nodeVar5 = ( cameraProjectionMatrix * start );
	nodeVar6 = ( ( nodeVar4.xyz / vec3( nodeVar4.w ) ).xy - ( nodeVar5.xyz / vec3( nodeVar5.w ) ).xy );
	nodeVar7 = ( v_nodeUniform6.z / v_nodeUniform6.w );
	nodeVar6.x = ( nodeVar6.x * nodeVar7 );
	nodeVar6 = normalize( nodeVar6 );
	nodeVar8 = vec4( 0.0, 0.0, 0.0, 1.0 );
	offset = vec2( nodeVar6.y, ( - nodeVar6.x ) );
	nodeVar6.x = ( nodeVar6.x / nodeVar7 );
	offset.x = ( offset.x / nodeVar7 );

	if ( ( position.x < 0.0 ) ) {

		nodeVar9 = ( - offset );

	} else {

		nodeVar9 = offset;

	}

	offset = nodeVar9;

	if ( ( position.y < 0.0 ) ) {

		offset = ( offset - nodeVar6 );
		

	} else {


		if ( ( position.y > 1.0 ) ) {

			offset = ( offset + nodeVar6 );
			

		}

		

	}

	offset = ( offset * vec2( v_nodeUniform7 ) );
	offset = ( offset / vec2( v_nodeUniform6.w ) );

	if ( ( position.y < 0.5 ) ) {

		nodeVar10 = nodeVar5;

	} else {

		nodeVar10 = nodeVar4;

	}

	nodeVar8 = nodeVar10;
	offset = ( offset * vec2( nodeVar8.w ) );
	nodeVar8 = ( nodeVar8 + vec4( offset, 0.0, 0.0 ) );

	// result
	gl_Position = nodeVar8;

	gl_PointSize = 1.0;

}