OpenGL中的抗锯齿绘线(下)

0.前言

        链接中描述了OpenGL中绘制线段时的锯齿问题和处理方法,但还没实现宽度连续变化线段的绘制。再把这张图请出来,想要实现下图中宽度连续变化线段的抗锯齿绘制,经过我两天短暂又武断的思考之后确认,使用OpenGL中原生接口是无法实现的,嗯。。。

1.抗锯齿绘制线段原理

        简单描述一下OpenGL抗锯齿绘制线段的原理,由于线段具有宽度,实际上我们绘制出的一段线段就是一个矩形,OpenGL中通过绘制两个三角形实现;如果只是做上面的操作,不可避免会产生锯齿感;那么我们可以在上面的矩形两侧,再分别增加一个等长的矩形,不过该矩形内部具有渐变的颜色,从视觉上来看,就具有抗锯齿的效果了,如下图所示。所以一段线段的绘制实际上是通过绘制6个三角形实现。这部分的详细介绍可以参考http://ju.outofmemory.cn/entry/142921

tessellate

        但是上述的只是抗锯齿绘制线段的基本原理,实际实现中有很多细节,譬如新增加的两个三角形高度如何设置?绘制多边形线段时线段之间的衔接部分如何计算?线段的起点/终点部分的形状(矩形或是圆角)?诸如此类。

        时间与能力限制,楼主没有做更深入的研究,不过已经有前人做了相关研究并慷慨分享到网络,就是vaserenderer库。

2.vaserenderer库

2.1介绍

        工程github主页:https://github.com/tyt2y3/vaserenderer,这是一个基于OpenGL1.1实现的可绘制颜色、透明度、宽度渐变可控的线段,线段类型包括直线、多边形线段、贝塞尔线段。调用接口函数时传入每个控制点的颜色、透明度、宽度,并设置抗锯齿相关的选项,库内部进行具有抗锯齿效果的三角形组合的生成,并调用OpenGL1.1中相关的绘制接口完成最终线段的绘制,效果拔群。贴几张效果图出来

2.2使用

        自己尝试了下在VS工程中引入该库测试,总结基本流程如下:

1)将源代码文件放入工程目录

2)增加Vec2和Color的定义,之后包含vaser.cpp文件

namespace VASEr
{
	struct Vec2 { double x, y; };
	struct Color { float r, g, b, a; };
}
#include "vaser\vaser.cpp"

3)打开vaser.h文件,在其中加入glew.h的包含;这一步可以不做,因为VS中默认支持OpenGL1.1版本

        注意:不要将vaserenderer中的源代码文件加入工程的解决方案管理器中,这样会导致工程编译出错,出现一堆找不到定义的问题;原因是源代码比较特别的结构组织和编译顺序。。。

2.3改进

        具体的调用可以参考文件中的sample,这里不再赘述。要为作者竖一个大拇指,库的功能十分强大,对于一般的线段绘制需求能够完全满足。不过有一点不太友好,它是基于OpenGL1.1实现,也就是固定管道渲染;但是嵌入式平台上的OpenGL ES自2.0版本后,不再支持固定管道渲染,只支持可编程管道渲染。恰好我的项目中设备使用的是OpenGL ES2.0版本,囧。

        为了完成项目需求,自己把代码结构大致理了下,原理部分代码略过(因为看不懂),对最终图元的渲染部分做了更改,使它能够兼容支持OpenGL2.0及其以上版本(通过config.h中的宏定义区分),并在安卓平台上编译通过并验证。除此之外对代码还有一些其他的小改动(非原理性部分),具体建议对比原始代码查看。

        这里给出修改后的库代码,和调用它的GL工程(VS2015版本),以供参考,下载链接为https://download.csdn.net/download/lwx309025167/11388979

猜你喜欢

转载自blog.csdn.net/lwx309025167/article/details/96352756