# Draw dashed/Dotted lines using Pixel Shader

This topic is 2394 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hi All,

I am trying to draw the 2D graphics (like line, polyline, polygon etc.) using Direct3D for drawing I am using LINE_LIST. Now I want to make the lines thicker and apply patterns to the line as described here.

I am able to draw the thick lines using a geometry shader to draw a quad but to apply patterns I need to write a pixel shader that will do all the stylization of line that is which fragment should be drawn and which fragment of line should be left behind.

I would really appreciate if, anybody could help in writing the pixel shader or provide me any reference to write it.

Thanks,
Pankaj

##### Share on other sites
Hey there,

in order to apply dash or dot patterns you first have to parameterize your line.
You have many ways to do so. For instance you could pass the parameter of each vertex explicitly to the vertex shader as some sort of texture coordinate. In your case you should consider an arc-length parameterization. If you are sure that your line segments have the same length you can just take the SV_VertexID semantic. In several applications you'd rather like a parameterization in [0..1], but in your case it doesn't really matter.

You handle that parameter over to the geometry shader, which passes it on to the pixel shader.
Let's stick a moment with the geometry shader. You already expanded the line to viewport-aligned triangle strips, right? Good!
If your line list describes a curve then you have to be careful at junctions with high curvature.
Everts et al. did some really nice work on the visualization of dense line data. See section 3.2 to see how to properly generate viewport-aligned triangle strips. If your lines are dense, you can play around a little with their technique.

In the pixel shader you can apply any periodic function to your parameterization and reject pixels that are above or beneath a certain threshold, e.g.
if (step(sin(scale * input.param), 0.5f)) discard;
This would produce a dash pattern, whereas the 'scale' controls the length of the dashes.
You can produce other patterns by adding phase-shifted sins to your function. Play around with that.

So far the pattern is applied to the line in world-space (assuming you have arc-length parameterization). If you move very far away, you'll end up having nasty aliasing.
If you want to make your line patterns adaptive to the viewport (not only to the distance but also the angle under which you're looking at it) you should consider some mipmapping like approach. You can easily compute the mipmap level in the same way texture2D would do it. Using this information you can evaluate your pattern function for the next and previous mipmap level, interpolate between them and apply the discard test afterwards. See Hummel et al. to see how to apply adaptive patterns (section 4.1 covers this, whereas the derivatives in equations (3) and (4) can be computed with ddx and ddy (is simpler than it looks)).

Alright, then good luck with that!
I hope this gives you some direction to go on.

• 10
• 17
• 9
• 13
• 41