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 属性实际上只是一维纹理坐标。