webgl虚线

Question

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

Answer 1

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);
}

另一种方法是查找一维纹理。 long-so-far属性实际上只是一维纹理坐标。

Answer 2

我过去做过的事情虽然可能不符合您的用例，但是创建一个包含路径点的顶点缓冲区，然后使用

绘制它

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

使用gl.LINES自然地“跳过”路径的每个其他段，如果路径点足够频繁，则创建虚线效果。它既简单又简单，但在适当的环境下有效。