写在前面

最近一直在思考下面的学习该怎么进行，当然自己有在一边做项目一边学OpenGL，偶尔翻翻论文之类的。但是，写shader是一个需要实战和动手经验的过程，而模仿是前期学习的必经之路。很多人都会问，怎么学shader，看什么书。当然我经验也不够，目前的路线是：掌握一门着色语言+读几本经典书籍+学习优秀的shader实例+动手实践+动手实践+动手实践。每一个都不容易，所以学shader是一个漫长而艰辛的过程。

当当当~所以，在继Surface Shader系列之后，我打算学习一下现在已有的各种案例shader。这些shader可能来自于某些网站，可能来自于开源项目，也可能来自于我自己看书的总结。而ShadowGun就是其中一个开源项目。

ShadowGun

ShadowGun其实最开始是2011年的一个移动平台的第三人称射击游戏。当然，也是用Unity开发的。当年，由于在画面上的出色表现赢得了很多眼球~更难能可贵的是，在2012的时候，它的开发者放出了示例场景，来让更多的开发者学习如何优化移动平台上的shader。下载地址请戳官方博客。看不懂英文的可以看这篇（写得很不错）。项目里共包含了将近20个优化后的shader。关于使用许可的问题，项目里的shader都是可以免费使用的，而贴图和模型是不可用于商业用途的呦~

虽然ShadowGun的出场时间有点久远了，但很多技术还是可以借鉴滴~而且它现在仍然在更新，并且价格为高昂的￥30，可见其对自信程度。

ShadowGun里包含了几个比较重要的shader，例如非常有名的旗帜飘动的shader，动态效果的天空盒子的shader，环境高光纹理映射等等。而这篇的飞机坠毁的浓烟效果shader应该是其中非常好理解的一篇。我们也从这里开始学习。

浓烟效果

飞机坠毁的浓烟效果可以从下图看出来：

传统的实现这种效果通常是使用粒子系统，而众所周知，粒子系统对性能的消耗太大，更何况是资源紧缺的移动平台。因此ShadowGun使用了网格+纹理+移动UV的方法来模拟这个效果。同时，还巧妙地使用了顶点颜色和透明度，来模拟火焰颜色以及平滑网格的边缘。结果从画面上看来表现还是可以接受的~

具体分析见下。

Shader源码

[csharp] view plaincopyprint?
  1. Shader "MADFINGER/Environment/Scroll 2 Layers Sine AlphaBlended" {
  2. Properties {
  3. _MainTex ("Base layer (RGB)", 2D) = "white" {}
  4. _DetailTex ("2nd layer (RGB)", 2D) = "white" {}
  5. _ScrollX ("Base layer Scroll speed X", Float) = 1.0
  6. _ScrollY ("Base layer Scroll speed Y", Float) = 0.0
  7. _Scroll2X ("2nd layer Scroll speed X", Float) = 1.0
  8. _Scroll2Y ("2nd layer Scroll speed Y", Float) = 0.0
  9. _SineAmplX ("Base layer sine amplitude X",Float) = 0.5
  10. _SineAmplY ("Base layer sine amplitude Y",Float) = 0.5
  11. _SineFreqX ("Base layer sine freq X",Float) = 10
  12. _SineFreqY ("Base layer sine freq Y",Float) = 10
  13. _SineAmplX2 ("2nd layer sine amplitude X",Float) = 0.5
  14. _SineAmplY2 ("2nd layer sine amplitude Y",Float) = 0.5
  15. _SineFreqX2 ("2nd layer sine freq X",Float) = 10
  16. _SineFreqY2 ("2nd layer sine freq Y",Float) = 10
  17. _Color("Color", Color) = (1,1,1,1)
  18. _MMultiplier ("Layer Multiplier", Float) = 2.0
  19. }
  20. SubShader {
  21. Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
  22. Blend SrcAlpha OneMinusSrcAlpha
  23. Cull Off Lighting Off ZWrite Off Fog { Color (0,0,0,0) }
  24. LOD 100
  25. CGINCLUDE
  26. #pragma multi_compile LIGHTMAP_OFF LIGHTMAP_ON
  27. #pragma exclude_renderers molehill
  28. #include "UnityCG.cginc"
  29. sampler2D _MainTex;
  30. sampler2D _DetailTex;
  31. float4 _MainTex_ST;
  32. float4 _DetailTex_ST;
  33. float _ScrollX;
  34. float _ScrollY;
  35. float _Scroll2X;
  36. float _Scroll2Y;
  37. float _MMultiplier;
  38. float _SineAmplX;
  39. float _SineAmplY;
  40. float _SineFreqX;
  41. float _SineFreqY;
  42. float _SineAmplX2;
  43. float _SineAmplY2;
  44. float _SineFreqX2;
  45. float _SineFreqY2;
  46. float4 _Color;
  47. struct v2f {
  48. float4 pos : SV_POSITION;
  49. float4 uv : TEXCOORD0;
  50. fixed4 color : TEXCOORD1;
  51. };
  52. v2f vert (appdata_full v)
  53. {
  54. v2f o;
  55. o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
  56. o.uv.xy = TRANSFORM_TEX(v.texcoord.xy,_MainTex) + frac(float2(_ScrollX, _ScrollY) * _Time);
  57. o.uv.zw = TRANSFORM_TEX(v.texcoord.xy,_DetailTex) + frac(float2(_Scroll2X, _Scroll2Y) * _Time);
  58. o.uv.x += sin(_Time * _SineFreqX) * _SineAmplX;
  59. o.uv.y += sin(_Time * _SineFreqY) * _SineAmplY;
  60. o.uv.z += sin(_Time * _SineFreqX2) * _SineAmplX2;
  61. o.uv.w += sin(_Time * _SineFreqY2) * _SineAmplY2;
  62. o.color = _MMultiplier * _Color * v.color;
  63. return o;
  64. }
  65. ENDCG
  66. Pass {
  67. CGPROGRAM
  68. #pragma vertex vert
  69. #pragma fragment frag
  70. #pragma fragmentoption ARB_precision_hint_fastest
  71. fixed4 frag (v2f i) : COLOR
  72. {
  73. fixed4 o;
  74. fixed4 tex = tex2D (_MainTex, i.uv.xy);
  75. fixed4 tex2 = tex2D (_DetailTex, i.uv.zw);
  76. o = tex * tex2 * i.color;
  77. return o;
  78. }
  79. ENDCG
  80. }
  81. }
  82. }

其实， ShadowGun里的Shader都不长，但有些shader要完全理解还是需要一些时间的。当然这篇还是很简单的~

SubShader Tags

[plain] view plaincopyprint?
  1. Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }

这个shader使用的tags算是Unity里半透明物体渲染的标配。  "Queue"="Transparent"指明了该shader的渲染队列， "IgnoreProjector"="True"指明该shader不会受Projector的影响（半透明物体一般设为true）， "RenderType"="Transparent"指明了它的渲染类别，文档上说是可以被用于shader replacement，但我现在还不是很理解，有人知道请留言告诉我~谢谢。

关于SubShader Tags的说明，请见官网。

渲染设置

[plain] view plaincopyprint?
  1. Blend SrcAlpha OneMinusSrcAlpha
  2. Cull Off
  3. Lighting Off
  4. ZWrite Off
  5. Fog { Color (0,0,0,0) }

这篇shader的特点就是充分利用了alpha混合的技术，因此第一行就是指明了它的混合系数。Alpha混合是本篇的重点。在场景中所有的shader被渲染完毕后，每个shader产生的像素写入了帧缓存中，因为它们的渲染是按照一定顺序的，因此如何控制这些前后像素的混合顺序就是靠Blend指令控制的。它会指定源像素和目标像素的混合系数，按这个系数对两种像素进行处理后作为输出像素。具体可见 这篇文章以及 官网。而 Blend SrcAlpha OneMinusSrcAlpha就是用于alpha混合的系数，也就是说靠alpha通道来控制像素颜色。

Cull Off 指明该shader不会剔除面，即背面也会被渲染。

ZWrite Off 指明不写入深度缓存，而是根据渲染顺序来决定显示的。其实"Queue"="Transparent"会自动生成ZWrite Off 语句的。

其他命令可以参见官网。

算法分析

这篇shader的关键在于vert函数：

[plain] view plaincopyprint?
  1. v2f vert (appdata_full v)
  2. {
  3. v2f o;
  4. o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
  5. o.uv.xy = TRANSFORM_TEX(v.texcoord.xy,_MainTex) + frac(float2(_ScrollX, _ScrollY) * _Time);
  6. o.uv.zw = TRANSFORM_TEX(v.texcoord.xy,_DetailTex) + frac(float2(_Scroll2X, _Scroll2Y) * _Time);
  7. o.uv.x += sin(_Time * _SineFreqX) * _SineAmplX;
  8. o.uv.y += sin(_Time * _SineFreqY) * _SineAmplY;
  9. o.uv.z += sin(_Time * _SineFreqX2) * _SineAmplX2;
  10. o.uv.w += sin(_Time * _SineFreqY2) * _SineAmplY2;
  11. o.color = _MMultiplier * _Color * v.color;
  12. return o;
  13. }

里面主要用到了下面的 函数公式：

[plain] view plaincopyprint?
  1. u = sin(freq * x) * ampl + scroll * x;

上述公式了表示了U方向上的输出。这个函数其实就是正弦波函数+一次函数，由此得到特定方向上的波动效果。这种函数的函数图像（其中scroll = -2，ampl = 0.005，freq = 250）类似下面这样：

可以看出来就是一个倾斜波动的样子，以此来模拟火焰缓慢波动并上移的样子。

Shader利用了两种纹理来模拟立体效果，每张纹理对应了6个参数，分别代表了U方向和V方向上的函数参数。

除了函数里利用，这篇shader还有一个非常巧妙的地方，就是利用了顶点颜色。从一开始的动态图可以看出来其中有红色的火焰，但其实这不是纹理里的颜色，而是顶点颜色。如果我们把纹理都去掉，可以发现它真实的模型其实是长这样的：

也就是说它本身的顶点颜色就模拟了火焰颜色。他们很巧妙地利用了顶点颜色本身及其alpha通道的值，来模拟从火焰到浓烟的过渡效果。下面的代码虽然只有一行，但起到了很关键的作用：

[plain] view plaincopyprint?
  1. o.color = _MMultiplier * _Color * v.color;

Shader允许我们在面板中（通过 _MMultiplier和 _Color）在顶点颜色的基础上调整整体颜色，并将结果存储到 v2f中。要注意的是，这里的顶点颜色，即 v.color，包含了重要的透明度信息，浓烟的透明过渡效果其实都是它的功劳。

写在最后

站在前人的肩膀上总是能看得更远。这篇Shader虽小，但体现了很多很常见的手法：alpha混合，UV动画，利用模型顶点信息来减少纹理输入等等。感谢前人们的贡献和分享，希望大家可以有所收获~下次见啦！

【Unity Shaders】ShadowGun系列之一——飞机坠毁的浓烟效果相关推荐

  1. Unity Shaders and Effects Cookbook (2-7)实现 Photoshop 色阶效果

    看完了这一书上的代码,然后在网上查找 Photoshop 色阶的一些解释,大致理解为:调整色阶就是调整亮度,也就是调整纹理 R.G.B 通道的数值大小. 下面是 Photoshop 中的直方图转自ht ...

  2. 【Unity Shaders】Mobile Shader Adjustment —— 为手机定制Shader

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  3. 【Unity Shaders】Reflecting Your World —— Unity3D中的法线贴图和反射

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  4. 【Unity Shaders】游戏性和画面特效——创建一个夜视效果的画面特效

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  5. 【Unity Shaders】Diffuse Shading——创建一个基本的Surface Shader

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  6. 【Unity Shaders】Transparency —— 使用渲染队列进行深度排序

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  7. 【Unity Shaders】使用CgInclude让你的Shader模块化——使用#define指令创建Shader

    本系列主要參考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同一时候会加上一点个人理解或拓展. 这里是本书全部的插图. 这里是本书所需的代码 ...

  8. 【Unity Shaders】Reflecting Your World（反射吧！）介绍

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  9. 视频教程-Unity快速入门系列课程(第2部)-Unity3D

    Unity快速入门系列课程(第2部) 二十多年的软件开发与教学经验IT技术布道者,资深软件工程师.具备深厚编程语言经验,在国内上市企业做项目经理.研发经理,熟悉企业大型软件运作管理过程.软件架构设计理 ...

  10. 【Unity Shaders】游戏性和画面特效——创建一个老电影式的画面特效

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

最新文章

  1. SharePoint优秀blog文章汇总
  2. Linux文件查看命令图解
  3. SSD固态存储大观（二）
  4. Android Studio: Debug Android SDK Source Code
  5. html js 控制span值,根据显示/隐藏span标签/ Javascript组设置span文本？
  6. java 打印_剑指Offer面试题20（Java版）：顺时针打印矩阵
  7. 算法学习总结（1）——基本数据结构
  8. 深度学习之OCR相关经验记录
  9. 力扣算法题—069x的平方根
  10. 父与子的python之旅_《父与子的编程之旅：与小卡特一起学Python》作者：Warren Sande - kindle电子书下载 - 我的书库...
  11. Python + folium 制作美美的地图～
  12. html设置网页的大小怎么设置方法,网页字体大小怎么样去设置
  13. 鸿蒙支持ps4手柄吗,完美兼容PS4手柄！iPhone也能畅玩PS4，教程在此
  14. xp计算机u盘重装系统,传授如何使用u盘安装xp系统呢?教你安装步骤
  15. vue注册组件template传id
  16. RAKsmart服务器优势有哪些？外贸选择的关键原因
  17. ffmpeg添加mpeg ps流的pcm的解码支持
  18. 寒假训练八（优先队列）2020.02.14（7题）
  19. 银行IT软件服务的公司 (不包括被收购的企业)，统计国内员工人数比较多的企业
  20. 看《Sicko》，有感

热门文章

  1. IIC协议详解，附单片机软件模拟源码
  2. 3D动漫游戏建模很难学？教你如何使用3DMax和ZBrush制作卡通角色
  3. PB语言实现反射机制
  4. 用python做股票因子分析_因子分析（by+alphalens）
  5. mysql pxc 使用_MySQL PXC集群安装配置
  6. WPS文字的字数统计在哪？如何查看当前文档有多少个字？
  7. 信息学奥赛一本通评测系统P1332
  8. 文字识别总结（OCR）
  9. office图标修复工具_超好用的流程图绘图工具你还没get吗？
  10. 三相电压型PWM整流器设计