OpenGL学习与探索

OpenGL案例-绘制甜甜圈以及隐藏面消除(正背面剔除和深度测试

2020-07-12  本文已影响0人  Sheisone

一、绘制甜甜圈

上篇文中已经实现由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函数。

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

解决方案二：正背面剔除(Face Culling)

试想一下，当你观察一个3D的正方形或者三角形图形，你从任何的角度看过去，最多可以看到几个面? 答案是3个，还有一部分面是你看不到的，那这些看不到的面，我们为何要去绘制？岂不是白白浪费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

正⾯和背面是有三⻆形的顶点定义顺序和观察者⽅向共同决定的.随着观察者的⻆度⽅向的改变,正面背⾯也会跟着改变。

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中很重要的一个知识点了--深度测试。

三、深度测试

相关名词解释：

如果观察者在Z轴的正方向，Z越大则越靠近观察者；
如果观察者在Z轴的负方向，Z越小则越靠近观察者。
我们为什么需要深度缓冲区呢？

在不使用深度测试的时候,如果我们先绘制⼀个距离比较近的物体,再绘制距离较远的物体,则距离远的位图因为后绘制,会把距离近的物体覆盖掉. 有了深度缓冲区后,绘制物体的顺序就不那么重要了。实际上,只要存在深度缓冲区,OpenGL都会把像素的深度值写⼊到缓冲区中. 除非调用glDepthMask(GL_FALSE)来禁⽌写入。

far和near是提供到投影矩阵设置可见视图截锥的远近值。

使用深度测试：

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

完美解决！！！

深度测试可以解决什么问题？

总结：

通过甜甜圈案例，让我们了解了什么是隐藏面，以及如何消除隐藏面。

觉得不错记得点赞哦！听说看完点赞的人逢考必过，逢奖必中。ღ( ´･ᴗ･` )比心

上一篇 下一篇

猜你喜欢

热点阅读