第20课：蒙板 (参照NeHe)
这次教程中，我们教介绍OpenGL的蒙板技术。到目前为止，我们已经学会如何使用alpha混合，把一个透明物体渲染到屏幕上了，但有时使用它看起来并不是那么的复合我们的心意。使用蒙板技术，将会使图像按照我们设定的蒙板位置精确地绘制。
直到现在，我们在把图像加载到屏幕上时都没有檫除背景色，因为这样简单高效，但是效果并不总是很好。大部分情况下，把纹理混合到屏幕，纹理不是太少就是太多。当我们使用精灵图时，我们不希望背景从精灵的缝隙中透出光来；但在显示文字时，我们又希望文字的间隙可以显示背景色。
基于上述原因，我们需要使用“掩模”。使用“掩膜”需要两个步骤，首先我们在场景上放置黑白相间的纹理，白色代表透明部分，黑色代表不透明部分。接着我们使用一种特殊的混合方式，只有在黑色部分上的纹理才会显示在场景中。
程序运行时效果如下：
下面进入教程：
我们这次将在第06课代码的基础上修改代码，总体上并不会太难，希望大家能理解蒙板技术，这技术真的很好用。首先打开myglwidget.h文件，将类声明更改如下：
#ifndef MYGLWIDGET_H
#define MYGLWIDGET_H
#include <QWidget>
#include <QGLWidget>
class MyGLWidget : public QGLWidget
{
Q_OBJECT
public:
explicit MyGLWidget(QWidget *parent = 0);
~MyGLWidget();
protected:
//对3个纯虚函数的重定义
void initializeGL();
void resizeGL(int w, int h);
void paintGL();
void keyPressEvent(QKeyEvent *event); //处理键盘按下事件
private:
bool fullscreen; //是否全屏显示
bool m_Masking; //是否使用"<span style="font-size:12px;">掩模</span>"
bool m_Scene; //控制绘制哪一层
GLfloat m_Rot; //控制纹理滚动
QString m_FileName[5]; //图片的路径及文件名
GLuint m_Texture[5]; //储存五个纹理
};
#endif // MYGLWIDGET_H接下来，我们打开myglwidget.cpp，在构造函数中对新增变量进行初始化，比较简单，大家参照注释理解，不多作解释，具体代码如下：
MyGLWidget::MyGLWidget(QWidget *parent) :
QGLWidget(parent)
{
fullscreen = false;
m_Masking = true;
m_Scene = false;
m_FileName[0] = "D:/QtOpenGL/QtImage/Logo.bmp"; //纹理0
m_FileName[1] = "D:/QtOpenGL/QtImage/Mask1.bmp"; //<span style="font-size:12px;">掩模</span>纹理1,作为"<span style="font-size:12px;">掩模</span>"使用
m_FileName[2] = "D:/QtOpenGL/QtImage/Image1.bmp"; //纹理1
m_FileName[3] = "D:/QtOpenGL/QtImage/Mask2.bmp"; //<span style="font-size:12px;">掩模</span>纹理2,作为"<span style="font-size:12px;">掩模</span>"使用
m_FileName[4] = "D:/QtOpenGL/QtImage/Image2.bmp"; //纹理2
QTimer *timer = new QTimer(this); //创建一个定时器
//将定时器的计时信号与updateGL()绑定
connect(timer, SIGNAL(timeout()), this, SLOT(updateGL()));
timer->start(10); //以10ms为一个计时周期
}然后，我们略微修改下initializeGL()函数，就是载入5个位图并转换成纹理，不多解释了，具体代码如下：
void MyGLWidget::initializeGL() //此处开始对OpenGL进行所以设置
{
//载入位图并转换成纹理
for (int i=0; i<5; i++){
m_Texture[i] = bindTexture(QPixmap(m_FileName[i]));
}
glEnable(GL_TEXTURE_2D); //启用纹理映射
glClearColor(0.0f, 0.0f, 0.0f, 0.0f); //黑色背景
glShadeModel(GL_SMOOTH); //启用阴影平滑
glClearDepth(1.0); //设置深度缓存<pre name="code" class="cpp"><pre name="code" class="cpp">}继续，我们要进入最有趣的paintGL()函数，当然这也是重点，具体代码如下：
void MyGLWidget::paintGL() //从这里开始进行所以的绘制
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); //清除屏幕和深度缓存
glLoadIdentity(); //重置模型观察矩阵
glTranslatef(0.0f, 0.0f, -2.0f); //移入屏幕2.0单位
glBindTexture(GL_TEXTURE_2D, m_Texture[0]); //选择Logo纹理
glBegin(GL_QUADS); //绘制纹理四边形
glTexCoord2f(0.0f, -m_Rot+0.0f);
glVertex3f(-1.1f, -1.1f, 0.0f);
glTexCoord2f(3.0f, -m_Rot+0.0f);
glVertex3f(1.1f, -1.1f, 0.0f);
glTexCoord2f(3.0f, -m_Rot+3.0f);
glVertex3f(1.1f, 1.1f, 0.0f);
glTexCoord2f(0.0f, -m_Rot+3.0f);
glVertex3f(-1.1f, 1.1f, 0.0f);
glEnd();
glEnable(GL_BLEND); //启用混合
glDisable(GL_DEPTH_TEST); //禁用深度测试
if (m_Masking) //是否启用"<span style="font-size:12px;">掩模</span>"
{
glBlendFunc(GL_DST_COLOR, GL_ZERO); //使用黑白"<span style="font-size:12px;">掩模</span>"
}
if (m_Scene)
{
glTranslatef(0.0f, 0.0f, -1.0f); //移入屏幕1.0单位
glRotatef(m_Rot*360, 0.0f, 0.0f, 1.0f); //绕z轴旋转
if (m_Masking) //"<span style="font-size:12px;">掩模</span>"是否打开
{
glBindTexture(GL_TEXTURE_2D, m_Texture[3]); //选择第二个"<span style="font-size:12px;">掩模</span>"纹理
glBegin(GL_QUADS); //开始绘制四边形
glTexCoord2f(0.0f, 0.0f);
glVertex3f(-1.1f, -1.1f, 0.0f);
glTexCoord2f(1.0f, 0.0f);
glVertex3f(1.1f, -1.1f, 0.0f);
glTexCoord2f(1.0f, 1.0f);
glVertex3f(1.1f, 1.1f, 0.0f);
glTexCoord2f(0.0f, 1.0f);
glVertex3f(-1.1f, 1.1f, 0.0f);
glEnd();
}
glBlendFunc(GL_ONE, GL_ONE); //把纹理2复制到屏幕上
glBindTexture(GL_TEXTURE_2D, m_Texture[4]); //选择第二个纹理
glBegin(GL_QUADS); //绘制四边形
glTexCoord2f(0.0f, 0.0f);
glVertex3f(-1.1f, -1.1f, 0.0f);
glTexCoord2f(1.0f, 0.0f);
glVertex3f(1.1f, -1.1f, 0.0f);
glTexCoord2f(1.0f, 1.0f);
glVertex3f(1.1f, 1.1f, 0.0f);
glTexCoord2f(0.0f, 1.0f);
glVertex3f(-1.1f, 1.1f, 0.0f);
glEnd();
}
else
{
if (m_Masking) //"<span style="font-size:12px;">掩模</span>"是否打开
{
glBindTexture(GL_TEXTURE_2D, m_Texture[1]); //选择第一个"<span style="font-size:12px;">掩模</span>"纹理
glBegin(GL_QUADS); //绘制四边形
glTexCoord2f(m_Rot+0.0f, 0.0f);
glVertex3f(-1.1f, -1.1f, 0.0f);
glTexCoord2f(m_Rot+4.0f, 0.0f);
glVertex3f(1.1f, -1.1f, 0.0f);
glTexCoord2f(m_Rot+4.0f, 4.0f);
glVertex3f(1.1f, 1.1f, 0.0f);
glTexCoord2f(m_Rot+0.0f, 4.0f);
glVertex3f(-1.1f, 1.1f, 0.0f);
glEnd();
}
glBlendFunc(GL_ONE, GL_ONE); //把纹理1复制到屏幕
glBindTexture(GL_TEXTURE_2D, m_Texture[2]); //选择第一个纹理
glBegin(GL_QUADS); //绘制四边形
glTexCoord2f(m_Rot+0.0f, 0.0f);
glVertex3f(-1.1f, -1.1f, 0.0f);
glTexCoord2f(m_Rot+4.0f, 0.0f);
glVertex3f(1.1f, -1.1f, 0.0f);
glTexCoord2f(m_Rot+4.0f, 4.0f);
glVertex3f(1.1f, 1.1f, 0.0f);
glTexCoord2f(m_Rot+0.0f, 4.0f);
glVertex3f(-1.1f, 1.1f, 0.0f);
glEnd();
}
glEnable(GL_DEPTH_TEST); //启用深度测试
glDisable(GL_BLEND); //禁用混合
m_Rot += 0.002f; //增加调整纹理滚动旋转变量
if (m_Rot > 1.0f)
{
m_Rot -= 1.0f;
}
}接着我们需要根据m_Masking的值设置是否使用“掩模”，如果是，我们需要设置相应的混合因子。一个“掩模”只是一幅绘制到屏幕的纹理图片，但只有黑色和白色，白色的部分代表透明，黑色的部分代表不透明。我们设置的混合因子GL_DST_COLOR、GL_ZERO使得任何纹理（OpenGL并不知道这是不是“掩模”）黑色的部分会变为黑色，白色的部分会保持原来的颜色，就是变成透明，透过了原来的颜色。
然后我们检查是绘制哪一个场景（图层），true绘制第二层，false绘制第一层。true时先开始绘制第二层，为了不使得它看起来太大，我们把它移入屏幕1.0单位，并把它按m_Rot的值绕z轴旋转。接着我们检查m_Marking的值，如果为true，我们就把“掩模”绘制到屏幕上，当我们完成这个操作时，将会看到一个镂空的纹理出现在屏幕上。然后我们变换混合因子GL_ONE、GL_ONE，这次我们告诉OpenGL把任何黑色部分对应的像素复制到屏幕，这样看起来纹理就像被镂空一样贴在屏幕上。要注意的是，我在变换了混合因子后才选择的纹理。如果我们没有使用 “掩模”，我们的图像将与屏幕颜色融合。
下面我绘制第一层与第二层的绘制基本相同，不多解释了。最后我们启用深度测试，禁用混合，然后增加m_Rot变量，如果大于1.0，把它的值减去1.0。
最后我们修改一下键盘控制函数，就是加上了空格和M键作为切换键，很简单不多解释了，具体代码如下：
void MyGLWidget::keyPressEvent(QKeyEvent *event)
{
switch (event->key())
{
case Qt::Key_F1: //F1为全屏和普通屏的切换键
fullscreen = !fullscreen;
if (fullscreen)
{
showFullScreen();
}
else
{
showNormal();
}
updateGL();
break;
case Qt::Key_Escape: //ESC为退出键
close();
break;
case Qt::Key_Space: //空格为场景(图层)的切换键
m_Scene = !m_Scene;
break;
case Qt::Key_M: //M为是否"掩膜"的切换键
m_Masking = !m_Masking;
break;
}
}一点内容的补充：上面我们提到当调用glTexCoord选择纹理坐标时，如果大于1.0，OpenGL默认截取小数部分进行处理。其实这只是OpenGL默认的处理模式：GL_REPEAT。对于纹理坐标大于1.0，OpenGL有以下几种处理模式：
GL_CLAMP - 截取
GL_REPEAT - 重复（OpenGL默认的模式）
GL_MIRRORED_REPEAT - 镜像重复
GL_CLAMP_TO_EDGE - 忽略边框截取
GL_CLAMP_TO_BORDER - 带边框的截取
我们可以利用glTexParameter函数来进行模式的转换，如：x方向的转换为glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP)，变换模式只需更改第三个参数。而第二参数代表方向，GL_TEXTURE_WRAP_S代表x方向，GL_TEXTURE_WRAP_T代表y方向，GL_TEXTURE_WRAP_R代表z方向。