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 纹理坐标。