LineMaterial VS Line2NodeMaterial

[menghuaa]

### Description

hello, I found that the resolution used by LineMaterial vertexShader is (window.innerWidth, window.innerHeight).But the resolution used by LineNodeMaterial vertexNode is (viewport.z,viewport.w).The (viewport.z,viewport.w) is (window.innerWidth.mul(window.devicePixelRatio), window.innerHeight.mul(window.devicePixelRatio)). And the examples https://threejs.org/examples/?q=line#webgpu_lines_fat and https://threejs.org/examples/?q=line#webgl_lines_fat use the same linewidth, but the result is different

Screenshots

No response

Version

181

Device

Desktop

Browser

Chrome

OS

No response

[Mugen87]

To make LineSegments2 for WebGLRenderer match the WebGPU version, below line needs to be changed.

three.js/examples/jsm/lines/LineSegments2.js

Line 418 in ef887d4

this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w );

It should honor the pixel ratio. So:

this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w ); 
this.material.uniforms.resolution.value.multiplyScalar( renderer.getPixelRatio() );

@WestLangley I think the difference is that the WebGLRenderer version defines the line width in CSS pixels units whereas the WebGPU version uses physical pixel units (related #29347). I'm okay with keeping the difference but for a consistent line width across devices, isn't the latter one more correct?

[WestLangley]

For a consistent line width across devices, the units of line width should be logical CSS Pixels.

On a related note, changing renderer.devicePixelRatio should not alter the rendered width of the line. So in that regard, WebGPURenderer is not correct.

[menghuaa]

Hello, why does line2nodematerial not support transparency settings? And Does line2nodeMaterial currently not support clipping?@Mugen87 @WestLangley

[Mugen87]

Wide line materials have in general issues with transparency, see #23680 (comment).

[menghuaa]

Wide line materials have in general issues with transparency, see #23680 (comment).

Linematerial also has this issue, why doesn't line2nodematerial achieve transparency like linematerial? In this way, when I upgrade from WebGL to WebGPU, there will be fewer compatibility issues In my project, I extensively used transparent linematerials.

[Mugen87]

Wide lines are rendered with instanced line segments and using transparency can cause artifacts and the corners where the line segments meet. Hence, there was never an "official" support for transparent wide lines. I understand there are workaround but they have never been implemented in the examples.

[menghuaa]

Wide lines are rendered with instanced line segments and using transparency can cause artifacts and the corners where the line segments meet. Hence, there was never an "official" support for transparent wide lines. I understand there are workaround but they have never been implemented in the examples.

Can you provide an example of implementing line2nodeMaterial transparency effect? Also, can line2nodematerial support clipping?

[menghuaa]

I am upgrading a project based on WebGL to webGPU, but the backend still uses WebGL,(in some cases, using webGPU backend). Do you think this is feasible? Is the workload heavy?