代码 or demo查看请滑动到最后。
一、问题场景:
在 3D 图形的渲染过程中,我们是需要来决定哪部分是要对观察者 可见/不可见 的,对于不可见的部分,我们就没有渲染的必要了,要及早丢弃掉他们。例子:一间草屋,我们站在门前的时候,草屋的背后我们是看不到的,那么就不要渲染它了。否则就会出现下图中的场景(我们绘制一个立体图形后 对其进行旋转操作查看时,背面我们本应是看不到的面也被看到了),叫做“隐藏面消除”(Hidden surface elimination)。 (图中的)
背面为什么黑色呢?光源着色器,想象一下我们在太阳光下,光打下来,朝阳和背阳的两个场景下,是不是一面亮一面暗呢。
二、解决方案
1:油画算法(过时且浪费性能-重复渲染)
先绘制画面中距离观察者远的物体,再绘制较*的物体。由远及*,如下图,远的会被*物遮住。
但是如果是下面这种场景,油画算法就无法解决了:
这种每个面都要看到部分的场景怎么办呢?
2、正背面剔除(Face Culling)
背景:
想象一个 3D 图形,从任何一个⽅向去观察,我们最多可以看到⼏个⾯? 最多3面。从⼀个⽴方体的任意位置和⽅向上看,最多不可能看到多于3个面。那么,为何还要多余的去绘制那些根本看不到的3个面呢? 如果能以某种⽅式去丢弃这部分数据, OpenGL 在渲染的性能就可以提高超过 50% 呢。
问题分析:
如何知道某个⾯在观察者的视口中不会出现? 任何*⾯都有2个面:正⾯/背面。这意味着我们在一个时刻只能看到一⾯。
OpenGL 可以做到检查所有正面朝向观察者的面 并渲染它们,⽽丢弃背⾯朝向的面,这样可以节约片元着⾊器的性能。
OpenGL 如何知道我们绘制的图形哪是正面呢?可通过分析顶点数据的顺序。
分析顶点数据:
1)正背面区分:OpenGL 中 按逆时针进行顶点相连的三角形面为 正面,顺时针相连的三角形面为 背面 -- 规则如此
2)立方体的正背面
眼睛在右侧时,右边顶点按逆时针顺序,为正面,左侧为顺时针背面;眼睛在左侧时,则左侧为正面。
归结:
正面和背面是由三角形的顶点定义顺序鹅观察者方向共同决定的,随着观察者观察角度的改变,正背面也会跟着改变。
解决操作:
a、开启表面剔除(默认背面剔除)
void glEnable(GL_CULL_FACE);
b、关闭表⾯剔除(默认背面剔除)
void glDisable(GL_CULL_FACE);
c、用户选择剔除哪个面(正面/背面)
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);
我们对背面进行剔除后,图形好像正常了,但是,旋转到一定角度,发现:
这又是怎么回事儿呢?
下图中,当我们旋转到这个角度继续旋转时,此时A、B面都是正面,但继续旋转至A、B面重合,此时OpenGL无法区分谁才是正面应该也无法确定要显示A or B,因而出现了上图的场景。
我们应该怎么在解决隐藏面消除的同时,告诉OpenGL我们要显示谁呢?
3、Z-buffer 方法(深度缓冲区Depth-buffer)
1)深度
a、深度:像素点在3D世界中,距离观察者(眼睛)的距离 -- Z值(这个值是指物体的Z值)
b、深度缓冲区:存储在显存值的一块区域,它主要就存储每个像素点的深度值,Z绝对值越大,说明距离观察者越远 -- 想象我们的现实世界。
Z值的绝对值:因为我们可能在Z轴的负轴。负值(负数)越小对应的绝对值(正数)越大。
c、深度缓冲区用来做什么呢?
想象一个场景:当我们绘制一幅草屋图时,不按远*顺序而是随意绘制,若先画了*处场景(门前的栏杆)再画远处场景(大门),那么此时在我们的画中大门就在栏杆的前面了,这是不符合逻辑的。想象下在现实生活中,如果眼前远景和*景无法分辨产生了混乱,我们眼前的世界就光怪陆离了。
有了深度,我们就可以知道每个点距离我们眼睛的远*,进而也就知道当2处重叠时我们应该看见的是哪一部分了 --> 对比到OpenGL上,有了深度缓冲区,知道了深度值,绘制时也就不担心绘制顺序和渲染谁了。 OpenGL中,只要存在深度缓存区(缓存==缓冲 名字而已),OpenGL都会把像素的深度值写入进去。除非手动禁止写入:glDepthMask(GL_FALSE)。(深度缓冲区中针对某个像素点 只存一个对应值,重叠时我们需要知道应该存哪个值)
2)深度测试
a、什么是深度测试?DepthBuffer(深度缓冲区)和ColorBuffer(颜色缓冲区)是一一对应的,我们知道颜色缓冲区是存储像素的颜色信息,深度缓冲区是存储像素的深度信息。在决定是否要绘制某个物体表面时,首先要将表面对应的像素深度(A)与深度缓冲区中的深度值(B)进行对比,A>B则丢弃掉A对应的表面不绘制;A<B,则拿出这个像素对应的 深度值和颜色值,对应的分别去更新深度缓冲区和颜色缓冲区。这个过程称为“深度测试”。
b、深度测试的使用
开启:glEnable(GL_DEPTH_TEST) -- 深度测试的值默认1,范围[0,1]
绘制开始前,首先清空缓冲区(颜色和深度都要清):glClear()GL_COLEO_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)
深度测试的模式 mode:
关闭:glDisable(GL_DEPTH_TEST)
开启深度测试后:我的圈圈终于正常了,它是不是不会再出问题了呢?
开启深度测试也是存在风险的
4、ZFlighting 闪烁问题 - (深度测试的潜在风险)
1)产生场景:受限于设备的精度,当我们的绘制精度 大于设备所支持精度就会出现。(根本原因:精度。目前的设备上较少会出现)
原因:开启深度测试后,OpenGL 就不会绘制被遮挡的部分了。此时绘制的图形已符合我们的现实场景了,但是,由于深度缓存区精度的限制,当出现两个像素的深度值相差很小(例子:0.0000005/0.0000007)时 --> OpenGL可能无法正确判断2个值大小 --> 深度测试的结果不确定性 --> 画面交错闪烁(AB的重叠绘制 可能出现随机绘制 - 一会儿A一会儿B)。如下图白框中的画面
2)解决办法
导致问题的原因既然是因为2个深度值相差太小了,那我们就想办法把2个值偏差的大点 --> 深度测试前,将两个深度值 手动做下细微的修改 使之可以区分 --> 手动复杂又不精确 --> OpenGL提供了办法:多边形偏移 -- 使产生 ZFlighting 的图层产生一个的偏移,即深度值间产生一个间隔。
a、启用多边形偏移:
glEnable(GL_POLYGON_OFFSET_FILL)
GL_POLYGON_OFFSET_FILL:对应光栅化的 GL_FILL
GL_POLYGON_OFFSET_LINE:对应光栅化的 GL_LINE
GL_POLYGON_OFFSET_POINT:对应光栅化的 GL_POINT
b、指定偏移量:
glPolygonOffset(Glfloat factor,Glfloat units)
深度:Depth offset = DZ * factor + r * units // 负值,使得模型距离观察者更*;正值,将使得模型距离观察者更远
DZ:多边形的深度斜率 最大值
r:使深度缓冲区产生变化的最小值,即可分辨的最小差异值
这里我们只需传 factor 和 units 两个值给 glPolygonOffset 即可:一般传入-1, -1
c、关闭
glDisable(GL_POLYGON_OFFSET_FILL)
3)预防
a、不要将2个物体放太*,避免渲染时重叠。这种方式要求对场景中物体插入一个少量的偏移,自然这个操作是要付出一定代价的。
b、将裁剪面设计的距离观察者远些,上⾯我们看到,在*裁剪*⾯附*,深度的精确度是很高的,因此尽可能让*裁剪⾯远一些的话,会使整个裁剪范围内的精确度变高一些。但是这种⽅式会使离观察者较*的物体被裁减掉,因此需要调试好裁剪⾯参数。
c、使用高位数的深度缓存区。通常使用的深度缓存区是24位的,现在有一些使用32位的缓冲区的硬件设备,使精度提高。
三、主要代码
压栈:记录临时状态 保存一下下 - 状态的回滚
出栈:恢复初始状态 -- 不需要了 记录的数据就可以扔掉,避免对后面的渲染产生异常影响 ---> 有点类似 Git 的 stash 命令
1 GLBatch triangleBatch; 2 3 GLShaderManager shaderManager; 4 5 // 设置角色帧,作为相机 6 GLFrame viewFrame;// 观察者位置 7 GLFrustum viewFrustum;// 透视投影 - GLFrustum类 8 GLTriangleBatch torusBatch; 9 // 两个矩阵 10 GLMatrixStack modelViewMatix;// 模型矩阵 11 GLMatrixStack projectionMatrix;// 透视矩阵 12 // 13 GLGeometryTransform transformPipeline;// 几何转换 14 15 16 // 定义字段判断 正背面剔除/深度测试 开启与否 17 int iCull = 0; 18 int iDepth = 0; 19 20 21 // 右键菜单栏选项 开启关闭深度测试 22 void ProcessMenu(int value) { 23 24 switch(value) 25 { 26 case 1: 27 iCull = !iCull; 28 break; 29 30 case 2: 31 iDepth = !iDepth; 32 break; 45 } 46 47 glutPostRedisplay(); 48 } 49 50 // 键盘上下左右 事件 51 // 观察者移动 物体不动 52 void SpecialKeys(int key, int x, int y) { 53 54 if(key == GLUT_KEY_UP) 55 viewFrame.RotateWorld(m3dDegToRad(-5.0), 1.0f, 0.0f, 0.0f); 56 57 if(key == GLUT_KEY_DOWN) 58 viewFrame.RotateWorld(m3dDegToRad(5.0), 1.0f, 0.0f, 0.0f); 59 60 if(key == GLUT_KEY_LEFT) 61 viewFrame.RotateWorld(m3dDegToRad(-5.0), 0.0f, 1.0f, 0.0f); 62 63 if(key == GLUT_KEY_RIGHT) 64 viewFrame.RotateWorld(m3dDegToRad(5.0), 0.0f, 1.0f, 0.0f); 65 66 //重新刷新window 67 glutPostRedisplay(); 68 } 69 70 // 初始化 设置 71 void SetupRC() { 72 73 // ================ 简单绘制一个立体的圈圈 ================= 74 // 设置背景颜色 75 glClearColor(0.0f, 0.3f, 0.3f, 1.0f ); 76 77 //初始化着色器管理器 78 shaderManager.InitializeStockShaders(); 79 80 //将相机向后移动7个单元:肉眼到物体之间的距离 81 viewFrame.MoveForward(7.0); 82 83 //创建一个圈 84 //void gltMakeTorus(GLTriangleBatch& torusBatch, GLfloat majorRadius, GLfloat minorRadius, GLint numMajor, GLint numMinor); 85 //参数1:GLTriangleBatch 容器帮助类 86 //参数2:外边缘半径 87 //参数3:内边缘半径 88 //参数4、5:主半径和从半径的细分单元数量 89 gltMakeTorus(torusBatch, 1.0f, 0.3f, 52, 26); 90 //点的大小 91 glPointSize(4.0f); 117 } 118 119 120 // 视口 窗口大小改变时接受新的宽度和高度,其中0,0代表窗口中视口的左下角坐标,w,h代表像素 121 void ChangeSize(int w,int h) { 122 // 防止h变为0 123 if(h == 0) 124 h = 1; 125 126 // 设置视口窗口尺寸 127 glViewport(0, 0, w, h); 128 129 // setPerspective 函数的参数是一个从顶点方向看去的视场角度(用角度值表示) 130 // 设置透视模式,初始化其透视矩阵 131 viewFrustum.SetPerspective(35.0f, float(w)/float(h), 1.0f, 100.0f); 132 133 //4.把 透视矩阵 加载到 透视矩阵对阵中 134 projectionMatrix.LoadMatrix(viewFrustum.GetProjectionMatrix()); 135 136 //5.初始化渲染管线 137 transformPipeline.SetMatrixStacks(modelViewMatix, projectionMatrix); 138 } 139 140 // 渲染 141 void RenderScene(void) { 142 143 //清除窗口和深度缓冲区 144 // 145 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); 146 147 148 // iCull 判断是否开启背面剔除 GL_CULL_FACE 149 if(iCull) 150 { 151 glEnable(GL_CULL_FACE); 152 glFrontFace(GL_CCW); 153 glCullFace(GL_BACK); 154 } 155 else 156 glDisable(GL_CULL_FACE); 157 158 // iDepth 判断是否开启深度测试 GL_DEPTH_TEST 159 if(iDepth) 160 glEnable(GL_DEPTH_TEST); 161 else 162 glDisable(GL_DEPTH_TEST); 163 164 //把摄像机矩阵压入模型矩阵中 入栈 165 modelViewMatix.PushMatrix(viewFrame); 166 167 GLfloat vRed[] = { 0.0f, 0.5f, 0.5f, 1.0f };// 画笔颜色 168 169 //使用默认光源着色器 170 //通过光源、阴影效果跟提现立体效果 171 //参数1:GLT_SHADER_DEFAULT_LIGHT 默认光源着色器 172 //参数2:模型视图矩阵 173 //参数3:投影矩阵 174 //参数4:基本颜色值 175 shaderManager.UseStockShader(GLT_SHADER_DEFAULT_LIGHT, transformPipeline.GetModelViewMatrix(), transformPipeline.GetProjectionMatrix(), vRed); 176 177 //绘制 178 torusBatch.Draw(); 179 180 //出栈 181 modelViewMatix.PopMatrix(); 182 glutSwapBuffers(); 205 } 206 207 int main(int argc,char* argv[]) { 208 209 //设置当前工作目录,针对MAC OS X 210 211 gltSetWorkingDirectory(argv[0]); 212 213 //初始化GLUT库 214 215 glutInit(&argc, argv); 216 /* 初始化双缓冲窗口,其中标志GLUT_DOUBLE、GLUT_RGBA、GLUT_DEPTH、GLUT_STENCIL分别指 217 双缓冲窗口、RGBA颜色模式、深度测试、模板缓冲区 218 */ 219 glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL); 220 221 //GLUT窗口大小,标题窗口 222 glutInitWindowSize(800,600); 223 glutCreateWindow("Triangle"); 224 225 //注册回调函数 226 glutReshapeFunc(ChangeSize); 227 glutDisplayFunc(RenderScene); 228 glutSpecialFunc(SpecialKeys);// 注册键盘特殊键位(上下左右键) 处理点击事件 229 230 // Create the Menu 231 glutCreateMenu(ProcessMenu);// 右键菜单栏选项 开启关闭深度测试 232 glutAddMenuEntry("Toggle cull backface",1);// 正背面剔除 233 glutAddMenuEntry("Toggle depth test",2);// 深度测试的开启与否 234 235 glutAttachMenu(GLUT_RIGHT_BUTTON); 236 239 //驱动程序的初始化中没有出现任何问题。 240 GLenum err = glewInit(); 241 if(GLEW_OK != err) { 242 243 fprintf(stderr,"glew error:%s ",glewGetErrorString(err)); 244 return 1; 245 } 246 247 //调用SetupRC 248 SetupRC(); 249 250 glutMainLoop(); 251 252 return 0; 253 }