[TOC]
学习目标
- 渲染过程中可能产生的问题
- 油画渲染
- 正面和背面剔除
- 深度测试
- 多边形模型
- 多边形偏移
- 裁剪
- 颜色混合
一、在渲染过程中可能产生的问题
在绘制3D场景的时候,我们需要决定哪些部分是对观察者可见的,或者哪些部分是对观察者不可⻅的.对于不可见的部分,应该及早丢弃.例例如在⼀个不透明的墙壁后,就不应该渲染.这种情况叫做”隐藏⾯消除”(Hidden surface elimination).
比如以下的图形：
image.png
1.1、解决方案：油画法
- 油画算法
- 先绘制场景中的离观察者较远的物体，再绘制较近的物体。
- 例如下面的图例：
-
先绘制红色部分，再绘制黄色部分，最后再绘制灰色部分，即可解决隐藏面消除的问题
image.png 但是这样就没有弊端了吗？答案是NO！
-
1.2、解决方案：油画弊端
- 油画算法
-
使用油画算法，只要将场景按照物理距离观察者的距离远近排序，由远及近的绘制即可。那么会出现什么问题？如果三个三角形是叠加的情况下，油画算法将无法处理。
image.png
-
1.3、解决方案：正背面剔除（Face Culling）
- 背景
- 尝试相信一个3D图形，你从任何一个方向去观察，最多可以看到几个面？
- 答案是最多3个面。从一个立方体的任意位置和方向上看，你不可能看到多于3个面。
- 那么思考？
- 我们能以某种方式去丢弃这部分数据，OpenGL在渲染的性能即可提高超过50%。
- 解决问题
- 如何知道某个面在观察者的事业中出现呢？
- 任何平面都有2个面，正面/背面。这意味着你一个时刻只能看到一面。
- OpenGL 可以做到检查所有正面朝向观察者的面，并渲染它们。从而丢弃背面朝向的面。这样可以节约片元着色器的性能。
- 那么问题又来了？如何告诉OpenGL你绘制的图形，哪个是正面，哪个面是背面？
- 答案：通过分析
顶点数据的顺序来达到目的。
- 答案：通过分析
- 尝试相信一个3D图形，你从任何一个方向去观察，最多可以看到几个面？
1.5、解决方案：分析顶点顺序
- 如图可以看到顶点顺序
- image.png
- 正/背面区分
- 正面：按照逆时针顶点链接顺序的三角形面
- 背面：按照顺时针顶点链接顺序的三角形面
1.6、解决方案：分析立方体中的正背面
- image.png
- 分析
- 左侧三角形顶点顺序为：1->2->3; 右侧三角形的顶点顺序为：1->2->3.
- 当观察者在右侧时，则右边的三角形方向逆时针方向则为正面，而左侧的三角形为顺时针则为背面。
- 当观察者在左侧时，则左边的三角形逆时针方向则为正面，而右则的三角形为顺时针则为背面。
- 得出结论
正面和背面是有三角形的顶点定义顺序和观察者方向共同决定的，随着观察者的角度方向的改变，正面背面也会跟着改变
1.7、解决方案：正背面剔除的常用函数
- 开启表面剔除（默认背面剔除）
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
GL_CW 顺时针为正面，GL_CCW 逆时针为正面
*/
void glFrontFace(GLenum mode);
- 例如，剔除正面实现（1）
glCullFace(GL_BACK);
glFrontFace(GL_CW);
- 例如，剔除正面实现（2）一般用这种，上面那种代码冗余
glCullFace(GL_FRONT);
源码实例一：
//工具类
#include "GLTools.h"
//矩阵堆栈
#include "GLMatrixStack.h"
//投影矩阵
#include "GLFrame.h"
//矩阵
#include "GLFrustum.h"
//几何变换管道
#include "GLGeometryTransform.h"
#include <math.h>
#ifdef __APPLE__
#include <glut/glut.h>
#else
#define FREEGLUT_STATIC
#include <GL/glut.h>
#endif
// 观察者照相机
GLFrame viewFrame;
//使用GLFrustum类来设置透视投影
GLFrustum viewFrustum;
//容器帮助类
GLTriangleBatch torusBatch;
//模型视图矩阵
GLMatrixStack modelViewMatix;
//投影视图矩阵
GLMatrixStack projectionMatrix;
//几何变换管道
GLGeometryTransform transformPipeline;
//着色器
GLShaderManager shaderManager;
// 标记背面剔除、深度测试
int iCull = 0;
int iDepth = 0;
// 这个函数不需要初始化渲染
// context. 图像上下文
void SetupRc() {
//设置背景颜色
glClearColor(0.3f, 0.3f, 0.3f, 1.0f);
//初始化着色器管理器
shaderManager.InitializeStockShaders();
//将照相机向后移动7个单元，这是肉眼到物体的距离
viewFrame.MoveForward(7.0f);
//创建一个甜甜圈
// void gltMakeTorus(GLTriangleBatch& torusBatch, GLfloat majorRadius, GLfloat minorRadius, GLint numMajor, GLint numMinor);
/**
参数一：容器帮助类
参数二：外边缘半径（主半径）
参数三：内边缘半径（从半径）
参数四五：主半径和从半径的细分单元（三角形）数量
*/
gltMakeTorus(torusBatch, 1.0f, 0.3f, 52, 26);
//设置点的大小
glPointSize(4.0f);
}
// 召唤场景
void RenderScene(void) {
//清除窗口和深度缓冲区
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
//根据设置iClull标记来判断是否开启背面剔除
if (iCull) {
//开启背面剔除
glEnable(GL_CULL_FACE);
//指定逆向针顺序三角形为正面/指定顺时针下三角形为正面
glFrontFace(GL_CCW);
//切除那个面
glCullFace(GL_BACK);
}
/**
模型视图矩阵：图形发生变化：平移/旋转/缩放 放射变换，模型视图矩阵就是为了记录这些矩阵值
投影矩阵：投影方式正投影/透视，通过投影矩阵来记录这些矩阵值
*/
//把摄像机矩阵压入模型矩阵中-压栈方式
modelViewMatix.PushMatrix(viewFrame);
GLfloat vRed[] = {1.0f, 0.0f, 0.0f, 1.0f};
//使用平面着色器
//参数1：平面着色器
//参数2：模型视图投影矩阵
//有几种方式：transformPipeline.GetModelViewMatrix()：模型视图矩阵,GetNormalMatrix()默认视图矩阵，GetProjectionMatrix()投影视图矩阵，GetModelViewProjectionMatrix() 模型视图投影矩阵
//参数3：颜色
shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vRed);
//使用默认光源着色器
//通过光源、阴影效果跟提现立体效果
//参数1：GLT_SHADER_DEFAULT_LIGHT 默认光源着色器 - 着色器类型
//参数2：模型视图矩阵：
//参数3：投影矩阵
//参数4：基本颜色值
// shaderManager.UseStockShader(GLT_SHADER_DEFAULT_LIGHT, transformPipeline.GetModelViewMatrix(), transformPipeline.GetProjectionMatrix(), vRed);
//绘制
torusBatch.Draw();
//出栈
modelViewMatix.PopMatrix();
//
glutSwapBuffers();
}
//右键菜单栏选项
void ProcessMunu(int value) {
switch (value) {
case 1:
//是否开启正/背面剔除
iCull = !iCull;
break;
default:
break;
}
glutPostRedisplay();
}
void SpecailKeys(int key, int x, int y) {
if (key == GLUT_KEY_UP) {
viewFrame.RotateWorld(m3dDegToRad(-5.0), 1.0, 0.0, 0.0);
}
if (key == GLUT_KEY_DOWN) {
viewFrame.RotateWorld(m3dDegToRad(5.0), 1.0, 0.0, 0.0);
}
if (key == GLUT_KEY_LEFT) {
viewFrame.RotateWorld(m3dDegToRad(-5.0), 0.0, 1.0, 0.0);
}
if (key == GLUT_KEY_RIGHT) {
viewFrame.RotateWorld(m3dDegToRad(5.0), 0.0, 1.0, 0.0);
}
//重新刷新window
glutPostRedisplay();
}
void ChangeSize(int w, int h) {
//防止h为0
if (h == 0) {
h = 1;
}
//设置窗口尺寸
glViewport(0, 0, w, h);
//创建透视投影，并将它载入到投影矩阵堆栈中
/*SetPerspective
参数：
1.垂直方向上的视场角度
2.窗口的宽度与高度的纵横比
3.近裁剪面距离
4.远裁剪面距离
*/
//设置透视模式，初始化其透视矩阵
viewFrustum.SetPerspective(35.0f, float(w)/float(h), 1.0f, 100.f);
// 把透视矩阵加载到透视矩阵队阵中
projectionMatrix.LoadMatrix(viewFrustum.GetProjectionMatrix());
//初始化渲染管线
transformPipeline.SetMatrixStacks(modelViewMatix, projectionMatrix);
}
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(SpecailKeys);
// 显示函数
glutDisplayFunc(RenderScene);
//创建右键菜单
glutCreateMenu(ProcessMunu);
glutAddMenuEntry("Toggle cull backFace", 1);
glutAddMenuEntry("Toggle depth test", 2);
glutAddMenuEntry("Set Line 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", glewGetString(err));
return 1;
}
SetupRc();
glutMainLoop();
return 0;
}
- 通过平面着色器运行代码后出现的效果
- image.png
- 通过默认光源着色器运行代码效果如下：
-
image.png
- 那么会发现文章开始时的图片一样，图为未开启正/背面剔除
-
开启正/背面剔除后的效果
- image.png
虽然那些黑色页面已经消除掉，但是又遗留下问题-凹槽，那么怎么解决呢？答案是
深度测试。
-
1.8、了解深度
- 什么是深度？
- 深度其实就是该像素点在3D世界中距离摄像机的距离Z值
- 什么是深度缓冲区？
- 深度缓存区，就是一块内存区域，专门储存着每个像素点（绘制在屏幕上的）深度值。深度值（Z值）越大，则离摄像机越远。
- 为什么需要缓冲区？
-
在不使用深度测试的时候，如果我们先绘制一个距离比较近的物理，再绘制距离较远的物理，则距离远的位图因为后绘制，会被距离近的物体覆盖掉。有了深度缓冲区后，绘制 物体的顺序就不那么重要的。实际上，只要存在深度缓冲区，OpenGL都会把像素的深度值写入到缓冲区中。除非调用glDepthMask(GL_FALSE)来禁止写入。
image.png
-
1.9、解决⽅法: Z-buffer⽅法(深度缓冲区Depth-buffer)
- 深度测试
- 深度缓冲区(DepthBuffer)和颜色缓存区(ColorBuffer)是对应的。颜色缓存区储存像素的颜色信息,⽽深度缓冲区存储像素的深度信息. 在决定是否绘制一个物体表⾯时,
⾸先要将表⾯对应的像素的深度值与当前深度缓冲区中的值进⾏比较. 如果大于深度缓冲区中的值,则丢弃这部分.否则 利用这个像素对应的深度值和颜⾊值.分别更新深度缓冲区和颜⾊缓存区.这个过程称为”深度测试”
- 深度缓冲区(DepthBuffer)和颜色缓存区(ColorBuffer)是对应的。颜色缓存区储存像素的颜色信息,⽽深度缓冲区存储像素的深度信息. 在决定是否绘制一个物体表⾯时,
二、使用深度测试
- 深度缓冲区，一般由窗口管理系统，GLFW创建。深度一般由16位，24位，32位值来表示。通常是24位，位数越高，深度精度越好。
- 开启深度测试
glClearColor(0.0f,0.0f,0.0f,1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
- 清除深度缓冲区默认值为1.0，表示最大的深度值，深度值的范围(0,1)之间。值越小表示越靠近观察者，值越大表示越远表示越远离观察者。
2.1、指定深度测试判断式
//指定深度测试判断模式
void glDepthFunc(GLEnum mode);
-
默认是GL_LESS
- 如果想要打开或者阻止深度缓存的写入？
void glDepthMask(GLBool value);
value : GL_TURE 开启深度缓冲区写入; //GL_FALSE 关闭深度缓冲区写⼊
- 深度测试代码
//右键菜单栏选项
void ProcessMunu(int value) {
switch (value) {
case 1:
//是否开启正/背面剔除
iCull = !iCull;
break;
case 2:
// 是否开启深度测试
iDepth = !iDepth;
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();
}
// 召唤场景
void RenderScene(void) {
//清除窗口和深度缓冲区
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
//根据设置iClull标记来判断是否开启背面剔除
if (iCull) {
//开启背面剔除
glEnable(GL_CULL_FACE);
//指定逆向针顺序三角形为正面/指定顺时针下三角形为正面
glFrontFace(GL_CCW);
//切除那个面
glCullFace(GL_BACK);
}else {
glDisable(GL_CULL_FACE);
}
//根据设置iDepth标记来判断是否开启深度测试
if (iDepth) {
glEnable(GL_DEPTH_TEST);
}else {
glDisable(GL_DEPTH_TEST);
}
/**
模型视图矩阵：图形发生变化：平移/旋转/缩放 放射变换，模型视图矩阵就是为了记录这些矩阵值
投影矩阵：投影方式正投影/透视，通过投影矩阵来记录这些矩阵值
*/
//把摄像机矩阵压入模型矩阵中-压栈方式
modelViewMatix.PushMatrix(viewFrame);
GLfloat vRed[] = {1.0f, 0.0f, 0.0f, 1.0f};
//使用平面着色器
//参数1：平面着色器
//参数2：模型视图投影矩阵
//有几种方式：transformPipeline.GetModelViewMatrix()：模型视图矩阵,GetNormalMatrix()默认视图矩阵，GetProjectionMatrix()投影视图矩阵，GetModelViewProjectionMatrix() 模型视图投影矩阵
//参数3：颜色
// shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vRed);
//使用默认光源着色器
//通过光源、阴影效果跟提现立体效果
//参数1：GLT_SHADER_DEFAULT_LIGHT 默认光源着色器 - 着色器类型
//参数2：模型视图矩阵：
//参数3：投影矩阵
//参数4：基本颜色值
shaderManager.UseStockShader(GLT_SHADER_DEFAULT_LIGHT, transformPipeline.GetModelViewMatrix(), transformPipeline.GetProjectionMatrix(), vRed);
//绘制
torusBatch.Draw();
//出栈
modelViewMatix.PopMatrix();
//
glutSwapBuffers();
}
- 但是又会产生另外一个问题
ZFighting闪烁,那么什么是ZFighting呢？为什么会导致呢？
三、ZFighting问题的原因
-
为什么会出现ZFighting闪烁问题
-
因为开启深度测试后,OpenGL 就不会再去绘制模型被遮挡的部分. 这样实现的显示更加真实.但是 由于深度缓冲区精度的限制对于深度相差⾮常⼩的情况下.(例如在同一平面上进行2次制),OpenGL就可能出现不能正确判断两者的深度值,会导致深度测试的结果不可预测.显示出来的现象时交错闪烁的前面2个画⾯交错出现.
image.png
image.png
-
如图，因为多个画面在同一深度缓冲区时导致深度测试的结果不可预测，所以显示现象交错闪烁的前面2个画面交错出现的情况。
3.1、ZFighting闪烁问题问题解决
- 第一步：启用Polygon Offset方式解决
- 解决方法: 让深度值之间产生间隔.如果2个图形之间有间隔,是不是意味着就不会产⽣干涉.可以理解为在执⾏深度测试前将⽴方体的深度值做⼀些细微的增加.于是就能将重叠的2个图形深度值有所区分.
//启⽤Polygon Offset⽅式: glEnable(GL_POLYGON_OFFSET_FILL)
//参数列表: GL_POLYGON_OFFSET_POINT GL_POLYGON_OFFSET_LINE
GL_POLYGON_OFFSET_FILL
//对应光栅化模式: GL_POINT 对应光栅化模式: GL_LINE
//对应光栅化模式: GL_FILL
-
第二步：指定偏移量
- 通过glPolygonOffset 来指定glPolygonOffset 需要2个参数: factor , units
- 每个Fragment 的深度值都会增加如下所示的偏移量:
//m : 多边形的深度的斜率的最⼤大值,理理解⼀一个多边形越是与近裁剪⾯平行,m 就越接近于0. //r : 能产⽣于窗⼝坐标系的深度值中可分辨的差异最⼩值.r 是由具体是由具体OpenGL 平台指定的 ⼀个常量. Offset = ( m * factor ) + ( r * units);- ⼀个大于0的Offset 会把模型推到离你(摄像机)更远的位置,相应的⼀个小于0的Offset会把模型拉近
- ⼀般⽽言,只需要将-1.0和1.0 这样简单赋值给glPolygonOffset 基本可以满足需求.
void glPolygonOffset(Glfloat factor,Glfloat units); //应⽤到片段上总偏移计算方程式: Depth Offset = (DZ * factor) + (r * units); DZ:深度值(Z值) // r:使得深度缓冲区产⽣生变化的最⼩值 //负值，将使得z值距离我们更近，而正值，将使得z值距离我们更远
第三步：关闭Polygon Offset
glDisable(GL_POLYGON_OFFSET_FILL)
3.2、ZFighting闪烁问题预防
- 不要将两个物体靠的太近，避免渲染时三⻆形叠在⼀起。这种方式要求对场景中物体插入一个少量的偏移，那么就可能避免ZFighting现象。例如上面的立方体和平面问题中，将平面下移0.001f就可以解决这个问题。当然⼿动去插⼊这个小的偏移是要付出代价的。
- 尽可能将近裁剪面设置得离观察者远⼀些。上⾯我们看到，在近裁剪平⾯附近，深度的精确度是很⾼高的，因此尽可能让近裁剪面远一些的话，会使整个裁剪范围内的精确度变高⼀些。但是这种⽅式会使离观察者较近的物体被裁减掉，因此需要调试好裁剪⾯参数。
- 使⽤更高位数的深度缓冲区，通常使⽤的深度缓冲区是24位的，现在有一些硬件使用32位的缓冲区，使精确度得到提⾼。
四、裁剪
在OpenGL 中提⾼渲染的⼀种⽅式.只刷新屏幕上发⽣变化的部分OpenGL 允许将要进行渲染的窗⼝只 去指定⼀个裁剪框.
基本原理:⽤于渲染时限制绘制区域，通过此技术可以再屏幕(帧缓冲)指定⼀个矩形区域。启用剪裁测试之后，不在此矩形区域内的片元被丢弃，只有在此矩形区域内的⽚元才有可能进入帧缓冲。因此实际达到的效果就是在屏幕上开辟了了⼀个⼩窗口，可以再其中进行指定内容的绘制。
//1 开启裁剪测试 glEnable(GL_SCISSOR_TEST);
//2.关闭裁剪测试 glDisable(GL_SCISSOR_TEST);
//3.指定裁剪窗⼝
void glScissor(Glint x,Glint y,GLSize width,GLSize height);
x,y:指定裁剪框左下⻆位置; width , height:指定裁剪尺⼨
4.1、理解窗口，视口，裁剪区域
- 窗⼝: 就是显示界⾯
- 视⼝: 就是窗口中用来显示图形的⼀块矩形区域，它可以和窗口等大，也可以⽐窗⼝⼤或者⼩。只有绘制在视口区域中的图形才能被显示，如果图形有⼀部分超出了视口区域，那么那⼀部分是看不到的。
- 通过glViewport()函数设置。裁剪区域(平行投影):就是视⼝矩形区域的最小最大x坐标(left,right)和最⼩最⼤y坐标 (bottom,top)，⽽不是窗口的最小最大x坐标和y坐标。通过glOrtho()函数设置，这个函数还需指定最近最远z坐标，形成一个⽴体的裁剪区域。
image.png
image.png
代码实例
//demo OpenGL 裁剪
#include "GLTools.h"
#ifdef __APPLE__
#include <glut/glut.h>
#else
#define FREEGLUT_STATIC
#include <GL/glut.h>
#endif
//召唤场景
void RenderScene(void)
{
//设置清屏颜色为蓝色
glClearColor(0.0f, 0.0f, 1.0f, 0.0f);
glClear(GL_COLOR_BUFFER_BIT);
//1.现在剪成小红色分区
//(1)设置裁剪区颜色为红色
glClearColor(1.0f, 0.0f, 0.0f, 0.0f);
//(2)设置裁剪尺寸
glScissor(100, 100, 600, 400);
//(3)开启裁剪测试
glEnable(GL_SCISSOR_TEST);
//(4)开启清屏，执行裁剪
glClear(GL_COLOR_BUFFER_BIT);
// 2.裁剪一个绿色的小矩形
//(1).设置清屏颜色为绿色
glClearColor(0.0f, 1.0f, 0.0f, 0.0f);
//(2).设置裁剪尺寸
glScissor(200, 200, 400, 200);
//(3).开始清屏执行裁剪
glClear(GL_COLOR_BUFFER_BIT);
//关闭裁剪测试
glDisable(GL_SCISSOR_TEST);
//强制执行缓存区
glutSwapBuffers();
}
void ChangeSize(int w, int h)
{
//保证高度不能为0
if(h == 0)
h = 1;
// 将视口设置为窗口尺寸
glViewport(0, 0, w, h);
}
//程序入口
int main(int argc, char* argv[])
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize(800,600);
glutCreateWindow("OpenGL Scissor");
glutReshapeFunc(ChangeSize);
glutDisplayFunc(RenderScene);
glutMainLoop();
return 0;
}
五、混合
我们把OpenGL 渲染时会把颜⾊值存在颜色缓存区中，每个⽚片段的深度值也是放在深度缓冲区。当深度 缓冲区被关闭时，新的颜色将简单的覆盖原来颜色缓存区存在的颜⾊值，当深度缓冲区再次打开时，新的颜⾊片段只是当它们⽐原来的值更接近邻近的裁剪平⾯才会替换原来的颜⾊片段。
glEnable(GL_BlEND);
-
5.1、组合颜色
- ⽬标颜色:已经存储在颜色缓存区的颜⾊值
- 源颜色:作为当前渲染命令结果进入颜⾊缓存区的颜⾊值 当混合功能被启动时，源颜色和⽬标颜色的组合方式是混合方程式控制的。在默认情况下，
- 混合⽅程式如下所示:
Cf = (Cs * S) + (Cd * D) Cf: 最终计算参数的颜色 Cs: 源颜色 Cd: ⽬标颜色 S : 源合因子 D : 目标混合因子 -
5.2、设置混合因子
-
设置混合因子，需要用到glBlendFund函数
glBlendFunc(GLenum S,GLenum D); S:源合因⼦ D:⽬标混合因⼦image.png表中R、G、B、A 分别代表 红、绿、蓝、alpha。
表中下标S、D，分别代表源、目标
表中C 代表常量颜⾊(默认⿊色)
-
5.3 课堂案例
下⾯通过⼀个常见的混合函数组合来说明问题:
glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);
如果颜⾊缓存区已经有⼀种颜⾊红色(1.0f,0.0f,0.0f,0.0f),这个⽬标颜色Cd，如果在这上⾯用⼀种alpha为0.6的蓝⾊(0.0f,0.0f,1.0f,0.6f)
Cd (⽬标颜色) = (1.0f,0.0f,0.0f,0.0f);
Cs (源颜色) = (0.0f,0.0f,1.0f,0.6f);
S = 源alpha值 = 0.6f
D = 1 - 源alpha值 = 1-0.6f = 0.4f
⽅程式 Cf = (Cs * S) + (Cd * D)
等价于 = (Blue * 0.6f) + (Red * 0.4f)
5.4、总结
最终颜色是以原先的红色(⽬标颜色)与 后来的蓝⾊(源颜色)进⾏组合。源颜⾊的alpha值 越⾼，添加的蓝色颜色成分越高，⽬标颜色所保留的成分就会越少。混合函数经常⽤于实现在其他一些不透明的物体前⾯绘制⼀个透明物体的效果。
5.5、案例
- 代码如下：
//颜色组合
#include "GLTools.h"
#include "GLShaderManager.h"
#ifdef __APPLE__
#include <glut/glut.h>
#else
#define FREEGLUT_STATIC
#include <GL/glut.h>
#endif
GLBatch squareBatch;
GLBatch greenBatch;
GLBatch redBatch;
GLBatch blueBatch;
GLBatch blackBatch;
GLShaderManager shaderManager;
GLfloat blockSize = 0.2f;
GLfloat vVerts[] = { -blockSize, -blockSize, 0.0f,
blockSize, -blockSize, 0.0f,
blockSize, blockSize, 0.0f,
-blockSize, blockSize, 0.0f};
void SetupRC()
{
glClearColor(1.0f, 1.0f, 1.0f, 1.0f );
shaderManager.InitializeStockShaders();
//绘制1个移动矩形
squareBatch.Begin(GL_TRIANGLE_FAN, 4);
squareBatch.CopyVertexData3f(vVerts);
squareBatch.End();
//绘制4个固定矩形
GLfloat vBlock[] = { 0.25f, 0.25f, 0.0f,
0.75f, 0.25f, 0.0f,
0.75f, 0.75f, 0.0f,
0.25f, 0.75f, 0.0f};
greenBatch.Begin(GL_TRIANGLE_FAN, 4);
greenBatch.CopyVertexData3f(vBlock);
greenBatch.End();
GLfloat vBlock2[] = { -0.75f, 0.25f, 0.0f,
-0.25f, 0.25f, 0.0f,
-0.25f, 0.75f, 0.0f,
-0.75f, 0.75f, 0.0f};
redBatch.Begin(GL_TRIANGLE_FAN, 4);
redBatch.CopyVertexData3f(vBlock2);
redBatch.End();
GLfloat vBlock3[] = { -0.75f, -0.75f, 0.0f,
-0.25f, -0.75f, 0.0f,
-0.25f, -0.25f, 0.0f,
-0.75f, -0.25f, 0.0f};
blueBatch.Begin(GL_TRIANGLE_FAN, 4);
blueBatch.CopyVertexData3f(vBlock3);
blueBatch.End();
GLfloat vBlock4[] = { 0.25f, -0.75f, 0.0f,
0.75f, -0.75f, 0.0f,
0.75f, -0.25f, 0.0f,
0.25f, -0.25f, 0.0f};
blackBatch.Begin(GL_TRIANGLE_FAN, 4);
blackBatch.CopyVertexData3f(vBlock4);
blackBatch.End();
}
//上下左右键位控制移动
void SpecialKeys(int key, int x, int y)
{
GLfloat stepSize = 0.025f;
GLfloat blockX = vVerts[0];
GLfloat blockY = vVerts[7];
if(key == GLUT_KEY_UP)
blockY += stepSize;
if(key == GLUT_KEY_DOWN)
blockY -= stepSize;
if(key == GLUT_KEY_LEFT)
blockX -= stepSize;
if(key == GLUT_KEY_RIGHT)
blockX += stepSize;
if(blockX < -1.0f) blockX = -1.0f;
if(blockX > (1.0f - blockSize * 2)) blockX = 1.0f - blockSize * 2;;
if(blockY < -1.0f + blockSize * 2) blockY = -1.0f + blockSize * 2;
if(blockY > 1.0f) blockY = 1.0f;
vVerts[0] = blockX;
vVerts[1] = blockY - blockSize*2;
vVerts[3] = blockX + blockSize*2;
vVerts[4] = blockY - blockSize*2;
vVerts[6] = blockX + blockSize*2;
vVerts[7] = blockY;
vVerts[9] = blockX;
vVerts[10] = blockY;
squareBatch.CopyVertexData3f(vVerts);
glutPostRedisplay();
}
//召唤场景
void RenderScene(void)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);
//定义4种颜色
GLfloat vRed[] = { 1.0f, 0.0f, 0.0f, 0.5f };
GLfloat vGreen[] = { 0.0f, 1.0f, 0.0f, 1.0f };
GLfloat vBlue[] = { 0.0f, 0.0f, 1.0f, 1.0f };
GLfloat vBlack[] = { 0.0f, 0.0f, 0.0f, 1.0f };
//召唤场景的时候，将4个固定矩形绘制好
//使用 单位着色器
//参数1：简单的使用默认笛卡尔坐标系（-1，1），所有片段都应用一种颜色。GLT_SHADER_IDENTITY
//参数2：着色器颜色
shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vGreen);
greenBatch.Draw();
shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vRed);
redBatch.Draw();
shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vBlue);
blueBatch.Draw();
shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vBlack);
blackBatch.Draw();
//组合核心代码
//1.开启混合
glEnable(GL_BLEND);
//2.开启组合函数 计算混合颜色因子
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
//3.使用着色器管理器
//*使用 单位着色器
//参数1：简单的使用默认笛卡尔坐标系（-1，1），所有片段都应用一种颜色。GLT_SHADER_IDENTITY
//参数2：着色器颜色
shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vRed);
//4.容器类开始绘制
squareBatch.Draw();
//5.关闭混合功能
glDisable(GL_BLEND);
//同步绘制命令
glutSwapBuffers();
}
void ChangeSize(int w, int h)
{
glViewport(0, 0, w, h);
}
int main(int argc, char* argv[])
{
gltSetWorkingDirectory(argv[0]);
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH);
glutInitWindowSize(800, 600);
glutCreateWindow("移动矩形，观察颜色");
GLenum err = glewInit();
if (GLEW_OK != err)
{
fprintf(stderr, "Error: %s\n", glewGetErrorString(err));
return 1;
}
glutReshapeFunc(ChangeSize);
glutDisplayFunc(RenderScene);
glutSpecialFunc(SpecialKeys);
SetupRC();
glutMainLoop();
return 0;
}
5.6、glBlendFuncSeparate 函数
除了能使⽤glBlendFunc 来设置混合因子，还可以有更灵活的选择。
void glBlendFuncSeparate(GLenum strRGB,GLenum dstRGB ,GLenum strAlpha,GLenum dstAlpha);
strRGB: 源颜色的混合因⼦ dstRGB: ⽬标颜色的混合因子 strAlpha: 源颜⾊的Alpha因子 dstAlpha: ⽬标颜⾊的Alpha因子
5.7 glBlendFuncSeparate 注意
- glBlendFunc 指定源和目标 RGBA值的混合函数;但是glBlendFuncSeparate函数则允许为RGB 和 Alpha 成分单独指定混合函数。
- GL_CONSTANT_COLOR,GL_ONE_MINUS_CONSTANT_COLOR,GL_CONSTANT_ALPHA,GL_ONE_MINUS_CONSTANT值允许混合⽅程式中引⼊⼀个常量混合颜⾊。
5.8、常量混合颜色
常量混合颜色，默认初始化为⿊色(0.0f,0.0f,0.0f,0.0f)，但是还是可以修改这个常量混合颜色。
void glBlendColor(GLclampf red ,GLclampf green ,GLclampf blue ,GLclampf alpha);
