# Line between faces becomes invisible or sometimes dashed-line

**URL:** <https://forum.babylonjs.com/t/line-between-faces-becomes-invisible-or-sometimes-dashed-line/47043>\
**Category:** Questions\
**Tags:** mesh\
**Created:** [January 8, 2024, 2:53am UTC](https://forum.babylonjs.com/t/line-between-faces-becomes-invisible-or-sometimes-dashed-line/47043 "2024-01-08T02:53:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Richardo](https://avatars.discourse-cdn.com/v4/letter/r/eb8c5e/32.png) [@Richardo](https://forum.babylonjs.com/u/Richardo)\
**Post date:** [January 8, 2024, 2:53am UTC](https://forum.babylonjs.com/t/line-between-faces-becomes-invisible-or-sometimes-dashed-line/47043/1 "2024-01-08T02:53:46Z")

</div>

Hi guys, I’ve come up with a question maybe related to z-fighting or something.  
When I draw a line at the exact location where the connection edge of any two faces should be, the line just becomes invisible or very hard to see(becomes dashed line sometime). See the picture below:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/e/4ea34e6b0541489194ccf1b6244e72a350a81aa2.jpeg)  
As you can see, the black line locates at the connection edge between these two boxes. In zone1, you could notice that the line becomes thinner and lighter strongly. In zone2, the line just vanished.

While sometimes this line could be dashed line between two faces(as you could see in zone1 below):

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/5/557f93fffad9b288162c5b3b08defd39be475c70.png)  
I assume that the problem is caused by z-fighting or something, as the line shares the exact same depth as the connection edges of two faces of those boxes.

How can I make such line become extirely visible **without** changing the vertex coordinates of the line or boxes, and **without** changing the renderingGroupId(I need them to share the same renderingGroupId)? One of my friend advised me to use methods like glPolygonOffset, but that is the solution for OpenGL, not us.

Hope to hear from you guys soon! Thanks!

---

<div class="post-metadata">

**Author:** ![Richardo](https://avatars.discourse-cdn.com/v4/letter/r/eb8c5e/32.png) [@Richardo](https://forum.babylonjs.com/u/Richardo)\
**Post date:** [January 8, 2024, 2:54am UTC](https://forum.babylonjs.com/t/line-between-faces-becomes-invisible-or-sometimes-dashed-line/47043/2 "2024-01-08T02:54:52Z")

</div>

Oh here is the PG example I forgot to push forward! You can try to open it here!

> **[Babylon.js Playground](https://playground.babylonjs.com/#IBT3X0)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 8, 2024, 10:32am UTC](https://forum.babylonjs.com/t/line-between-faces-becomes-invisible-or-sometimes-dashed-line/47043/3 "2024-01-08T10:32:20Z")

</div>

You can draw the line without taking into account the depth buffer by setting the `material.depthFunction` to `ALWAYS`:

> **[Babylon.js Playground](https://playground.babylonjs.com/#IBT3X0%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Richardo](https://avatars.discourse-cdn.com/v4/letter/r/eb8c5e/32.png) [@Richardo](https://forum.babylonjs.com/u/Richardo)\
**Post date:** [January 8, 2024, 12:46pm UTC](https://forum.babylonjs.com/t/line-between-faces-becomes-invisible-or-sometimes-dashed-line/47043/4 "2024-01-08T12:46:04Z")

</div>

thanks for your advice! My bad I did not make myself clear! I still need the depth buffer count, which means that when the line is behind the box I really need the hidden part to be invisible!

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/2/526c4a973d30fbc506005335ed50a23eef691fb1.png)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 8, 2024, 6:30pm UTC](https://forum.babylonjs.com/t/line-between-faces-becomes-invisible-or-sometimes-dashed-line/47043/6 "2024-01-08T18:30:23Z")

</div>

In that case, `material.zOffset` would be the way to go, but it does not work for lines…

So, you would have to replace the line by a thin tube or a thin cylinder, to be able to set something like `material.zOffset = -2` for eg.

---

<div class="post-metadata">

**Author:** ![Richardo](https://avatars.discourse-cdn.com/v4/letter/r/eb8c5e/32.png) [@Richardo](https://forum.babylonjs.com/u/Richardo)\
**Post date:** [January 10, 2024, 8:09am UTC](https://forum.babylonjs.com/t/line-between-faces-becomes-invisible-or-sometimes-dashed-line/47043/7 "2024-01-10T08:09:05Z")

</div>

Thanks! Though your method is not available for me (can’t alter the line), but it inspired me that I could set all the material of the boxes and set their zOffset = 1, then the depth of all faces just went behind the line.
