webgl dash line

javascript, webgl

Solution

There are no native stippled lines in WebGL (or OpenGL ES) but the effect is easy to achieve with a fragment shader, if you include a "length so far" vertex attribute in your VBO.

precision highp float;
varying float LengthSoFar; // <-- passed in from the vertex shader
const vec3 Color = vec3(1, 1, 1);
const float NumDashes = 10.0; // 10 dashes for every 1 unit in LengthSoFar

void main()
{
    float alpha = floor(2.0 * fract(LengthSoFar * NumDashes));
    gl_FragColor = vec4(Color, alpha);
}

An alternative method would be to make a lookup into a 1D texture. The length-so-far attribute is really just a 1D texture coordinate.

Problem

Can someone tell me how to draw dashed lines in WebGL without using Three.js or any other toolkit? Just plain WebGL. I'm very new to WebGL and I can't seem to find the answer to this question.

Original source