【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合

红太狼 2022-03-12 09:48 238阅读 0赞

### 原创文章如需转载请注明：转载自[风宇冲Unity3D教程学院][Unity3D] ###

**Shader第十三讲**  **Alpha混合**

Alpha Blending，中文译作Alpha混合

Blending就是控制透明的。处于光栅化的最后阶段。

这里例如我们给一个模型贴一个材质，那么在某个点计算出来颜色值称为源，而该点之前累积的颜色值，叫目标。

语法

Blend Off     不混合

Blend SrcFactor DstFactor  SrcFactor是源系数，DstFactor是目标系数

最终颜色 = （Shader计算出的点颜色值 \* 源系数）+（点累积颜色 \* 目标系数）

属性（往SrcFactor，DstFactor 上填的值）

one                          1

zero                         0

SrcColor                         源的RGB值，例如（0.5,0.4,1）

SrcAlpha                         源的A值, 例如0.6

DstColor                   混合目标的RGB值例如（0.5，0.4,1）

DstAlpha                         混合目标的A值例如0.6

OneMinusSrcColor          (1,1,1) - SrcColor

OneMinusSrcAlpha          1- SrcAlpha

OneMinusDstColor          (1,1,1) - DstColor

OneMinusDstAlpha          1- DstAlpha

运算法则示例：

（注：r,g,b,a,x,y,z取值范围为\[0,1\]）

（r,g,b） \* a = (r\*a , g\*a , b\*a)

（r,g,b） \* (x,y,z) = (r\*x , g\*y , b\*z)

（r,g,b） + (x,y,z) = (r+x , g+y , b+z)

（r,g,b） - (x,y,z)  = (r-x , g-y , b-z)

** 在树叶使用的Shader中添加Blend代码**

**Blend zero one：**仅显示背景的RGB部分， 无Alpha透明通道处理。

[![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha]

**Blend one  zero：  ** 仅 显示贴图的RGB部分，无Alpha透明通道处理。 ** ** A通道为0即本应该透明的地方也渲染出来了。

[![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 1]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 1]

**Blend one  one：** 贴图和背景叠加， 无Alpha透明通道处理。仅仅是颜色rgb数值的叠加更趋近于白色即（1，1，1）了。

[![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 2]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 2]

**Blend SrcAlpha  zero：仅仅显示贴图** ，贴图含 Alpha透明通道处理。但是贴图中的透明部分，即下图黑色部分没有颜色来显示，因为源颜色乘以alpha值0，为0；而混合目标的颜色乘以zero 0，也是0。所以透明部分显示的颜色为（0，0，0）

[![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 3]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 3]

**Blend SrcAlpha  OneMinusSrcAlpha：**

[![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 4]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 4]

最终颜色 = 源颜色 \* 源透明值 + 目标颜色\*（1 - 源透明值）

最常用的透明混合方式。贴图alpha值高的部分，显示得实，而混合的背景很淡。而alpha值高的部分，贴图显示得淡，而背景现实得实。

举例：

（1）假设贴图有一个不透明红色点 [![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 5]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 5]， Color（1，0，0，1），该点背景色为不透明蓝色  [![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 6]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 6]Color（0，0，1，1）

最终颜色 =  （1，0，0）\* 1+（0，0，1）\*（1-1） = （1，0，0） [![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 5]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 5]

结论一：贴图alpha值为1时，仅显示贴图，不显示背景

（2）假设贴图有一个透明红色点 [![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 5]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 5]， Color（1，0，0，0），该点背景色为透明，但B通道值为1，即Color（0，0，1，0）

最终颜色 =  （1，0，0）\* 0+（0，0，1）\*（1-0） = （0，0，1） [![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 6]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 6]

结论二：贴图alpha值为0时，仅显示混合目标即背景，不显示贴图

但是目标alpha值为0，即其实这个点的背景是透明的，而我们却把它显示出来了，这就不对了。

经验：带A通道的贴图中，空的地方不只A值为0，RGB值也要为0，不然容易出错。

（3）假设贴图有一个半透明红色点 [![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 5]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 5]， Color（1，0，0，0.8），该点背景色为不透明蓝色 [![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 6]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 6]  Color（0，0，1，1）

最终颜色 =  （1，0，0）\* 0.8+（0，0，1）\*（1-0.8） = （0.8，0，0.2） [![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 7]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 7]

而假如0.8变为0.2时，

最终颜色 =  （1，0，0）\* 0.2+（0，0，1）\*（1-0.2） = （0.2，0，0.8） [![【风宇冲】Unity3D教程宝典之Shader篇：第十三讲 Alpha混合][Unity3D_Shader_wbr_Alpha 8]][Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 8]

结论：贴图alpha值越大，颜色越偏向贴图；alpha值越小，颜色越偏向混合目标

Blend组合的情况就先讲这么多了，更多的组合需要自己去试去用，现在请再回过头看看第五讲的引言，是不是有一种恍然大悟的感觉呢？

[Unity3D]: http://blog.sina.com.cn/lsy835375
[Unity3D_Shader_wbr_Alpha]: http://s9.sinaimg.cn/mw690/47113292g7b4f709391a8&690
[Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha]: /images/20220312/f7ecbf46d290458db6f94542c5b4a9cc.png
[Unity3D_Shader_wbr_Alpha 1]: http://s14.sinaimg.cn/mw690/47113292gd11a66026c6d&690
[Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 1]: /images/20220312/c9272792049c4d74bb6392cea340fdca.png
[Unity3D_Shader_wbr_Alpha 2]: http://s7.sinaimg.cn/mw690/47113292gd11a65a33a96&690
[Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 2]: /images/20220312/2549900b3c2446af876c1719a10c1067.png
[Unity3D_Shader_wbr_Alpha 3]: http://s11.sinaimg.cn/mw690/47113292gd11a662a367a&690
[Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 3]: /images/20220312/2f5bc65f42334de6a2aaea5e3f1bd0ed.png
[Unity3D_Shader_wbr_Alpha 4]: http://s16.sinaimg.cn/mw690/47113292gd11aa9dbceef&690
[Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 4]: /images/20220312/ba93d7169d9a46bb955ba58313bf97a2.png
[Unity3D_Shader_wbr_Alpha 5]: http://s4.sinaimg.cn/mw690/47113292gd119b3e7edc3&690
[Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 5]: /images/20220312/7f9367afbd9643678c3f8b9836ea2c04.png
[Unity3D_Shader_wbr_Alpha 6]: http://s5.sinaimg.cn/mw690/47113292gd119d9ef96c4&690
[Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 6]: /images/20220312/bd169cc3a01c49e9a18b9d7515e8e490.png
[Unity3D_Shader_wbr_Alpha 7]: http://s2.sinaimg.cn/mw690/47113292gd119b403a2e1&690
[Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 7]: /images/20220312/c35ca73f2c144d209e049c5e44164172.png
[Unity3D_Shader_wbr_Alpha 8]: http://s5.sinaimg.cn/mw690/47113292gd119b41166a4&690
[Unity3D_Shader_wbr_Alpha_Unity3D_Shader_wbr_Alpha 8]: /images/20220312/948e9fbca0864150b34055ac33cba24e.png