Shader山下(十一)纹理混合

Shader山下(八)片段着色器介绍了如何编写片段着色器,本文就使用它实现纹理混合效果。

首先需要一份最简单的片段着色器:

Shader "Custom/Frag/Blend" {
	Properties {
		_MainTex ("Albedo (RGB)", 2D) = "white" {}
	}
	SubShader {
		Tags { "RenderType"="Opaque" }
		LOD 200

		Pass
		{
			CGPROGRAM
			#pragma vertex vert_img                             
			#pragma fragment frag                               
			#pragma fragmentoption ARB_precision_hint_fastest   
			#include "UnityCG.cginc"                            

			uniform sampler2D _MainTex;

			fixed4 frag(v2f_img i) : COLOR                      
			{
				fixed4 renderTex = tex2D(_MainTex, i.uv);
				return renderTex;
			}
			ENDCG
		}
	}
	FallBack "Diffuse"
}

Properties增加混合贴图和混合参数:

		_BlendTex ("Blend Texture", 2D) = "white" {}
		_Opacity ("Blend Opacity", Range(0, 1)) = 1

SubShader里声明同名变量:

			sampler2D _BlendTex;
			fixed _Opacity;

修改frag方法:

			fixed4 frag(v2f_img i) : COLOR
			{
				fixed4 renderTex = tex2D(_MainTex, i.uv);
				fixed4 blendTex = tex2D(_BlendTex, i.uv);

				fixed4 blended = getBlended(renderTex, blendTex);

				renderTex = lerp(renderTex, blended, _Opacity);

				return renderTex;
			}

getBlended方法:

			fixed4 getBlended()
			{
				fixed4 blended;
				blended = renderTex * blendTex;
				return blended;
			}

lerp是插值方法,计算from(第一个参数)和to(第二个参数)之间在p(第三个参数)上的插值,即lerp = from + (to - from) * p。


可以使用下面两张图片作为基础图片和混合图片:

Shader山下(十一)纹理混合_第1张图片

Shader山下(十一)纹理混合_第2张图片

获得效果:

Shader山下(十一)纹理混合_第3张图片


我们还可以尝试一下其他混合,例如把getBlended方法改成:

			fixed4 getBlended(fixed4 renderTex, fixed4 blendTex)
			{
				fixed4 blended;
				blended = renderTex + blendTex;
				return blended;
			}

效果:

Shader山下(十一)纹理混合_第4张图片


此外,还可以使用一种称为屏幕混合的方法:

			fixed4 getBlended(fixed4 renderTex, fixed4 blendTex)
			{
				fixed4 blended;
				blended = (1.0 - ((1.0 - renderTex) * (1.0 - blendTex)));
				return blended;
			}
效果:

Shader山下(十一)纹理混合_第5张图片

你可能感兴趣的:(Shader,Shader山下)