Javascript webgl虚线

有人能告诉我如何在不使用Three.js或任何其他工具包的情况下在WebGL中绘制虚线吗？只是简单的WebGL。我对WebGL非常陌生，我似乎找不到这个问题的答案。

在WebGL（或OpenGL ES）中没有本机点画线，但如果在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);
}

高精度浮点；
浮动长度的变化；// 我在过去做过的一件事，尽管它可能不符合您的用例，是创建一个包含路径点的顶点缓冲区，然后使用

gl.drawArrays(gl.LINES, 0, vertexCount);

使用
gl.LINES
自然地“跳过”路径的每一段，如果路径点足够频繁，就会产生虚线效果。它简单易懂，但在适当的情况下非常有效。
您可以
放弃
而不是alpha。可能会更快，并且不会在不可见的地方影响zbuffer。很好，我喜欢使用
丢弃
@user2154858的想法。如果这回答了您的问题，那么您应该将其标记为答案。@prideout，顶点着色器如何计算
到当前为止的长度
浮动？我不太了解GLSL。有线索吗？@SuperScript，我的回答建议在VBO中包含
LengthSoFar
，这意味着CPU将计算它，而不是顶点着色器。由于并行性，顶点着色器无法执行累加。我喜欢这个答案-它在所有正确的方面都很懒惰！我认为值得指出的是，这个技巧是如何处理数据的——如果你有一个点数组：[abcdef]，那么这将画出：a--bc--def。三个破折号，两个空格（空格在b和c之间，d和e之间，但是StackOverflow似乎压缩了我在评论中的空白，所以有点难看。