您需要 登录 才可以下载或查看，没有账号？注册
x
上一节的传送门
其实到这我也没看呢，先转过来，一起一起。。。。。老规矩，先放大佬的传送门
【浅墨Unity3D Shader编程】之五 圣诞夜篇: Unity中Shader的三种形态对比&混合操作合辑
二、混合操作（Blending）
我们直奔主题吧。混合操作最常见的用途便是用来制作透明物体、或者是进行纹理的混合。它是Shader渲染的最后一步：
如上图所示，正被渲染的像素经过顶点光照、顶点着色器、剔除和深度测试，雾效、Alpha测试等一系列操作之后，最后一步便是混合操作。这个时候计算结果即将被输出到帧缓冲中。而混合操作，就是管理如何将这些像素输出到帧缓存中的这样一个过程——是直接替换原来的，是一加一的混合，还是有Alpha参与的不等比地混合等等。
混合操作有两个对象：源和目标，因此也有两个对应的因子，即源因子和目标因子（对应于下面讲解的Blend SrcFactor DstFactor操作）。
而如果我们把RGB颜色通道和Alpha通道分开来操作的话，混合就有了4个操作对象（对应于下面讲解的Blend SrcFactor DstFactor,SrcFactorA DstFactorA操作）。
2.1 混合操作相关的句法
Blend OffTurn off blending 关闭混合
Blend SrcFactorDstFactor基本的配置并启动混操作。对产生的颜色乘以SrcFactor.对 已存在于屏幕的颜色乘以DstFactor，并且两者将被叠加在一起。
Blend SrcFactorDstFactor, SrcFactorA DstFactorA同上，但是使用不同的要素来混合alpha通道，也就是有了4个操作对象
BlendOp Add /Min | Max | Sub | RevSub此操作不是Blend操作一样添加混合颜色在一起，而是对它们做不同的操作。
而如下便是常用混合操作符（blend operations）的含义列举：
Add
| 将源像素和目标像素相加.
| Sub
| 用源像素减去目标像素
| RevSub
| 用目标像素减去源像素
| Min
| 取目标像素和源像素颜色的较小者作为结果
| Max
| 取目标像素和源像素颜色的较大者作为结果
|
2.2 混合因子（Blend factors）列举
Blend SrcFactor DstFactor
以下所有的属性都可作为SrcFactor或DstFactor。其中，Source指的是被计算过的颜色，Destination是已经在屏幕上的颜色。
One | 值为1，使用此因子来让帧缓冲区源颜色或是目标颜色完全的通过。 | Zero | 值为0，使用此因子来删除帧缓冲区源颜色或目标颜色的值。 | SrcColor | 使用此因子为将当前值乘以帧缓冲区源颜色的值 | SrcAlpha | 使用此因子为将当前值乘以帧缓冲区源颜色Alpha的值。 | DstColor | 使用此因子为将当前值乘以帧缓冲区源颜色的值。 | DstAlpha | 使用此因子为将当前值乘以帧缓冲区源颜色Alpha分量的值。 | OneMinusSrcColor | 使用此因子为将当前值乘以(1 -帧缓冲区源颜色值) | OneMinusSrcAlpha | 使用此因子为将当前值乘以(1 -帧缓冲区源颜色Alpha分量的值) | OneMinusDstColor | 使用此因子为将当前值乘以(1 –目标颜色值) | OneMinusDstAlpha | 使用此因子为将当前值乘以(1 –目标Alpha分量的值) |
2.3 常见的混合操作句法示例
上面都是一些句法和列表的列举，往往会令人一头雾水，下面这是一些示例，用其中的任何一句加在Pass中就可以实现对应的混合操作了：
[cpp] view plain copy
- Blend SrcAlpha OneMinusSrcAlpha // Alpha混合
- Blend One One // 相加
- Blend One OneMinusDstColor // 比较柔和的相加（SoftAdditive）
- Blend DstColor Zero // 乘法
- Blend DstColor SrcColor // 2倍乘法
三、QianMo's Toolkit升级到v1.3
这次QianMo's Toolkit又迎来了新的特性——飞翔。
将脚本赋给Controller，并调整相应的速度，(并可以先禁掉之前的鼠标视角控制相关脚本)然后点运行，并可以在天空中自由地飞翔了。
其中用W、A、S、D控制前后左右，R、F控制上升下降。
其代码如下：
[cpp] view plain copy
- //-----------------------------------------------【脚本说明】-------------------------------------------------------
- // 脚本功能： 控制Contorller在场景中飞翔
- // 使用语言： C#
- // 开发所用IDE版本：Unity4.5 06f 、Visual Studio 2010
- // 2014年12月 Created by 浅墨
- // 更多内容或交流，请访问浅墨的博客：http://blog.csdn.net/poem_qianmo
- //---------------------------------------------------------------------------------------------------------------------
- //-----------------------------------------------【使用方法】-------------------------------------------------------
- // 第一步：在Unity中拖拽此脚本到场景的Controller之上，或在Inspector中[Add Component]->[浅墨's Toolkit]->[SetMaxFPS]
- // 第二步：在面板中设置相关鼠标速度
- //---------------------------------------------------------------------------------------------------------------------
- using UnityEngine;
- using System.Collections;
- //添加组件菜单
- [AddComponentMenu("浅墨's Toolkit/FlyController")]
- public class FlyController : MonoBehaviour
- {
- //参数定义
- public float lookSpeed = 5.0f;
- public float moveSpeed = 1.0f;
- public float rotationX = 0.0f;
- public float rotationY = 0.0f;
- void Update()
- {
- //获取鼠标偏移量
- rotationX += Input.GetAxis("Mouse X") * lookSpeed;
- rotationY += Input.GetAxis("Mouse Y") * lookSpeed;
- rotationY = Mathf.Clamp(rotationY, -90, 90);
- //鼠标控制视角
- transform.localRotation = Quaternion.AngleAxis(rotationX, Vector3.up);
- transform.localRotation *= Quaternion.AngleAxis(rotationY, Vector3.left);
- transform.position += transform.forward * moveSpeed * Input.GetAxis("Vertical");
- transform.position += transform.right * moveSpeed * Input.GetAxis("Horizontal");
- //I键，向上平移
- if (Input.GetKey(KeyCode.R))
- transform.position += transform.up * moveSpeed;
- //K键，向下平移
- if (Input.GetKey(KeyCode.F))
- transform.position -= transform.up * moveSpeed;
- }
- }
就这样，我们的QianMo’s Toolkit中的工具越来越多：
四、Shader书写实战
1. 纹理载入Shader
因为后面几个shader的需要，先根据我们之前所学，几行代码就可以实现一个纹理载入Shader：
[cpp] view plain copy
- Shader "浅墨Shader编程/Volume5/18.基本纹理载入"
- {
- //-------------------------------【属性】--------------------------------------
- Properties
- {
- _MainTex ("基本纹理", 2D) = "black" { }
- }
- //--------------------------------【子着色器】--------------------------------
- SubShader
- {
- //-----------子着色器标签----------
- Tags { "Queue" = "Geometry" } //子着色器的标签设为几何体
- //----------------通道---------------
- Pass
- {
- //设置纹理
- SetTexture [_MainTex] { combine texture }
- }
- }
- }
我们将此Shader编译后赋给材质，得到如下效果：
实际场景中的运行效果如下：
2.基本blend使用
在上面简单的texture载入的Shader的基础上加上一行关于blend的代码，就成了我们今天的第二个Shader：
[cpp] view plain copy
- Shader "浅墨Shader编程/Volume5/19.基本blend使用"
- {
- //-------------------------------【属性】-----------------------------------------
- Properties
- {
- _MainTex ("将要混合的基本纹理", 2D) = "black" { }
- }
- //--------------------------------【子着色器】----------------------------------
- SubShader
- {
- //-----------子着色器标签----------
- Tags { "Queue" = "Geometry" } //子着色器的标签设为几何体
- //----------------通道---------------
- Pass
- {
- //进行混合
- Blend DstColor Zero // 乘法
- //设置纹理
- SetTexture [_MainTex] { combine texture }
- }
- }
- }
我们将此Shader编译后赋给材质，得到如下效果：
我们采用的是乘法混合操作（ Blend DstColor Zero），可以发现颜色相对于第一个Shader有了稍微的变暗。
虽然肉眼很难看出区别，但实际上的确是有变化的：
3.基本blend使用+颜色可调
再给我们的Shader加上一点可自定义的颜色，并让纹理的alpha通道插值混合顶点颜色 。代码如下：
[cpp] view plain copy
- Shader "浅墨Shader编程/Volume5/20.基本blend使用+颜色可调"
- {
- //-------------------------------【属性】-----------------------------------------
- Properties
- {
- _MainTex ("将混合的纹理", 2D) = "black" {}
- _Color ("主颜色", Color) = (1,1,1,0)
- }
- //--------------------------------【子着色器】--------------------------------
- SubShader
- {
- //-----------子着色器标签----------
- Tags { "Queue" = "Transparent" } //子着色器的标签设为透明
- //----------------通道---------------
- Pass
- {
- Blend One OneMinusDstColor // 柔性相加
- SetTexture [_MainTex]
- {
- // 使颜色属性进入混合器
- constantColor [_Color]
- // 使用纹理的alpha通道插值混合顶点颜色
- combine constant lerp(texture) previous
- }
- }
- }
- }
我们将此Shader编译后赋给材质，得到如下效果：
调成各种颜色：
实际场景中的测试效果：
4.基本blend使用+顶点光照
在之前Shader的基础上，给我们的Shader再加上材质属性和顶点光照：
[cpp] view plain copy
- Shader "浅墨Shader编程/Volume5/21.基本blend使用+顶点光照"
- {
- //-------------------------------【属性】-----------------------------------------
- Properties
- {
- _MainTex ("Texture to blend", 2D) = "black" {}
- _Color ("主颜色", Color) = (1,1,1,0)
- }
- //--------------------------------【子着色器】--------------------------------
- SubShader
- {
- //-----------子着色器标签----------
- Tags { "Queue" = "Transparent" }
- //----------------通道---------------
- Pass
- {
- //【1】设置材质
- Material
- {
- Diffuse [_Color]
- Ambient [_Color]
- }
- //【2】开启光照
- Lighting On
- Blend One OneMinusDstColor // Soft Additive
- SetTexture [_MainTex]
- {
- // 使颜色属性进入混合器
- constantColor [_Color]
- // 使用纹理的alpha通道插值混合顶点颜色
- combine constant lerp(texture) previous
- }
- }
- }
- }
于是结果如下：
调各种颜色看看：
在场景中的测试效果图为：
5.实现玻璃效果第二版
之前我们用剔除实现过一版玻璃效果，这次我们来用blend实现完全不一样的玻璃效果，需要载入一个cubemap（其实根据cubemap的选择不同，会实现不同的效果，比如本次的最终效果就有点像金属材质）。
Shader的代码如下：
[cpp] view plain copy
- Shader "浅墨Shader编程/Volume5/22.玻璃效果v2"
- {
- //-------------------------------【属性】--------------------------------------
- Properties
- {
- _Color ("Main Color", Color) = (1,1,1,1)
- _MainTex ("Base (RGB) Transparency (A)", 2D) = "white" {}
- _Reflections ("Base (RGB) Gloss (A)", Cube) = "skybox" { TexGen CubeReflect }
- }
- //--------------------------------【子着色器】--------------------------------
- SubShader
- {
- //-----------子着色器标签----------
- Tags { "Queue" = "Transparent" }
- //----------------通道---------------
- Pass
- {
- //进行纹理混合
- Blend One One
- //设置材质
- Material
- {
- Diffuse [_Color]
- }
- //开光照
- Lighting On
- //和纹理相乘
- SetTexture [_Reflections]
- {
- combine texture
- Matrix [_Reflection]
- }
- }
- }
- }
我们将此Shader编译后赋给材质，得到如下效果，可以发现最终效果是一个带室内场景反射的金属材质：
实际场景中的测试效果：
6. 实现玻璃效果第三版
我们给上面的第二版加上第二个pass，最终代码如下：
[cpp] view plain copy
- Shader "浅墨Shader编程/Volume5/23.玻璃效果v3"
- {
- //-------------------------------【属性】-----------------------------------------
- Properties
- {
- _Color ("Main Color", Color) = (1,1,1,1)
- _MainTex ("Base (RGB) Transparency (A)", 2D) = "white" {}
- _Reflections ("Base (RGB) Gloss (A)", Cube) = "skybox" { TexGen CubeReflect }
- }
- //--------------------------------【子着色器】----------------------------------
- SubShader
- {
- //-----------子着色器标签----------
- Tags { "Queue" = "Transparent" }
- //----------------通道1--------------
- Pass
- {
- Blend SrcAlpha OneMinusSrcAlpha
- Material
- {
- Diffuse [_Color]
- }
- Lighting On
- SetTexture [_MainTex] {
- combine texture * primary double, texture * primary
- }
- }
- //----------------通道2--------------
- Pass
- {
- //进行纹理混合
- Blend One One
- //设置材质
- Material
- {
- Diffuse [_Color]
- }
- //开光照
- Lighting On
- //和纹理相乘
- SetTexture [_Reflections]
- {
- combine texture
- Matrix [_Reflection]
- }
- }
- }
- }
载入同样的纹理和cubemap，得到的效果更加醇厚优异：
实际场景中的测试效果：
OK，这次的Shader实战就是上面的这些了。
五、圣诞夜场景创建
就像文章开头中说的，圣诞节就快到了，而下次更新就已经过了圣诞节，于是这次更新浅墨就提前把这个精心准备的圣诞夜场景放出来吧，预祝大家圣诞节快乐~
以大师级美工鬼斧神工的场景作品为基础，浅墨调整了场景布局，加入了音乐，并加入了更多高级特效，于是便得到了如此这次温馨美好的场景。
而冬天穿衣不便，加上路滑，浅墨故意把controller调出了走路打滑的感觉。
运行游戏，圣诞音乐渐渐响起，雪白的雪花静静飘落，我们来到美丽的圣诞夜：
雪花飞扬：
月上树梢：
浅墨精心装扮的圣诞树：
月光给屋顶披上一层清辉：
火炉、圣诞礼物:
月是故乡明：
可爱的圣诞雪人：
浅墨是不会告诉你们是怎么进到门紧关的房子里面来的，自己摸索吧~
大雪纷飞的路：
最后放一张这次Shader的全家福：
OK，美图就放这么多。游戏场景可运行的exe可以在文章开头中提供的链接下载。而以下是源工程的下载链接。
本篇文章的示例程序源工程请点击此处下载：
【浅墨Unity3D Shader编程】之五 圣诞夜篇配套Unity工程下载
好的，本篇文章到这里就全部结束了。
浅墨在这里提前祝大家圣诞节快乐~
下周一，新的游戏编程之旅，我们不见不散~
如果你看到这的话，我告诉你，最后一个玻璃材质不能实现，不过貌似无伤大雅
|
画板
