上一篇我们绘制的一些基础图元样式,效果还是很粗糙的。代码也比较简单,今天我们来看看OpenGL的渲染技巧,通过绘制一个甜甜圈🍩,看看我们面对的一些问题和注意点!

在渲染过程中可能产生的问题

1. 隐藏面消除(Hidden surface elimination):在绘制3D场景的时候,我们需要决定哪些部分是对观察者可见的,或者哪些部分是对观察者不可见的。对于不可见的部分,应该及早的丢弃。例如在一个透明的墙壁后,就不应该渲染。如下图:
   
   隐藏面也渲染导致的bug.png

解决方案:
油画算法

• 先绘制场景中离观察者较远的物体,再绘制较近的物体

• 例如下面的图例:先绘制红色部分,再绘制黄色部分,最后绘制灰色部分,就可以解决隐藏面消除的问题。

  
  
  图片来源于网络.png

油画算法的弊端

• 使用油画算法,只要将场景按照物体距离观察者的距离远近排序,由远及近的绘制即可,那么会出现什么问题?简单来说,如果是三个物体叠加或者互有交叉的话,油画算法将无法处理。

  
  
  图片来源于网络.png

2.正背面剔除(Face Culling)

• 我们尝试观察一个3D图形,你从任何一个方向去观察,最多都只能看到3个面
• 我们看不到的面,是否需要绘制?我们如果能舍弃掉这部分数据,OpenGL在渲染时的性能即可提高超过50%。

(1):如何知道某个面在管擦着的视野中不会出现?
(2):任何平面都有两个面,正面/背面,意味着你一个时候只能看到一面。
解: OpenGL可以做到检查所有正面朝向观察者的面,并渲染它们,从而丢弃背面朝向的面,这样可以节约片元着色器的性能。
(3):如何告诉OpenGL你绘制的图形,哪个面是正面,哪个面是背面?
解:通过分析顶点数据的顺序
① 正面:按照逆时针顶点连接顺序的三角形面
② 背面:按照顺时针顶点连接顺序的三角形面

灵魂画手.png

(4):分析立方体中的正背面

图片来源于网络.png

• 左侧三角形顶点顺序为:1--> 2 --> 3;右侧三角形的顶点顺序为: 1--> 2 --> 3。
• 当观察者在右侧时,则右边的三角形方向为逆时针方向则为正面,而左侧的三角形为顺时针则为背面
• 当观察者在左侧时,则左边的三角形为逆时针方向判定为正面,而右侧的三角形为顺时针判定为背面
• 正面和背面是由三角形的顶点定义顺序和观察者的方向共同决定的,随着观察者的角度方向的改变,正背面也会跟着改变。

解决方案:

//开启表面剔除(默认背面剔除)
void glEnable(GL_CULL_FACE);

//关闭表面剔除(默认背面剔除)
void glDisable(GL_CULL_FACE);

//用户选择剔除哪个面(正面/背面)
//mode参数为:GL_FRONT,GL_BACK,GL_FRONT_AND_BACK,默认GL_BACK
void glCullFace(GLenum mode);

//用户指定绕序那个为正面
//mode参数为:GL_CW,GL_CCW,默认:GL_CCW
void glFrontFace(GLenum mode);

//例如剔除正面(1)
glCullFace(GL_BACK);
glFrontFace(GL_CW);

//例如剔除正面(2)
glCullFace(GL_FRONT);

3.深度
(1):什么是深度?
※ 深度起始就是该像素点在3D世界中距离摄像机的距离,也就是Z值
(2):什么是深度缓冲区?
※ 深度缓冲区,就是一块内存区域,专门存储着每个像素点(绘制在屏幕上)的深度值。深度值Z值越大,则离摄像机就越远。
(3):为什么需要深度缓冲区?
※ 在不使用深度测试的时候,如果我们先绘制一个距离比较近的物体,再绘制距离比较远的物体,则距离圆的位图因为后绘制,会把距离近的物体覆盖掉。有了深度缓冲区后,绘制物体的顺序就不那么重要了。实际上,只要存在深度缓冲区,OpenGL都会把像素的深度值写入到缓冲区中,除非调用glDepthMask(GL_FALSE)来禁止写入。

解决方案: Z-buffer方法(深度缓冲区Depth-buffer)

• 深度测试

  • 深度缓冲区(Depth-Buffer)和颜色缓存区(Color-buffer)是对应的,颜色缓存区存储像素的颜色嘻嘻,而深度缓冲区存储像素的深度信息,在决定是否绘制一个物体的表面时,首先要讲表面对应的像素的深度值与当前深度缓冲区的值进行比较。如果大于深度缓冲区中的值,则丢弃这部分。否则,利用这个像素对应的深度值和颜色值,分别更新深度缓冲区和颜色缓存区,这个过程称为"深度测试"。

• 深度值计算

  • 深度值一般是由16位,24位或者32位值表示,通常是24位。位数越高的话,深度的精确度越好。深度值的范围在[0,1]之间,值越小表示越靠近观察者,值越大表示远离观察者。

  • 深度缓冲主要是通过计算深度值来比较大小,在深度缓冲区中包含深度值结余0.0和1.0之间,从观察者看到其内容与场景中的所有对象的Z值进行了比较。这些视图空间中的Z值可以在投影平头截体的近平面和远平面之间的任何值。我们因此需要一些方法来转换这些视图空间Z值到[0,1]的范围内,下面的(线性)方程把Z值转换为0.0和1.0之间的值:(far和near是提供投影矩阵设置可见视图截锥的远近值)

    
    
    图片来源于网络

• 非线性深度缓存

  • 方程带内锥截体的深度值Z,并将其转换到[0,1]范围。在下面的图给出了Z值和其相应的深度值的关系

    
    
    图片来源网络

  • 在实践中是可以减少使用这样的线性深度缓冲区。正确的投影特性的非线性深度方程适合1/Z成正比的,由于非线性函数是和1/Z成正比,例如1.0和2.0之间的Z值,将变为1.0到0.5之间,这样在Z非常小的时候给了我们很高的精度。方程如下所示:

    
    
    图片来源网络

• 使用深度测试

  • 开启深度测试glEnable(GL_DEPTH_TEST);
  • 在绘制场景前,清除颜色缓存区,深度缓冲

   glClearColor(0.0f,0.0f,0.0f,1.0f);
   glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

• 指定深度测试判断式:void glDepthFunc(GLEnum mode);

• 打开/阻断 深度缓存区写入

//value:GL_TURE 开启深度缓冲区写入;GL_FALSE关闭深度缓冲区写入
void glDepthMask(GLBool value);

4. ZFighting闪烁问题
   为什么会出现ZFighting 闪烁问题呢?因为开启深度测试后,OpenGL就不会再去绘制模型被遮挡的部分。这样实现的显示更加真实,但是由于深度缓冲区精度的限制对于深度非常小的情况下,OpenGL就可能出现不能正确判断两者的深度值,会导致深度测试的结果不可预测,显示图像时交错闪烁,如下图两个画面交替出现:
   
   图片来源网络

解决方案
①第一步:启用Polygon Offset方式解决
让深度值之间产生间隙。如果2个图形之间有间隙,是不是意味着就不会差生干涉,可以理解为在执行深度测试前将立方体的深度值做一些细微的增加,于是就能将重叠的2个图形深度值之前有所区分

//启用Polygon Offset方式
//参数列表:
//GL_POLYGON_OFFSET_POINT 对应光栅化模式:GL_POINT
//GL_POLYGON_OFFSET_LINE 对应光栅化模式:GL_LINE
//GL_POLYGON_OFFSET_FILL 对应光栅化模式:GL_FILL
glEnable(GL_POLYGON_OFFSET_FILL);

②第二步:指定偏移量
- 通过glPolygonOffset来指定.glPolygonOffset需要2个参数:factor, units
- 每个Fragment的深度值都会增加如下所示的偏移量:offset = (m* factor) + (r * units);``m:多边形的深度的斜率的最大值,理解一个多边形越是与近裁剪面平行,m就越接近于0。r:能产生于窗口坐标系的深度值中可分辨的差异最小值,r是由具体的OpenGL平台指定的一个常量。
- 一个大于0的offset会把模型推到离你(摄像机)更远的位置,相应的一个小于0的offset会把模型拉近
- 一般而言,只需要将-0.1和 -1 这样简单赋值glPolygonOffset基本可以满足需求。

③第三步:关闭Polygon Offset

glDisable(GL_POLYGON_OFFSET_FILL);

④ZFighting闪烁问题预防
- 不要将两个物体靠的太近,避免渲染时三角形叠在一起。这种方式要求对场景中物体插入一个少量的偏移,那么就可能避免ZFighting现象。例如上面的立方体和平面问题中,将平面下移0.001f就可以解决这个问题。当然手动去插入这个小小的偏移是需要付出代价的(计算和性能)。
- 尽可能的将近裁面设置得离观察者远一些。上面我们看到,在近裁平面附近,深度的精确度是很高的,因此尽可能让近裁面远一些的话,会使整个裁剪范围内的精确度变高一些。但是这种方式会使离观察者较近的物体被裁减掉,因此需要调试好裁剪面参数。
- 使用更高位数的深度缓冲区,通常使用的深度缓冲区是24位的,现在一些硬件使用32位的缓冲区,使得精确度得到提高!

5. 裁剪
   在OpenGL中提高渲染的一种方式,只刷新屏幕上发生变化的部分。OpenGL允许将要进行渲染的窗口指定一个裁剪框。基本原理:用于渲染时限制渲染区域,通过此技术可以在屏幕(帧缓冲)指定一个矩形区域。启动裁剪测试之后,不在此矩形区域内的片元被丢弃,只有在此矩形区域内的片元才有可能进入帧缓冲。因此时机达到的效果就是在屏幕上开辟了一个小窗口,可以再其中进行制定内容的绘制。

//1.开启裁剪测试
glEnable(GL_SCISSOR_TEST);

//2. 关闭裁剪测试
glDisable(GL_SCISSOR_TEST);

//3.指定裁剪窗口
//x,y:指定剪裁框左下角的位置 width,height:指定裁剪尺寸
void glScissor(GLint x, GLint y, GLsize width, GLsize height);

6. 混合
   我们把OpenGL渲染时会把颜色值存在颜色缓存区中,每个片段的深度值也是放在深度缓冲区。当深度缓冲区被关闭时,新的颜色将简单的覆盖原来颜色缓存区存在的颜色值,当深度缓冲区再次打开时,新的颜色片段只是当它们比原来的值更接近邻近的裁剪平面才会替换原来的颜色片段。

//开启混合
glEnable(GL_BLEND);

• 组合颜色
  目标颜色:已经存储在颜色缓存区的颜色值
  源颜色:作为当前渲染命令结果进入颜色缓存区的颜色值

当混合功能被启动时,源颜色和目标颜色的组合方式是混合方程式控制的。在默认情况下,混合方程式如下所示:

//Cf:最终计算参数的颜色
//Cs:源颜色
//Cd:目标颜色
//S:源混合因子
//D:目标混合因子
Cf = (Cs * S) + (Cd * D)

• 设置混合因子

//设置混合因子
//S:源混合因子 D:目标混合因子
glBlendFunc(GLenum S, GLenum D);

混合效果按照如下:如果源颜色的alpha的值越高,添加的源颜色的颜色成分越高,目标颜色所保留的成分就会越少,混合函数经常用于实现一些在其他一切不透明的物体前面绘制一个透明物体的效果。

• 选择其他混合方程式

glBlendEquation(GLenum mode);

• glBlendFuncSeparate函数
  glBlendFunc指定源和目标RGBA值的混合函数;但是glBlendFuncSeparate函数则允许为RGB和Alpha成分单独指定混合函数。

/*
strRGB:源颜色的混合因子
dstRGB:目标颜色的混合因子
strAlpha:源颜色的Alpha因子
dstAlpha:目标颜色的Alpha因子
*/
void glBlendFuncSeparate(GLenum strRGB, GLenum dstRGB, GLenum strAlpha, GLenum dstAlpha);

附上完成后的完美甜甜圈吧:代码传送门
)

魔力圈剔除和深度测试.gif

总结: OpenGL是个大型状态机,总是用状态来记录和执行的单线程操作!学习它需要有比较的空间思维感,还有数学能力!祝各位头发越来越少,越来越强吧!