如何使用WebGL绘制平面网格线？
时间：2024-01-16 16:36:01 | 来源：网站运营
时间：2024-01-16 16:36:01 来源：网站运营
如何使用WebGL绘制平面网格线？：WebGL本身支持LINES，POINTS和TRIANGLES三类光栅化图元（当然还有相应的STRIP等形式），只需要在绘制的时候准备直线的顶点数据，在调用drawElements的时候传入gl.LINES让流水线按照线段的模式去装配图元即可（参见这个API）。其他部分（VS，PS）和绘制三角形一样。
这个方法的缺点是有些浏览器的WebGL版本不支持线宽的设定（对于POINTS类型的图元一般是可以设置点的大小的），
只支持线宽为1的，没有反走样的线段。
如果想要支持反走样，并且能够让用户自定义线段的样式（比如虚线效果）、宽窄，另外一个比较麻烦的实现方法是，用两个三角形拼成的四边形来表示一条线段：
这个方法需要注意的是拐点连接处如何拼接，这里有两篇文章
[1][2]可以去参考。当然也可以再额外添加三角形用于生成线段两端的拐点的圆弧。同时也可以在Pixel Shader里加入虚线等效果。基于这个思路，实际上你不但可以绘制反走样的直线，还能够绘制贝塞尔曲线等复杂的效果，参见GPU Gems里的这篇文章
[3]。理论上，你甚至可以基于这个思路实现一个完整的基于WebGL的SVG渲染器。
如果画线的目的不是为了绘制网格，而是用于绘制线框模型的话，一个比较优雅的实现思路是基于重心坐标插值：
具体原理也不再赘述，可以去看这两篇文章
[4][5]。这个方法的优点是，可以绘制反走样的线框模型，同时支持线框内部着色，支持具有透视效果的线段（也可以没有透视效果）。缺点是这个方法需要顶点提供额外的用于重心坐标插值的几何数据，并且如果顶点被多个三角形共享，必须分裂成多个顶点，否则会导致重心坐标插值出错（如果有Geometry Shader的API则可以通过Geometry Shader来分裂顶点生成几何数据，WebGL里只能通过CPU提前处理这部分数据）。另外的一个缺点是如果某个边被两个三角形共享，则会生成双倍宽度的线段。
参考
- ^https://blog.mapbox.com/drawing-antialiased-lines-with-opengl-8766f34192dc
- ^https://www.cnblogs.com/dojo-lzz/p/9219290.html
- ^https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch25.html
- ^http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/
- ^https://zhuanlan.zhihu.com/p/48499247
在线咨询
