景深shader

浅浅的花香味﹌ 2022-07-14 09:42 169阅读 0赞

转载自：http://blog.sina.com.cn/s/blog\_89d90b7c0102vo5q.html

玩过摄影的人都会知道“景深”这个词，简单来说就是焦点与前景，背景存在一定距离时，前后成像会比较模糊，因为焦点很清晰必然会成为照片中的重点。

在游戏中这种应用也是非常常见，印象深刻的比如网页版仙剑，在与NPC对话时，摄像机会变换到NPC正前方，而后面的背景会变的模糊，从而达到比较真实的空间感，让人身临其境![shader实例（三十六）屏幕特效之景深][shader]。

效果如下：

[![shader实例（三十六）屏幕特效之景深][shader 1]][shader_shader 1]

因为没有真实场景，所以后面只用了一张图片而已。

原理在代码中，就直接上代码了。

**shader代码：**

1.  Shader "Tut/Effects/Dof"\{
2.  Properties \{
3.  \_MainTex ("Base (RGB)", 2D) = ""\{\}
4.  \}
5.  Subshader \{
6.  Pass \{
7.  ZTest Always Cull Off ZWrite Off
8.  Fog \{ Mode off \}
9.  CGPROGRAM
10. \#pragma vertex vert
11. \#pragma fragment frag
12. \#include "UnityCG.cginc"
13. struct v2f \{
14. float4 pos : POSITION;
15. float2 uv : TEXCOORD0;
16. \};
17. // 摄像机所见纹理
18. sampler2D \_MainTex;
19. // 摄像机深度纹理
20. sampler2D \_CameraDepthTexture;
21. // 模糊纹理
22. sampler2D \_BlurTex;
23. v2f vert (appdata\_img v) \{
24. v2f o;
25. o.pos = mul(UNITY\_MATRIX\_MVP, v.vertex);
26. o.uv.xy = v.texcoord.xy;
27. **return**o;
28. \}
29. half4 frag (v2f i) : COLOR \{
30. // 摄像机纹理
31. half4 ori = tex2D(\_MainTex,i.uv);
32. // 模糊纹理
33. half4 blur = tex2D(\_BlurTex,i.uv);
34. // 获取摄像机深度值颜色值，取rgb都可以
35. **float**dep = tex2D(\_CameraDepthTexture,i.uv).r;
36. // 深度Z缓存，从摄像机到最远平截面\[0,1\]
37. dep = Linear01Depth(dep);
38. // (1-dep) \* ori \+ dep \* blur
39. // 所以靠近摄像机的不模糊，越远越模糊
40. **return**lerp(ori,blur,dep);
41. \}
42. ENDCG
43. \}
44. \}
45. Fallback off
46. \}
47. 
48. //inline float Linear01Depth( float z )
49. //\{ 
50. // return 1.0 / (\_ZBufferParams.x \* z \+ \_ZBufferParams.y);
51. //\}

**C\#代码【挂在摄像机上】：**

1.  using UnityEngine;
2.  using System.Collections;
3.  
4.  **public****class**\_DepthOfField\_2 : MonoBehaviour
5.  \{
6.  // 景深shader
7.  **public**Shader dofShader;
8.  **private**Material dofMat = **null**;
9.  
10. **public**Shader blurShader ;
11. **private**Material blurMat = **null**;
12. 
13. **private****float**onePixelWidth = 1.0f / 512.0f;
14. **private****float**onePixelHeight = 1.0f / 512.0f;
15. 
16. **void**Start ()
17. \{
18. blurMat = **new**Material(blurShader);
19. dofMat = **new**Material(dofShader);
20. \}
21. 
22. **void**OnRenderImage(RenderTexture source, RenderTexture destination)
23. \{
24. // 创建【临时的屏幕纹理】
25. RenderTexture blurRT = RenderTexture.GetTemporary(source.width, source.height, 16);
26. // 将【临时的屏幕纹理】通过【模糊shader】变换为【模糊纹理】
27. blurMat.SetVector("offsets", **new**Vector4(onePixelWidth, onePixelWidth, 0.0f, 0.0f));
28. Graphics.Blit(source, blurRT, blurMat);
29. blurMat.SetVector("offsets", **new**Vector4(onePixelHeight, 0.0f, 0.0f, 0.0f));
30. Graphics.Blit(blurRT, blurRT, blurMat);
31. 
32. // 将【模糊纹理】的值传到【景深shader】中进行处理
33. dofMat.SetTexture("\_BlurTex", blurRT);
34. // 将【屏幕纹理】通过【景深shader】变换为【最终纹理】
35. Graphics.Blit(source, destination, dofMat);
36. // 释放临时纹理
37. RenderTexture.ReleaseTemporary(blurRT);
38. \}
39. \}

学习来源：shaderlab实例教程

[shader]: /images/20220714/4785d0c907684575a7e664385c41dbd4.png
[shader 1]: http://s10.sinaimg.cn/mw690/002wvREMgy6RcVmvLKxc9&690
[shader_shader 1]: /images/20220714/2caf47dcc4c94515a651eeeece60948b.png