8.2 使用Alpha混合技术

ゞ浴缸里的玫瑰 2022-05-25 06:39 189阅读 0赞

## Let’s start！ ##

在介绍深度测试的时候说到过Alpha混合的作用，就是为了实现游戏或其他场景中透明物体的遮挡问题：我们需要遮挡，但是并未看不见被遮挡的物体，有时，透过一块干净的玻璃观察物体，甚至尤其的清楚！  
有了使用深度测试技术的基础，在学习Alpha混合技术便轻松一些，但是二者只是在使用方法上类似，真正的原理却大不相同。例如：深度测试是发生在深度缓冲区当中，而Alpha混合则是发生在颜色缓冲区内；深度测试从原理上看，是比较两个值，然后只保留其中的一个值，而Alpha混合，从名字上也看的出是二者兼顾。进一步说，实现物体透明的根本如何？真的如现实世界中那样，一个物体是透明的，所以被遮挡物体反射的光仍能穿过它，最终进到我们的眼睛里？带着这个问题，让我们一探究竟！

## Alpha混合原理 ##

在前面的程序中，经过深度测试后，总是会执行绘制图形的颜色“替换”或者“不替换”当前颜色缓冲区中已经存在的颜色，这取决于自己指定的比较函数（D3DCMPFUN）。如果想要绘制类似水或玻璃这种透明的物体，显然这种技术无法实现。  
通过定义一个表示物体半透明度的Alpha值和一个半透明度计算公式。可以把将要绘制的物体颜色与颜色缓冲区中先前存在的颜色相混合，从而可以绘制出具有半透明效果的物体。Direct3D计算Alpha颜色混合的方法如下：  
![这里写图片描述][70]

> 其中Color表示Alpha混合后的颜色值；RGB（src）表示源颜色值，即将要绘制的图元的颜色值，K（src）表示源混合系数，通常赋值为表示物体半透明程度的Alpha值，也可以是属于枚举类型D3DBLEND（下文详细介绍）的任意值，用来和RGB（src）相乘；类似的，RGB（dest）表示目标颜色值，即当前颜色缓冲区中的颜色值；K（dest）表示目标混合系数，可以是属于枚举D3DBLEND的任意值，用来和RGB（dest）相乘；OP表示原计算结果与颜色缓冲区计算结果的混合方法，默认状态下OP为D3DBLEND\_ADD，即两个结果求和。

在图形显示中，对Alpha混合最普遍的用法是：把K（src）赋值为D3DBLEND\_SRCALPHA，即当前绘制像素的Alpha值；把K（src）赋值为D3DBLEND\_INVSRCALPHA，即1减去当前绘制像素的Alpha值；把OP赋值为D3DBLENDOP\_ADD，使源计算结果和颜色缓冲区的计算结果相加，这样一来，Alpha混合颜色的公式变为：  
![这里写图片描述][70 1]  
使用这种设置可以较好的模拟大多数半透明物体的效果。**注意！这里的源颜色与目标颜色意味着什么？当我们先绘制了一个茶壶，后绘制了一块玻璃来遮挡茶壶，在绘制玻璃的时候，需要与之前绘制的茶壶进行颜色混合（因为玻璃是透明的）。这时，公式中的源颜色是玻璃的像素颜色（相应的源Alpha也指的是玻璃像素中的Alpha值），公式中的目标颜色是茶壶也即后台缓冲区中已经存在的颜色。（相应的目标Alpha也是茶壶的像素Alpha值）也许这也为我们指定了在渲染图形时的顺序，这很重要！**  
通过上面的介绍及结合混合公式的理解，我们可以得出更简洁的结论：为了达到透明的效果，我们需要将重叠物体的颜色混合，首先我们需要找到一种混合方法，我们将两种颜色各自乘上了一个权重（weight），即把像素的Alpha通道作为这个权重的参考数据，接着又确定出一种计算方法（加法最为常用），来使两种颜色真正的“混合”起来，最终让物体变得“透明”。就是这样，现在是时候将这项技术付诸实践了！

## 实现半透明效果的步骤 ##

我在最开始说过，Alpha混合的实现步骤与深度测试很相似，我想你也许可以猜到，我们又应该请出我们的老朋友LPDIRECT3DDEVICE9::SetRenderState函数了。让我们闭目思考一下深度测试的使用步骤，因为需要测试的数据结构，我们首相用d3dpp告诉Direct3D创建一个深度缓冲区，然后我们应该激活，对了，还得根据深度测试的过程来设置一些比较方法……

> （1）启用Alpha混合  
> （2）设置Alpha混合系数  
> （3）设置Alpha混合方法

这看起来很眼熟，但怎么会比深度测试的步骤少？不要被所见到的蒙蔽双眼！我们的确需要后台颜色缓冲区并且每帧渲染前都要把它清除，但是你在前面的程序中早已经把这两条语句用烂了！  
**（1）启用Alpha混合**  
要想绘制半透明物体，首先需要激活Direct3D的Alpha混合运算。（不要看下面的代码，自己把它写出来吧~）调用Direct3D渲染状态设置函数LPDIRECT3DDEVICE9::SetRenderState，将第一个参数设置为D3DRS\_ALPHABLENDENABLE，第二个参数设置为TRUE，可以激活Alpha混合，代码如下：  
![这里写图片描述][70 2]  
**（2）设置Alpha混合系数**  
“混合系数”就是公式中的那两个K，不要被名字恐吓到，就是我们理解中的权值，但是它的重要性是不言而喻的，想想，我们决定了重叠物体中哪个物体的颜色所占比重更大一些，也就是说，“混合系数”控制着物体所表现出的透明度的大小。  
这个工作仍由LPDIRECT3DDEVICE9::SetRenderState函数来完成，若将第一个参数设置为D3DRS\_SRCBLEND（顺便说一下blend是“混合”，‘’融合’的意思），则用于设置源混合系数，若将第一个参数设置为D3DRS\_DESTBLEND，则用于设置目标混合系数，第二个参数可以设置D3DBLEND枚举常量，其定义如下：  
![这里写图片描述][70 3]  
具体含义如下：  
![这里写图片描述][70 4]  
在本节的示例程序中，设置Alpha混合系数的代码如下：  
![这里写图片描述][70 5]  
**（3）设置Alpha混合方法**  
Alpha混合方法指定了源颜色和目标颜色的混合方法。Alpha混合方法也是通过Direct3D渲染状态设置函数LPDIRECT3DDEVICE9::SetRenderState设置的，其中第一个参数设置为D3DRS\_BLENDOP，第二个参数设置为D3DBLENDOP枚举常量，其定义如下：  
![这里写图片描述][70 6]  
具体含义如下：  
![这里写图片描述][70 7]  
如果程序中没有显式的设置Alpha混合方法，程序将采用默认的Alpha混合方法D3DBLENDOP\_ADD，即源计算结果与目标计算结果相加。  
**（4）易被忽略的步骤！**  
我们初始化d3dpp（D3DPRESENT\_PARAMETERS结构体）成员以及其默认的一些缺省值指定了后台缓冲区的的格式、数量、大小等等，从而创建了后台颜色缓冲区；又因为在每次渲染前我们都调用了LPDIRECT3DDEVICE9::Clear函数，其中的第三个参数我们设置为D3DCLEAR\_TARGET从而在绘制每帧前都会清空颜色缓冲区。这样整个Alpha混合的步骤就完备了，下面就开始我们的实例！

## 示例一——顶点Alpha ##

**（1）程序的运行效果**  
![这里写图片描述][70 8]  
**（2）程序设计思路**  
通过效果可以观察到，开始的时候，Alpha混合是关闭的，非透明的矩形将旋转的红色茶壶遮挡住，通过按下键盘上的‘W’与‘S’键可以打开或关闭Alpha混合，当打开Alpha混合时，矩形拥有了一定的透明度，所以可以透过矩形看到其背后的茶壶，使我们感觉像透过一层玻璃那样。  
**（3）部分关键代码（完整代码可以在文末下载）**  
有关后台颜色缓冲区的创建代码：

//设置D3DPRESENT_PARAMETERS结构，准备创建Direct3D设备对象
        D3DPRESENT_PARAMETERS d3dpp;
        ZeroMemory(&d3dpp, sizeof(d3dpp));
        d3dpp.Windowed = TRUE;                      //标记窗口方式还是全屏方式显示
        d3dpp.SwapEffect = D3DSWAPEFFECT_DISCARD;   //后台缓冲区与前台缓冲区内容 的交换方式
        d3dpp.BackBufferFormat = D3DFMT_UNKNOWN;    //后台缓冲区像素格式

矩形的RGB值及Alpha值：

//遮挡板顶点数据
        CUSTOMVERTEX g_Vertices[] = {
            { -1.0f, -1.0f, -5.0f,D3DCOLOR_ARGB(80, 175, 238, 238) },
            { -1.0f, 1.0f, -5.0f, D3DCOLOR_ARGB(80, 175, 238, 238) },
            { 1.0f, -1.0f, -5.0f, D3DCOLOR_ARGB(80, 175, 238, 238) },
            { 1.0f, 1.0f, -5.0f,  D3DCOLOR_ARGB(80, 175, 238, 238) }
        };

渲染状态的相关设置：

//设置渲染状态
        g_pd3dDevice->SetRenderState(D3DRS_SRCBLEND, D3DBLEND_SRCALPHA);    //将源混合系数设置为源Alpha值          
        g_pd3dDevice->SetRenderState(D3DRS_DESTBLEND, D3DBLEND_INVSRCALPHA);    //将目标混合系数设置为1-源Alpha值
        g_pd3dDevice->SetRenderState(D3DRS_BLENDOP, D3DBLENDOP_ADD);    //设置Alpha混合方法为add
        g_pd3dDevice->SetRenderState(D3DRS_AMBIENT, 0xffffffff);    //设置环境光

两个物体的渲染顺序（尤其注意！）：

//开始渲染
        if (SUCCEEDED(g_pd3dDevice->BeginScene())) {
            渲染茶壶
            g_pd3dDevice->SetRenderState(D3DRS_LIGHTING, TRUE);
            g_pd3dDevice->SetTransform(D3DTS_WORLD, &g_matTea);
            g_pd3dDevice->SetMaterial(&TeapotMtrl);
            g_pd3dDevice->SetTexture(0, 0);
            Teapot->DrawSubset(0);
    
            //渲染遮挡板
            g_pd3dDevice->SetRenderState(D3DRS_LIGHTING, FALSE);
            g_pd3dDevice->SetTransform(D3DTS_WORLD, &g_matShutter);
            g_pd3dDevice->SetStreamSource(0, g_pShutter, 0, sizeof(CUSTOMVERTEX));
            g_pd3dDevice->SetFVF(D3DFVF_CUSTOMVERTEX);
            g_pd3dDevice->DrawPrimitive(D3DPT_TRIANGLESTRIP, 0, 2);
    
            g_pd3dDevice->EndScene();
        }

**（4）何谓“顶点Alpha”？**  
你可能已经注意到，这个实例的名称是“顶点Alpha”。因为Alpha的值来源于像素颜色信息的第四个通道（四个通道分别是R、G、B、A），那么，让我们想想在我们之前的渲染程序中，RGB颜色值都有哪些来源，可以直接来源于我们自己设置的构成图元（Primitives）的顶点颜色，也可以来源于物体材质（Material）与光（Light）的相互作用，还可以来源于我们贴在图元上的纹理贴图。既然这四个通道地位是同等的，自然Alpha的值也有来源于顶点、材质（+光照）和纹理的区分。  
上面的例子展示了Alpha来自于顶点的情况，因为我们在给矩形顶点赋值的时候，用了D3DCOLOR\_ARGB这个宏，并把Alpha设置为了80（也即80/255）。下面会分别介绍来自材质的“材质Alpha”和来自纹理的“纹理Alpha”，其中“纹理Alpha”相对特殊，我们在下篇文章中专门介绍。

## 示例二——材质Alpha ##

**（1）基本概念：**顶点Alpha是没有使用灯光和材质的情况，如果对场景内物体添加了灯光和材质而没有添加纹理时，顶点Alpha值**取决于材质属性中漫反射属性中的Alpha系数和灯光颜色中的Alpha值**，顶点Alpha是根据光照计算得到的。

**（2）运行效果：**  
![这里写图片描述][70 9]  
**（3）设计思路：**  
结合运行效果，我们的测试思路是：为了运用来源于材质的Alpha，我们借助了Direct3D内置的两个网格模型（圆柱体和茶壶），这两者的颜色均是来源于材质与光照的运算结果，而非顶点，并且设置圆柱体的材质中漫反射的Alpha值为100（小于255）。其中的位置关系是让圆柱体遮挡茶壶。此时通过打开与关闭Alpha混合功能，可以看到材质中漫反射的Alpha值其了作用！  
**（4）关键代码**  
使用到的颜色常量：

const D3DXCOLOR      RED(D3DCOLOR_XRGB(255, 0, 0));
    const D3DXCOLOR      BLACK(D3DCOLOR_XRGB(0, 0, 0));
    const D3DXCOLOR      GREEN(D3DCOLOR_ARGB(100, 0, 255, 0));  //此处把Alpha值设置为100（最大为255）

两个物体材质的设置：

//设置茶壶和圆柱体的的材质
    TeapotMtrl = InitMtrl(RED, RED, RED, BLACK, 2.0f);
    SphereMtrl = InitMtrl(GREEN, GREEN, GREEN, BLACK, 2.0f);

两个物体的渲染顺序：

//开始渲染
        if (SUCCEEDED(g_pd3dDevice->BeginScene())) {
    
            //渲染茶壶
            g_pd3dDevice->SetTransform(D3DTS_WORLD, &g_matTea);
            g_pd3dDevice->SetMaterial(&TeapotMtrl);
            g_pd3dDevice->SetTexture(0, 0);
            Teapot->DrawSubset(0);
    
            //渲染圆柱体
            g_pd3dDevice->SetTransform(D3DTS_WORLD, &g_matSphere);
            g_pd3dDevice->SetMaterial(&SphereMtrl);
            g_pd3dDevice->SetTexture(0, 0);
            Sphere->DrawSubset(0);
    
            g_pd3dDevice->EndScene();
        }

## 源码下载 ##

链接：[https://pan.baidu.com/s/1lMGTxW5rOwS0NgeFrqQsqw][https_pan.baidu.com_s_1lMGTxW5rOwS0NgeFrqQsqw] 密码：gl8z

本节主要介绍了Alpha混合，并且Alpha值是来源于顶点和材质的两种情况，下一篇将会学习更富魅力的“纹理Alpha”。

[70]: /images/20220525/6af0d2377e2b489498c1a8b62e7cfa93.png
[70 1]: /images/20220525/2ebb7f10bbb749a7bc9ed58d76c05658.png
[70 2]: /images/20220525/c00b3e1928dc4b979703b6823d438100.png
[70 3]: /images/20220525/f93bfccf991647b2bf3b67701f0edd56.png
[70 4]: /images/20220525/017a47fcc59240ce8d18cbf7e3e02cbe.png
[70 5]: /images/20220525/75f93d3582e4446bb7f6f305850a8d0b.png
[70 6]: /images/20220525/6551e30dc1da4b7bbb3e43acc8b109de.png
[70 7]: /images/20220525/adeb92973a724865b06e2c122ccde1b4.png
[70 8]: /images/20220525/a32a962c4f744558abc7dcc8e3f1b26b.png
[70 9]: /images/20220525/4be992dfb13b4bccab226de89e13dc6c.png
[https_pan.baidu.com_s_1lMGTxW5rOwS0NgeFrqQsqw]: https://pan.baidu.com/s/1lMGTxW5rOwS0NgeFrqQsqw