一、绘制甜甜圈
上篇文中已经实现由OpenGL图元绘制一些简单的图形，今天我们来尝试绘制一个甜甜圈并且看下会不会有新的问题出现：
具体代码和上篇基本一样，只是修改了SetupRC和main函数中部分代码。
1.SetupRC函数
void SetupRC()
{
//1.设置背景颜色
glClearColor(0.3f, 0.3f, 0.3f, 1.0f );
//2.初始化着色器管理器
shaderManager.InitializeStockShaders();
//3.将相机向后移动7个单元：肉眼到物体之间的距离
viewFrame.MoveForward(7.0);
//4.创建一个甜甜圈
gltMakeTorus(torusBatch, 1.0f, 0.3f, 52, 26);
//5.点的大小(方便点填充时,肉眼观察)
glPointSize(4.0f);
}
gltMakeTorus是用来创建甜甜圈的函数：
//GLTriangleBatch& torusBatch：GLTriangleBatch 容器帮助类
//majorRadius：外边缘半径
//minorRadius：内边缘半径
//numMajor、numMinor：主半径和从半径的细分单元数量
void gltMakeTorus(GLTriangleBatch& torusBatch,
GLfloat majorRadius,
GLfloat minorRadius,
GLint numMajor,
GLint numMinor);
2.main函数
int main(int argc, char* argv[])
{
gltSetWorkingDirectory(argv[0]);
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH | GLUT_STENCIL);
glutInitWindowSize(800, 600);
glutCreateWindow("Geometry Test Program");
glutReshapeFunc(ChangeSize);
glutSpecialFunc(SpecialKeys);
glutDisplayFunc(RenderScene);
//添加右击菜单栏
// Create the Menu
glutCreateMenu(ProcessMenu);
glutAddMenuEntry("Toggle depth test",1);
glutAddMenuEntry("Toggle cull backface",2);
glutAddMenuEntry("Set Fill Mode", 3);
glutAddMenuEntry("Set Line Mode", 4);
glutAddMenuEntry("Set Point Mode", 5);
glutAttachMenu(GLUT_RIGHT_BUTTON);
GLenum err = glewInit();
if (GLEW_OK != err) {
fprintf(stderr, "GLEW Error: %s\n", glewGetErrorString(err));
return 1;
}
SetupRC();
glutMainLoop();
return 0;
}
其中主要是下面几句代码：
//添加右击菜单栏
// Create the Menu
glutCreateMenu(ProcessMenu);
//是否开启深度测试
glutAddMenuEntry("Toggle depth test",1);
//是否消除隐藏面
glutAddMenuEntry("Toggle cull backface",2);
//填充方式--充满
glutAddMenuEntry("Set Fill Mode", 3);
//填充方式--线段
glutAddMenuEntry("Set Line Mode", 4);
//填充方式--点
glutAddMenuEntry("Set Point Mode", 5);
glutAttachMenu(GLUT_RIGHT_BUTTON);
这几行代码实现了注册鼠标右键5个点击事件以及处理这5个点击事件的ProcessMenu函数。
-
ProcessMenu函数
void ProcessMenu(int value)
{
switch(value)
{
case 1:
iDepth = !iDepth;
break;
case 2:
iCull = !iCull;
break;
case 3:
glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
break;
case 4:
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
break;
case 5:
glPolygonMode(GL_FRONT_AND_BACK, GL_POINT);
break;
}
glutPostRedisplay();
}
ok，接下来运行工程，看下绘制的结果：
甜甜圈.png
二、隐藏面消除
看起来是不是很完美啊。成功绘制的喜悦让我十分激动，然后想看下甜甜圈的全貌，于是我按了下上下左右，结果问题就出现了：
隐藏面.gif
这是个什么👻啊？
原来是因为我们在绘制3D场景的时候,我们需要决定哪些部分是对观察者可见的,或者哪些部分是对观察者不可见的.对于不可见的部分即隐藏面,应该及早丢弃。
例如在⼀个不透明的墙壁后面的图像，就不应该渲染.这种情况叫做”隐藏面消除”(Hidden surface elimination)。
刚刚我们绘制的甜甜圈实际上是由很多个三角形拼起来的，在旋转的过程中
OpenGL并不知道该显示哪些视图，哪些本不应该被我们看见的三角形的背面也被我们看见了，所以出现了上面图片中的情况。接下来我们就来探讨下如何进行隐藏面消除：
解决方案一：油画算法
即像画油画一样，先画画中最下面的部分，再画上面的部分，知道全部完成。在OpenGL中可以理解为：
-
先绘制场景中的离观察者较远的物体,再绘制较近的物体。
油画算法.png
但是油画算法使用场景有限，如果多个图形出现叠加的情况，油画算法也将无法处理。
油画算法缺点.png
解决方案二：正背面剔除(Face Culling)
试想一下，当你观察一个3D的正方形或者三角形图形，你从任何的角度看过去，最多可以看到几个面? 答案是3个，还有一部分面是你看不到的，那这些看不到的面，我们为何要去绘制？岂不是白白浪费OpenGL性能？
- 在平面图形中，任何平⾯都有2个⾯，正面/背面.意味着你一个时刻只能看到一面。
OpenGL可以做到检查所有正面朝向观察者的面,并渲染它们.从⽽丢弃背⾯朝向的面. 这样可以节约⽚元着色器的性能。 - 如何告
OpenGL你绘制的图形,哪个⾯是正面,哪个面是背⾯? 答案: 通过分析顶点数据的顺序。
1.平面图形的正背面：
三角形正背面.png
GLfloat vertices[] = {
//顺时针
vertices[0], // vertex 1
vertices[1], // vertex 2
vertices[2], // vertex 3
// 逆时针
vertices[0], // vertex 1
vertices[2], // vertex 3
vertices[1] // vertex 2
};
在OpenGL中，针对平面图形的正背面区分：
正⾯: 按照逆时针顶点连接顺序的三⻆形⾯
背面: 按照顺时针顶点连接顺序的三角形面
2.立体图形的正背面：
立体图形正背面.png
- 图中左侧三⻆形顶点顺序为: 1—> 2—> 3 ; 右侧三角形的顶点顺序为: 1—> 2—> 3 。
- 当观察者在右侧时,则右边的三角形⽅向为逆时针方向则为正面,⽽左侧的三⻆形为顺时针则为背面
- 当观察者在左侧时,则左边的三角形为逆时针⽅向判定为正面,⽽右侧的三角形为顺时针判定为背面.
正⾯和背面是有三⻆形的顶点定义顺序和观察者⽅向共同决定的.随着观察者的⻆度⽅向的改变,正面背⾯也会跟着改变。
3.OpenGL中正背面剔除的代码
开启表⾯剔除(默认背面剔除)
void glEnable(GL_CULL_FACE);
关闭表面剔除(默认背面剔除)
void glDisable(GL_CULL_FACE);
⽤户选择剔除那个面(正⾯/背面) void glCullFace(GLenum mode);
mode参数为: GL_FRONT,GL_BACK,GL_FRONT_AND_BACK ,默认GL_BACK
⽤户指定绕序那个为正面
void glFrontFace(GLenum mode);
mode参数为: GL_CW,GL_CCW,默认值:GL_CCW
例如：剔除正面实现(1)
glCullFace(GL_BACK);
glFrontFace(GL_CW);
例如：剔除正面实现(2)
glCullFace(GL_FRONT);
经过上面的了解，可以知道正背面剔除更适合用于OpenGL中的隐藏面消除。
接下来我们就加上正背面的消除的代码再看看效果：
在RenderScene中添加以下代码：
//开启/关闭正背面剔除功能
if (iCull) {
glEnable(GL_CULL_FACE);
glFrontFace(GL_CCW);
glCullFace(GL_BACK);
}else
{
glDisable(GL_CULL_FACE);
}
运行功能并点击鼠标右键菜单，点击第二个选项：
隐藏面消除.gif
可以看到隐藏面已经消除，之前旋转式显示的现象已经不存在了。但是细心地同学肯定发现了，我们又出现了新的问题：
新的问题.png
了解和解决这个问题就要用到OpenGL中很重要的一个知识点了--深度测试。
三、深度测试
相关名词解释：
- 深度：深度其实就是该像素点在3D世界中距离摄像机的距离,即Z坐标值；
- 深度缓冲区：深度缓存区,就是一块内存区域,专⻔存储着每个像素点(绘制在屏幕上的)深度值。
如果观察者在Z轴的正方向，Z越大则越靠近观察者；
如果观察者在Z轴的负方向，Z越小则越靠近观察者。
我们为什么需要深度缓冲区呢？
在不使用深度测试的时候,如果我们先绘制⼀个距离比较近的物体,再绘制距离较远的物体,则距离远的位图因为后绘制,会把距离近的物体覆盖掉. 有了深度缓冲区后,绘制物体的顺序就不那么重要了。实际上,只要存在深度缓冲区,OpenGL都会把像素的深度值写⼊到缓冲区中. 除非调用glDepthMask(GL_FALSE)来禁⽌写入。
-
深度测试：深度缓冲区(
DepthBuffer)和颜色缓存区(ColorBuffer)是对应的，颜色缓存区存储像素的颜⾊信息，而深度缓冲区存储像素的深度信息。 在决定是否绘制⼀个物体表⾯时，⾸先要将表面对应的像素的深度值与当前深度缓冲区中的值进⾏比较.，如果大于深度缓冲区中的值，则丢弃这部分；否则利⽤这个像素对应的深度值和颜色值分别更新深度缓冲区和颜⾊缓存区。这个过程称为深度测试。 -
深度值计算：
- 深度值⼀般由16位、24位或者32位值表示，通常是24位。位数越高的话，深度的精确度越好。深度值的范围在[0,1]之间，值越小表示越靠近观察者，值越大表示远离观察者。
-
深度缓冲主要是通过计算深度值来⽐较⼤小，在深度缓冲区中包含深度值介于0.0和1.0之间， 从观察者看到其内容与场景中的所有对象的 z 值进行了⽐较。这些视图空间中的 z 值可以在投影平头截体的近平面和远平面之间的任何值。我们因此需要一些⽅法来转换这些视图空间 z 值 到 [0，1] 的范围内，下面的 (线性) ⽅程把 z 值转换为 0.0 和 1.0 之间的值：
深度计算公式.png
far和near是提供到投影矩阵设置可见视图截锥的远近值。
使用深度测试：
-
深度缓冲区一般由窗口管理系统，
GLFW创建。深度值⼀般由16位、24位、32位值表示，通常是24位。位数越高，深度精确度更好。 - 开始深度测试：
glEnable(GL_DEPTH_TEST);
- 在绘制场景前，清除颜色缓存区、深度缓冲区。
glClearColor(0.0f,0.0f,0.0f,1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
- 打开/关闭 深度缓存区写入：
void glDepthMask(GLBool value);
value : GL_TURE 开启深度缓冲区写⼊入; GL_FALSE 关闭深度缓冲区写⼊入
在案例中使用深度测试：
同样的在RenderSence中加入代码：
if (iDepth) {
glEnable(GL_DEPTH_TEST);
}else{
glDisable(GL_DEPTH_TEST);
}
结果怎么样呢？看图说话：
深度测试进行正背面剔除.gif
完美解决！！！
深度测试可以解决什么问题？
- 类似于甜甜圈的缺口问题。当旋转时，OpenGL无法区分物体的两部分重叠情况，导致缺口出现；
- 利用深度测试解决隐藏面的消除。
总结：
通过甜甜圈案例，让我们了解了什么是隐藏面，以及如何消除隐藏面。
-
正背面消除：需要根据顶点数据顺序判断用户可见部分与隐藏面，隐藏面直接丢弃，不绘制，只绘制可见部分；
-
深度测试：可以一次性解决隐藏面消除问题，原理是不管有多少图层，只显示可见图层，剩余不可见的都丢弃。
觉得不错记得点赞哦！听说看完点赞的人逢考必过，逢奖必中。ღ( ´･ᴗ･` )比心
