# How to change line width in Shader

**URL:** <https://discourse.threejs.org/t/how-to-change-line-width-in-shader/27658>\
**Category:** Questions\
**Tags:** lines, shaders\
**Created:** [June 30, 2021, 7:35am UTC](https://discourse.threejs.org/t/how-to-change-line-width-in-shader/27658 "2021-06-30T07:35:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Blazar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/blazar/32/18555_2.png) [@Blazar](https://discourse.threejs.org/u/Blazar)\
**Post date:** [June 30, 2021, 7:35am UTC](https://discourse.threejs.org/t/how-to-change-line-width-in-shader/27658/1 "2021-06-30T07:35:47Z")

</div>

According to this demo:  
[https://threejs.org/examples/?q=line#webgl\_custom\_attributes\_lines](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.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 30, 2021, 7:48am UTC](https://discourse.threejs.org/t/how-to-change-line-width-in-shader/27658/2 "2021-06-30T07:48:50Z")

</div>

Hi!  
You can find the answer in the [three.js docs](https://threejs.org/docs/index.html?q=linebasicma#api/en/materials/LineBasicMaterial.linewidth).

If you’re looking for fat lines, then have a look at these examples: [three.js examples](https://threejs.org/examples/?q=fat#webgl_lines_fat)

---

<div class="post-metadata">

**Author:** ![Blazar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/blazar/32/18555_2.png) [@Blazar](https://discourse.threejs.org/u/Blazar)\
**Post date:** [June 30, 2021, 8:13am UTC](https://discourse.threejs.org/t/how-to-change-line-width-in-shader/27658/3 "2021-06-30T08:13:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 30, 2021, 9:29am UTC](https://discourse.threejs.org/t/how-to-change-line-width-in-shader/27658/4 "2021-06-30T09:29:05Z")

</div>

Pheww… 😅 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:  
https://codepen.io/prisoner849/embed/preview/wvdBerm?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=wvdBerm

Picture:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/e/2e21fb099ed81ef3d63012ba05e5bbcf6dea42f2.png)

---

<div class="post-metadata">

**Author:** ![Blazar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/blazar/32/18555_2.png) [@Blazar](https://discourse.threejs.org/u/Blazar)\
**Post date:** [June 30, 2021, 9:46am UTC](https://discourse.threejs.org/t/how-to-change-line-width-in-shader/27658/5 "2021-06-30T09:46:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 30, 2021, 11:05am UTC](https://discourse.threejs.org/t/how-to-change-line-width-in-shader/27658/6 "2021-06-30T11:05:55Z")

</div>

You’re welcome 🤝 🍻