画线条很难

[SyMind]

原文：https://mattdesl.svbtle.com/drawing-lines-is-hard

在 OpenGL，尤其是在 WebGL，要画好线条是非常困难的。在这里，我探索了一些不同的 2D 和3D 线条渲染技术，每个都带有一个小例子。

例子的源码在这里：https://github.com/mattdesl/webgl-lines

Line 基原

WebGL 包含这些线段 gl.LINES、gl.LINE_STRIP 和 gl.LINE_LOOP。听起来不错是么？但并不是。这里有一些问题：

• 驱动实现渲染、过滤的方式可能会略微不同，在设备或浏览器之间可能无法获得一致的渲染。
• 最大线条宽度依赖驱动。例如最大值可能被限制为 1.0。
• 无法控制线条连接处或端点处的样式。
• 并非所有设备都支持 MSAA，大多数浏览器不支持屏幕外缓冲区。最终线条可能会出现锯齿。
• 对于虚线，glLineStipple 已被弃用，在 WebGL 中不存在。

三角剖分线条

一种常见方法是将一条线拆分为由三角形组成的条带，这使得可以最大程度地控制直线。

它的一种典型实现方法是获取路径上每个点的法线，并在两侧向外扩展一半厚度。

有以下选择进行反走样：

• 期望支持 MSAA，这样将永远不需要将线条渲染到屏幕外缓冲区。
• 添加更多三角形为线条进行羽化。
• 使用纹理查找对 alpha 值进行渐变；非常简单，但扩展性不好。
• 在片元着色器中，根据屏幕空间中线条的投影比例计算抗锯齿。
• 使用 gl.LINES 围绕线条边缘渲染第二遍。

扩展定点着色器

屏幕空间投影线

上一个方案对于 2D 线条效果很好，但可能不适合在 3D 空间中的设计需求。