devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Unity Shader入门精要 第十章（下）——渲染纹理、程序纹理_unity shader render target

作者：从前慢现在也慢 | 2024-02-18 13:45:14

赞

踩

unity shader render target

10.2 渲染纹理

        摄像机的渲染结果会输出到颜色缓冲，并显示到我们的屏幕上。现代的GPU允许我们把整个三维场景渲染到一个中间缓冲中，即渲染目标纹理（Render Target Texture）。

        多重渲染目标（Multiple Render Target，MRT）：这个技术指的是GPU允许我们把场景同时渲染到多个渲染目标纹理，而不用为每个渲染目标纹理单独渲染完整场景。【某度：允许程序同时渲染到多个颜色缓冲，向不同的颜色缓冲中送入渲染结果的不同方面（如不同RGBA 色彩通道的值、深度值等）。】延迟渲染就使用了多重渲染目标。

        Unity为了渲染目标纹理定义了一种专门的纹理类型——渲染纹理（Render Texture）。使用渲染纹理有两种方式：

  1. 在Project目录下创建一个渲染纹理，然后把某个摄像机的渲染目标设置为该渲染纹理，这样摄像机的渲染结果就会实时更新到渲染纹理中，而不会显示在屏幕上。
  2. 在屏幕后处理时使用GrapbPass命令或OnRenderImage函数来获取当前屏幕图像，Unity会把这个屏幕图像放到一张和屏幕分辨率相同的渲染纹理中，下面就可以在自定义的Pass中把它们当成普通的纹理来处理。通常用来渲染透明物体。

        下面会依次学习这两种方法。

10.2.1 镜子效果

        这里使用的是上面的第一种方式，使用渲染纹理模拟镜子效果。

  1. 我们要先搭建好场景，还有创建一个四边形（Quad）用来当镜子。
  2. 在Project窗口下创建一个渲染纹理（Create->Render Texture)，命名为MirrorTexture。我们也可以在Render Texture的inspect窗口下调整这个纹理的分辨率、滤波模式等，如下图；
  3. 创建一个摄像机，调整摄像机参数，让摄像机显示的图像是我们希望的镜子的图像。然后把把前面创建的渲染纹理Mirror Texture拖拽到该摄像机的Target Texture上。
  4. 最后我们给镜子添加下面的Shader的材质。

         镜子的实现原理很简单，只要使用一个渲染纹理作为输入属性，并把该渲染纹理在水平方向上反转后直接显示到物体上即可。

  1. Shader "MyShader/Chapter 10/Mirror" {
  2. 	Properties {
  3. 		_MainTex ("Main Tex", 2D) = "white" {} //这个纹理对应摄像机渲染得到的纹理
  4. 	}
  5. 	SubShader {
  6. 		Tags { "RenderType"="Opaque" "Queue"="Geometry"}
  7. 		
  8. 		Pass {
  9. 			CGPROGRAM
  10. 			
  11. 			#pragma vertex vert
  12. 			#pragma fragment frag
  13. 			
  14. 			sampler2D _MainTex;
  15. 			
  16. 			struct a2v {
  17. 				float4 vertex : POSITION;
  18. 				float3 texcoord : TEXCOORD0;
  19. 			};
  20. 			
  21. 			struct v2f {
  22. 				float4 pos : SV_POSITION;
  23. 				float2 uv : TEXCOORD0;
  24. 			};
  25. 			
  26. 			v2f vert(a2v v) {
  27. 				v2f o;
  28. 				o.pos = UnityObjectToClipPos(v.vertex);
  29. 				
  30. 				o.uv = v.texcoord;
  31. 				// Mirror needs to filp x
  32. 				//因为镜子里面都是左右相反的，所以翻转了x分量的纹理坐标
  33. 				o.uv.x = 1 - o.uv.x;
  34. 				
  35. 				return o;
  36. 			}
  37. 			
  38. 			fixed4 frag(v2f i) : SV_Target {
  39. 				return tex2D(_MainTex, i.uv);
  40. 			}
  41. 			
  42. 			ENDCG
  43. 		}
  44. 	} 
  45.  	FallBack Off
  46. }

        最后我们可以得到下面的效果，其实就是将一个摄像机所拍摄到的图片当成纹理给了镜子。

10.2.2 玻璃效果

        在Unity Shader中我们还可以使用一种特殊的Pass来完成获取屏幕图像的目的，这就是GrabPass，对应的第二种方法。 当我们定义了一个GrabPass之后，Unity会把当前屏幕的图像绘制在一张纹理中，以便我们在后续的Pass中访问它。通常会使用GrabPass来实现玻璃等透明材质的模拟。与简单的他们混合不同，使用GrabPass可以让我们对该物体后面的图像进行更复杂的处理，如使用法线来模拟折射效果，而不是简单的和原屏幕颜色进行混合。

        在使用GrapbPass时，我们要把渲染队列设置为透明队列（即“Queue” = “Transparent”），虽然代码中不包含混合指令，但是我们要保证该物体在所有不透明物体之后渲染。

        下面我们用GrabPass来模拟一个玻璃效果。思路如下：先使用一张法线纹理来修改模型的法线信息（凹凸纹理）；然后使用10.1的反射方法，通过一个Cubemap模拟玻璃的反射。然后在模拟折射时，使用了GrabPass获取玻璃后面的屏幕图像，并使用切线空间下的法线对屏幕纹理坐标偏移后，再对屏幕图像进行采样来模拟近似的折射效果。最后可以得到下面的结果：

        准备工作：

  1. 搭建好场景，在一个密闭房间，放置一个正方体和球体，球体在正方体内部。这是为了模拟玻璃对内部物体的折射效果。
  2. 为了得到本场景使用的环境映射纹理，我们使用10.1.2的脚本来生成，得到类似于下面的环境映射纹理。

         然后我们来写一下正方体的Shader。

  1. Shader "MyShader/Chapter 10/Glass Refraction" {
  2. 	Properties {
  3. 		_MainTex ("Main Tex", 2D) = "white" {} //玻璃的纹理材质，默认为白色纹理
  4. 		_BumpMap ("Normal Map", 2D) = "bump" {} //玻璃的法线纹理
  5. 		_Cubemap ("Environment Cubemap", Cube) = "_Skybox" {} //模拟反射的环境纹理
  6. 		_Distortion ("Distortion", Range(0, 1000)) = 10 //控制模拟折射时图像的扭曲程度
  7. 		_RefractAmount ("Refract Amount", Range(0.0, 1.0)) = 1.0 //控制折射程度，0->只有反射，1->只有折射
  8. 	}
  9. 	SubShader {
  10. 		// 把渲染队列设置为Transparent，虽然RenderType设置的是Opaque（不透明），实际上是服务于不同的需求
  11. 		// Transparent可以确保渲染该物体时，其他所有不透明物体都以及被渲染到屏幕上了，否则可能无法正确得到“透过玻璃看到的图像”
  12. 		// Opaque 是为了在使用着色器替换（Shader Replacement）时，该物体可以在需要时被正确渲染13章会讲到
  13. 		Tags { "Queue"="Transparent" "RenderType"="Opaque" }
  14. 		
  15. 		// 通过关键字GrabPass定义了一个抓取屏幕图像的Pass。
  16. 		// 这里我们定义了一个字符串 "_RefractionTex" ，这决定我们抓取得到的屏幕图像会被存入哪个纹理中
  17. 		GrabPass { "_RefractionTex" }
  18. 		
  19. 		Pass {		
  20. 			CGPROGRAM
  21. 			
  22. 			#pragma vertex vert
  23. 			#pragma fragment frag
  24. 			
  25. 			#include "UnityCG.cginc"
  26. 			
  27. 			sampler2D _MainTex;
  28. 			float4 _MainTex_ST;
  29. 			sampler2D _BumpMap;
  30. 			float4 _BumpMap_ST;
  31. 			samplerCUBE _Cubemap;
  32. 			float _Distortion;
  33. 			fixed _RefractAmount;
  34. 			sampler2D _RefractionTex; //使用GrabPass指定的纹理名称
  35. 			 // 可以让我们得到该纹理的纹素大小，如果大小为256*512，纹素大小为（1/256，1/512），对屏幕图像的采样坐标进行偏移时使用该变量
  36. 			float4 _RefractionTex_TexelSize;
  37. 		
  38. 			struct a2v {
  39. 				float4 vertex : POSITION;
  40. 				float3 normal : NORMAL;
  41. 				float4 tangent : TANGENT; 
  42. 				float2 texcoord: TEXCOORD0;
  43. 			};
  44. 			
  45. 			struct v2f {
  46. 				float4 pos : SV_POSITION;
  47. 				float4 scrPos : TEXCOORD0;//屏幕坐标
  48. 				float4 uv : TEXCOORD1;
  49. 				float4 TtoW0 : TEXCOORD2;  
  50. 			    float4 TtoW1 : TEXCOORD3;  
  51. 			    float4 TtoW2 : TEXCOORD4; 
  52. 			};
  53. 			
  54. 			v2f vert (a2v v) {
  55. 				v2f o;
  56. 				o.pos = UnityObjectToClipPos(v.vertex);
  57. 				//通过调用内置的 ComputeGrabScreenPos 函数来得到对应被抓取的屏幕图像的采样坐标
  58. 				o.scrPos = ComputeGrabScreenPos(o.pos);
  59. 				//计算了两个纹理的采样坐标。分别放在float4类型变量的xy和zw中
  60. 				o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
  61. 				o.uv.zw = TRANSFORM_TEX(v.texcoord, _BumpMap);
  62. 				
  63. 				//因为使用了凹凸纹理，这里要计算切线空间到世界空间的变换矩阵
  64. 				
  65. 				float3 worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;  
  66. 				fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);  
  67. 				fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);  
  68. 				fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w; //cross返回两个三维向量的叉积 
  69. 				//xyz储存矩阵，w储存世界坐标
  70. 				o.TtoW0 = float4(worldTangent.x, worldBinormal.x, worldNormal.x, worldPos.x);  
  71. 				o.TtoW1 = float4(worldTangent.y, worldBinormal.y, worldNormal.y, worldPos.y);  
  72. 				o.TtoW2 = float4(worldTangent.z, worldBinormal.z, worldNormal.z, worldPos.z);  
  73. 				
  74. 				return o;
  75. 			}
  76. 			
  77. 			fixed4 frag (v2f i) : SV_Target {	
  78. 				//使用w分量得到世界坐标	
  79. 				float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
  80. 				fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(worldPos));
  81. 				
  82. 				// Get the normal in tangent space
  83. 				// 对法线纹理采样，得到切线空间下的法线方向
  84. 				fixed3 bump = UnpackNormal(tex2D(_BumpMap, i.uv.zw));	
  85. 				
  86. 				// 使用bump、_Distortion、_RefractionTex_TexelSize对屏幕图像的采样坐标进行偏移
  87. 				// _Distortion值越大，偏移量越大，玻璃背后物体看起来的变形程度就越大。
  88. 				float2 offset = bump.xy * _Distortion * _RefractionTex_TexelSize.xy;
  89. 				//这里乘了一个i.scrPos.z会让变形程度随着摄像机的距离发生远近变换，不乘也可以
  90. 				i.scrPos.xy = offset * i.scrPos.z + i.scrPos.xy;
  91. 				//对抓取的屏幕图_RefractionTex进行采样，得到模拟的折射颜色
  92. 				fixed3 refrCol = tex2D(_RefractionTex, i.scrPos.xy/i.scrPos.w).rgb;
  93. 				
  94. 				//把法线从切线空间转到世界空间
  95. 				bump = normalize(half3(dot(i.TtoW0.xyz, bump), dot(i.TtoW1.xyz, bump), dot(i.TtoW2.xyz, bump)));
  96. 				fixed3 reflDir = reflect(-worldViewDir, bump);
  97. 				fixed4 texColor = tex2D(_MainTex, i.uv.xy);
  98. 				//通过texCUBE函数，使用反射方向对立方体纹理采样
  99. 				fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb;
  100. 				//混合反射和折射颜色
  101. 				fixed3 finalColor = reflCol * (1 - _RefractAmount) + refrCol * _RefractAmount;
  102. 				
  103. 				return fixed4(finalColor, 1);
  104. 			}
  105. 			
  106. 			ENDCG
  107. 		}
  108. 	}
  109. 	
  110. 	FallBack "Diffuse"
  111. }

         最后给对这几个纹理赋值即可

         在代码中有一行：GrabPass { "_RefractionTex" } ，使用了字符串指明了被抓取的屏幕图像将会存储在哪个纹理名称中。实际上GrabPass支持两种形式。

  • 直接使用GrabPass{ }，然后在后续的Pass中直接使用_GrabTexture来访问屏幕图像。但当场景有多个物体都使用这种方法来抓取屏幕时，性能消耗较大，因为对于每一个使用它的物体，Unity都会单独进行一次昂贵的屏幕抓取操作。但这种方法可以让每个物体得到不同的屏幕图像，这取决于它们的渲染队列和渲染它们时当前的屏幕缓冲的颜色。
  • 使用 GrabPass { "TextureName" } ，也就是本节使用的方法，可以在后续的Pass中使用TextureName来访问屏幕图像。使用这种方法可以抓取屏幕，但Unity只会在每一帧时为第一个使用名为TextureName的纹理的物体执行一次抓取屏幕的操作，这个纹理也可以在其他Pass中被访问。这种方法更高效，因为不管场景中有多少物体使用了该命令，每一帧中 nity 都只会执行一次抓取工作，但这也意味着所有物体都会使用同一张屏幕图像。不过，在大多数情况下这已经足够了。

10.3 程序纹理

        程序纹理（Procedural Texture）指的是那些由计算机生成的图像。我们通常使用一些特定的 算法来创建个性化图案或非常真实的自然元素， 例如木头、石子等。使用程序纹理的好处在于我 们可以使用各种参数来控制纹理的外观，而这些属性不仅仅是那些颜色属性，甚至可以是完全不同类型的图案属性 ，这使得我们可以得到更加丰富的动画和视觉效果 。

10.3.1 在Untiy中实现简单的程序纹理

        我们先创建一个正方体，把第七章的SingleTexture的材质赋给这个正方体，然后也不需要任何的纹理。然后我们创建一个C#脚本，把这个脚本搭载到立方体上，然后我们要用代码来生成一个波点纹理。

  1. using UnityEngine;
  2. using System.Collections;
  3. using System.Collections.Generic;
  4.  
  5. [ExecuteInEditMode]//为了让该脚本能在编辑器模式下运行，要加上这行代码
  6. public class ProceduralTextureGeneration : MonoBehaviour {
  7. 	//声明一个材质，这个材质将使用该脚本中生成的程序纹理。
  8. 	public Material material = null;
  9.  
  10. 	#region Material properties //声明程序纹理使用的各种参数
  11. 	//SetProperty一个开源插件，让我们在修改材质属性时候，可以执行_UpdateMaterial() 使用新的属性重新生成程序纹理
  12. 	[SerializeField, SetProperty("textureWidth")]
  13. 	private int m_textureWidth = 512;//纹理大小
  14. 	public int textureWidth {
  15. 		get {
  16. 			return m_textureWidth;
  17. 		}
  18. 		set {
  19. 			m_textureWidth = value;
  20. 			_UpdateMaterial();
  21. 		}
  22. 	}
  23.  
  24. 	[SerializeField, SetProperty("backgroundColor")]
  25. 	private Color m_backgroundColor = Color.white;//纹理背景颜色
  26. 	public Color backgroundColor {
  27. 		get {
  28. 			return m_backgroundColor;
  29. 		}
  30. 		set {
  31. 			m_backgroundColor = value;
  32. 			_UpdateMaterial();
  33. 		}
  34. 	}
  35.  
  36. 	[SerializeField, SetProperty("circleColor")]
  37. 	private Color m_circleColor = Color.yellow;//圆点的颜色
  38. 	public Color circleColor {
  39. 		get {
  40. 			return m_circleColor;
  41. 		}
  42. 		set {
  43. 			m_circleColor = value;
  44. 			_UpdateMaterial();
  45. 		}
  46. 	}
  47.  
  48. 	[SerializeField, SetProperty("blurFactor")]
  49. 	private float m_blurFactor = 2.0f;//模糊因子，用来模糊圆形边界的
  50. 	public float blurFactor {
  51. 		get {
  52. 			return m_blurFactor;
  53. 		}
  54. 		set {
  55. 			m_blurFactor = value;
  56. 			_UpdateMaterial();
  57. 		}
  58. 	}
  59. 	#endregion
  60.  
  61. 	private Texture2D m_generatedTexture = null;
  62.  
  63. 	// 初始化
  64. 	void Start () {
  65. 		if (material == null) {//如果为空，找到身上的Rederer组件
  66. 			Renderer renderer = gameObject.GetComponent<Renderer>();
  67. 			if (renderer == null) {
  68. 				Debug.LogWarning("Cannot find a renderer.");
  69. 				return;
  70. 			}
  71.  
  72. 			material = renderer.sharedMaterial;//给material赋值
  73. 		}
  74.  
  75. 		_UpdateMaterial();
  76. 	}
  77.  
  78. 	private void _UpdateMaterial() {
  79. 		if (material != null) {
  80. 			m_generatedTexture = _GenerateProceduralTexture();
  81. 			material.SetTexture("_MainTex", m_generatedTexture);//给材质的MainTex纹理赋值
  82. 		}
  83. 	}
  84.  
  85. 	private Color _MixColor(Color color0, Color color1, float mixFactor) {
  86. 		Color mixColor = Color.white;
  87. 		mixColor.r = Mathf.Lerp(color0.r, color1.r, mixFactor);
  88. 		mixColor.g = Mathf.Lerp(color0.g, color1.g, mixFactor);
  89. 		mixColor.b = Mathf.Lerp(color0.b, color1.b, mixFactor);
  90. 		mixColor.a = Mathf.Lerp(color0.a, color1.a, mixFactor);
  91. 		return mixColor;
  92. 	}
  93.  
  94. 	//用来生成程序纹理
  95. 	private Texture2D _GenerateProceduralTexture() {
  96. 		Texture2D proceduralTexture = new Texture2D(textureWidth, textureWidth);
  97.  
  98. 		// 定义圆于圆之间的距离，就是纹理宽度除4，因为每行有3个圆
  99. 		float circleInterval = textureWidth / 4.0f;
  100. 		// 定义圆的半径
  101. 		float radius = textureWidth / 10.0f;
  102. 		// 定义模糊系数
  103. 		float edgeBlur = 1.0f / blurFactor;
  104.  
  105. 		//遍历纹理图的每个像素
  106. 		for (int w = 0; w < textureWidth; w++) {
  107. 			for (int h = 0; h < textureWidth; h++) {
  108. 				// 使用背景颜色进行初始化
  109. 				Color pixel = backgroundColor;
  110.  
  111. 				// 依次画9个圆
  112. 				for (int i = 0; i < 3; i++) {
  113. 					for (int j = 0; j < 3; j++) {
  114. 						// 计算当前所绘制圆的圆心位置
  115. 						Vector2 circleCenter = new Vector2(circleInterval * (i + 1), circleInterval * (j + 1));
  116.  
  117. 						// 计算当前像素与圆形的距离
  118. 						float dist = Vector2.Distance(new Vector2(w, h), circleCenter) - radius;
  119.  
  120. 						// 模糊圆的边界
  121. 						Color color = _MixColor(circleColor, new Color(pixel.r, pixel.g, pixel.b, 0.0f), Mathf.SmoothStep(0f, 1.0f, dist * edgeBlur));
  122.  
  123. 						// 与之前得到的颜色进行混合
  124. 						pixel = _MixColor(pixel, color, color.a);
  125. 					}
  126. 				}
  127.  
  128. 				proceduralTexture.SetPixel(w, h, pixel);
  129. 			}
  130. 		}
  131.  
  132. 		proceduralTexture.Apply();//apply函数强制把像素值写入纹理中
  133.  
  134. 		return proceduralTexture;//返回该程序纹理
  135. 	}
  136. }

        然后我们就可以通过调整C#脚本里面的参数来生成程序纹理了。

10.3.2 程序材质

        在Unity中，有一类专门使用程序纹理的材质，叫做程序材质（Procedural Materials）。这个程序材质和程序纹理要使用叫Substance Designer的软件在Unity外部生成的。这些材质的后缀是.sbsar，也可以和其他资源一样之间拖入到Unity中进行使用。

        程序材质的自由的很高，而且可以配合Shader得到非常出色的视觉效果，是一种非常强大的材质类型。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/108302
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号