How to change line width in Shader

According to this demo:
https://threejs.org/examples/?q=line#webgl_custom_attributes_lines
it is possible to change the color of THREE.line, but can the same method by applied on changing the width of line? I can appoint gl_PointSize in shader to change point size, so I wonder if I can do the same thing on line. Thanks.

Hi!
You can find the answer in the three.js docs.

If you’re looking for fat lines, then have a look at these examples: three.js examples

I’ve read these documents, but I didn’t find the solution is related to shader. To be more specific, I need to appoint different width for multiple lines and merge them as one to improve the performance. I guess ShaderMaterial can help me on it. Line2 did have effective lineWidth, but I don’t know how to merge them together as one.

Pheww… :sweat_smile: I’ve got something working with fat lines, but it’s a very rough example, not the ultimate solution.

You can modify line’s material to make it able to process individual width for each line segment, having an additional instanced buffer attribute.

Example:

Picture:

3 Likes

THANK YOU from the bottom of my heart :100: :+1: While I searched on Internet for hours with no clue, your answer provides me new idea on how to accomplish it.

You’re welcome :handshake: :beers:

1 Like