# WebGL2Fundamentals.org

Fix, Fork, Contribute

# Pure WebGL Dashed Line

## Question:

I'm trying to create a dashed line using pure webgl. I know there is already a question on this, and maybe I'm dumb, but I cannot figure out how to make it work. I understand the concept, but I do not know how to get the distance along the path in the shader. A previous answer had the following line:

``````varying float LengthSoFar; // <-- passed in from the vertex shader
``````

So how would I get `LengthSoFar`? How can I calculate it in the vertex shader?

Am I totally missing something? Can someone give me a working example? Or at least some good leads? I've been banging my head against the wall on this for days.

I'm assuming it works like this. You have a buffer of positions. You make a corresponding buffer of `lengthSoFar` so,

``````function distance(array, ndx1, ndx2)
{
ndx1 *= 3;
ndx2 *= 3;

var dx = array[ndx1 + 0] - array[ndx2 + 0];
var dy = array[ndx1 + 1] - array[ndx2 + 1];
var dz = array[ndx1 + 2] - array[ndx2 + 2];

return Math.sqrt(dx * dx + dy * dy + dz * dz);
}

var positions =
[
0.123, 0.010, 0.233,
0.423, 0.312, 0.344,
0.933, 1.332, 0.101,
];

var lengthSoFar = ;  // the length so far starts at 0
for (var ii = 1; ii < positions.length / 3; ++ii)
{
lengthSoFar.push(lengthSoFar[ii - 1] + distance(positions, ii - 1, ii));
}
``````

Now you can make buffers for both `positions` and `lengthSoFar` and pass `lengthSoFar` as an attribute into your vertex shader and from there pass it as a varying to to your fragment shader.

Unfortunately it won't work with indexed geometry (the most common type?). In other words it won't work with `gl.drawElements`, only with `gl.drawArrays`. Also the dashed line would be dashed in 3D not 2D so a line going into the screen (away from the viewer) would look different than a line going across the screen. Of course if you're drawing 2D then there's no problem.

If those limitations are good for you does this answer you question?

Also note you can't change the thickness of the lines. To do that you need to draw lines from triangles

The question and quoted portions thereof are CC BY-SA 3.0 by Robbie Wxyz from here
• Fundamentals
• WebGL2 vs WebGL1
• Image Processing
• 2D translation, rotation, scale, matrix math
• 3D
• Lighting
• Structure and Organization
• Geometry
• Textures
• Rendering To A Texture