# Dashed grid not looking great

**URL:** <https://discourse.threejs.org/t/dashed-grid-not-looking-great/65530>\
**Category:** Questions\
**Tags:** line-dashed-material\
**Created:** [May 14, 2024, 12:57pm UTC](https://discourse.threejs.org/t/dashed-grid-not-looking-great/65530 "2024-05-14T12:57:32Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ads4](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ads4/32/46763_2.png) [@ads4](https://discourse.threejs.org/u/ads4)\
**Post date:** [May 14, 2024, 12:57pm UTC](https://discourse.threejs.org/t/dashed-grid-not-looking-great/65530/1 "2024-05-14T12:57:32Z")

</div>

Hello,

I created a dashed grid, but when we zoom out, I notice the grid behaving strangely and the dashes not rendering well. Here’s an example along the red line:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/f/2f3a479aeebf26481f191bff1e63f5a1841e5ede.png)

Here’s the source code: [https://codepen.io/ads4/pen/gOJpmyX](https://codepen.io/ads4/pen/gOJpmyX)

Any help is appreciated. Thanks!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 14, 2024, 2:26pm UTC](https://discourse.threejs.org/t/dashed-grid-not-looking-great/65530/2 "2024-05-14T14:26:18Z")

</div>

This kind of effect is inevitable considering how the dashed material is implemented.

How about you switch to a normal continuous line when zooming out? Granted, this won’t work if you are close to the ground and look towards the horizon but for a typical top-down view it should work.

---

<div class="post-metadata">

**Author:** ![ads4](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ads4/32/46763_2.png) [@ads4](https://discourse.threejs.org/u/ads4)\
**Post date:** [May 14, 2024, 2:39pm UTC](https://discourse.threejs.org/t/dashed-grid-not-looking-great/65530/3 "2024-05-14T14:39:41Z")

</div>

Thank you for your answer.  
Even when I get closer I have this weird laggy effect moving. Is there really no alternative to render a dashed grid?  
My project is about recoding an old software from scratch with new technologies, it can display dashed grid correctly using OpenGL:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/f/6f03b711f210a6347db67f437b1ead27839d8550.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 14, 2024, 4:27pm UTC](https://discourse.threejs.org/t/dashed-grid-not-looking-great/65530/4 "2024-05-14T16:27:44Z")

</div>

How does your previous OpenGL app rendered dashed lines? Can you share some information about the library or the used material/technique?

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [May 14, 2024, 4:49pm UTC](https://discourse.threejs.org/t/dashed-grid-not-looking-great/65530/5 "2024-05-14T16:49:54Z")

</div>

If you do not hate dashed textures, here is one:

[https://codepen.io/boytchev/full/GRaJMbz](https://codepen.io/boytchev/full/GRaJMbz)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/e/9eb109a3cb80cc22934affbad346ad4df67fc516.png)](https://codepen.io/boytchev/full/GRaJMbz)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [May 14, 2024, 9:11pm UTC](https://discourse.threejs.org/t/dashed-grid-not-looking-great/65530/6 "2024-05-14T21:11:39Z")

</div>

I’ll throw in this neat one made by Evan Wallace which also gets into the interesting topic of fwidth:

[https://madebyevan.com/shaders/grid/](https://madebyevan.com/shaders/grid/)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/8/08e4aea38d0cd1dca4561f7de15213c06b8a669c.jpeg)

---

<div class="post-metadata">

**Author:** ![ads4](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ads4/32/46763_2.png) [@ads4](https://discourse.threejs.org/u/ads4)\
**Post date:** [May 15, 2024, 6:54am UTC](https://discourse.threejs.org/t/dashed-grid-not-looking-great/65530/7 "2024-05-15T06:54:28Z")

</div>

@Mugen87 After reviewing the code of the old software, I noticed that it draws the grid using lines with glLineStipple. Then, we have two for loops drawing each line of the grid. That’s not the most optimal way of drawing a grid.  
I’m going to implement the texture technique suggested by @PavelBoytchev  
Thank you really much for helping!

---

<div class="post-metadata">

**Author:** ![ads4](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ads4/32/46763_2.png) [@ads4](https://discourse.threejs.org/u/ads4)\
**Post date:** [May 15, 2024, 7:12am UTC](https://discourse.threejs.org/t/dashed-grid-not-looking-great/65530/8 "2024-05-15T07:12:14Z")

</div>

Sorry for bothering again, but how can I change the color of the grid? Thanks.  
EDIT: Nevermind, I found! But I would like the grid to be more precise, I want it to seperate at coordinates (0,0), (0,100), (0, 200) etc. Is it possible?

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [May 15, 2024, 10:53am UTC](https://discourse.threejs.org/t/dashed-grid-not-looking-great/65530/9 "2024-05-15T10:53:13Z")

</div>

The texture is one block, repeated many times. You can adjust the number of repetitions in a way that the copies of the blocks appear where you want. Also, you may draw other type of dashed line (as dashed pattern, width, etc) , the one in my demo is just provisional.