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

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

Answer 2

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

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

使用gl.LINES自然“跳过”路径的每个其他部分，如果路径点足够频繁，则会产生虚线效果。它简单而hacky，但在适当的情况下有效。