Unity3D手游开发日记(4) - 适合移动平台的热浪扭曲

热浪扭曲效果的实现,分两部分,一是抓图,二是扭曲扰动.其中难点在于抓图的处理,网上的解决方案有两种,在移动平台都有很多问题,只好自己实现了一种新的方案,效果还不错.

网上方案1. 用GrabPass抓图

GrabPass在有的手机上是不支持的...效率也是问题,所以...

代码可以看看:

1. Shader "Luoyinan/Distortion/HeatDistortion"
2. {
3. Properties
4. {
5. _NoiseTex ("Noise Texture (RG)", 2D) = "white" {}
6. _MainTex ("Alpha (A)", 2D) = "white" {}
7. _HeatTime  ("Heat Time", range (0,1.5)) = 1
8. _HeatForce  ("Heat Force", range (0,0.1)) = 0.1
9. }
10. Category
11. {
12. Tags { "Queue"="Transparent+1" "RenderType"="Transparent" }
13. Blend SrcAlpha OneMinusSrcAlpha
14. AlphaTest Greater .01
15. Cull Off
16. Lighting Off
17. ZWrite Off
18. SubShader
19. {
20. GrabPass
21. {
22. Name "BASE"
23. Tags { "LightMode" = "Always" }
24. }
25. Pass
26. {
27. Name "BASE"
28. Tags { "LightMode" = "Always" }
29. CGPROGRAM
30. #pragma vertex vert
31. #pragma fragment frag
32. #pragma fragmentoption ARB_precision_hint_fastest
33. #include "UnityCG.cginc"
34. struct appdata_t
35. {
36. float4 vertex : POSITION;
37. fixed4 color : COLOR;
38. float2 texcoord: TEXCOORD0;
39. };
40. struct v2f
41. {
42. float4 vertex : POSITION;
43. float4 uvgrab : TEXCOORD0;
44. float2 uvmain : TEXCOORD1;
45. };
46. float _HeatForce;
47. float _HeatTime;
48. float4 _MainTex_ST;
49. float4 _NoiseTex_ST;
50. sampler2D _NoiseTex;
51. sampler2D _MainTex;
52. v2f vert (appdata_t v)
53. {
54. v2f o;
55. o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
56. o.uvgrab = ComputeGrabScreenPos(o.vertex);
57. o.uvmain = TRANSFORM_TEX( v.texcoord, _MainTex );
58. return o;
59. }
60. sampler2D _GrabTexture;
61. half4 frag( v2f i ) : COLOR
62. {
63. // noise effect
64. half4 offsetColor1 = tex2D(_NoiseTex, i.uvmain + _Time.xz*_HeatTime);
65. half4 offsetColor2 = tex2D(_NoiseTex, i.uvmain - _Time.yx*_HeatTime);
66. i.uvgrab.x += ((offsetColor1.r + offsetColor2.r) - 1) * _HeatForce;
67. i.uvgrab.y += ((offsetColor1.g + offsetColor2.g) - 1) * _HeatForce;
68. half4 col = tex2Dproj(_GrabTexture, UNITY_PROJ_COORD(i.uvgrab));
69. // Skybox's alpha is zero, don't know why.
70. col.a = 1.0f;
71. half4 tint = tex2D( _MainTex, i.uvmain);
72. return col*tint;
73. }
74. ENDCG
75. }
76. }
77. // ------------------------------------------------------------------
78. // Fallback for older cards and Unity non-Pro
79. SubShader
80. {
81. Blend DstColor Zero
82. Pass
83. {
84. Name "BASE"
85. SetTexture [_MainTex] { combine texture }
86. }
87. }
88. }
89. }

网上方案2:用RenderTexture来代替抓图

这种方法很坑爹,把场景再渲染一次?想想就很恐怖

我的方案: 后处理

换种思路,后处理其实就已经有了我们需要抓取的图,我们只需要渲染一个掩码图,就能实现局部的扭曲了,以前做次世代引擎的开发,很多特效都是后处理的实现的,比如人在水里面走水面泛起的涟漪,其实热浪扭曲也可以用类似的方法.

原理:

1.先用后处理实现全屏的扰动

2.用RenderTexture做实时的掩码图.

这样的话,效率开销只在两部分,一是后处理,二是把扭曲面片渲染到掩码图,

优化:

1.掩码图RenderTexture尽可能简单,关掉深度,抗锯齿等,用最简单的格式RenderTextureFormat.RGB565,黑白掩码图,不要alpha通道,掩码面片的shader可以用粒子的add shader

2.不需要扭曲的时候应该关闭掉扭曲用的后处理.不要一直开着.这个实现起来需要对掩码面片的存在有一个计数统计,才知道什么时候能关掉.

3.掩码图的比例一定要和屏幕保持一致,大小可设置为屏幕宽高的1/2或者1/4,

后处理的脚本:

后处理shader:

1. Shader "Luoyinan/ImageEffect/HeatDistortion"
2. {
3. Properties
4. {
5. _MainTex ("Base (RGB)", 2D) = "white" {}
6. _NoiseTex ("Noise Texture (RG)", 2D) = "white" {}
7. _MaskTex ("Mask Texture", 2D) = "white" {}
8. _HeatTime  ("Heat Time", range (0,1.5)) = 1
9. _HeatForce  ("Heat Force", range (0,0.1)) = 0.1
10. }
11. SubShader
12. {
13. Pass
14. {
15. CGPROGRAM
16. #pragma vertex vert_img
17. #pragma fragment frag
18. #pragma fragmentoption ARB_precision_hint_fastest
19. #include "UnityCG.cginc"
20. float _HeatForce;
21. float _HeatTime;
22. uniform sampler2D _MainTex;
23. uniform sampler2D _NoiseTex;
24. uniform sampler2D _MaskTex;
25. fixed4 frag(v2f_img i) : COLOR
26. {
27. // 为了效率,掩码图是黑白的,so...
28. fixed mask = tex2D(_MaskTex, i.uv).r;
29. // 扭曲效果
30. half4 offsetColor1 = tex2D(_NoiseTex, i.uv + _Time.xz*_HeatTime);
31. half4 offsetColor2 = tex2D(_NoiseTex, i.uv - _Time.yx*_HeatTime);
32. i.uv.x += ((offsetColor1.r + offsetColor2.r) - 1) * _HeatForce * mask;
33. i.uv.y += ((offsetColor1.g + offsetColor2.g) - 1) * _HeatForce * mask;
34. fixed4 renderTex = tex2D(_MainTex, i.uv);
35. return renderTex;
36. }
37. ENDCG
38. }
39. }
40. FallBack off
41. }