13.图片圆角

Unity Shader 实现动态圆角图像效果

最新推荐文章于 2024-09-11 16:11:16 发布

转载最新推荐文章于 2024-09-11 16:11:16 发布 · 527 阅读

文章标签：

#Unity #Shader

Shader学习专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用 Unity Shader 实现的动态圆角图像效果案例。该 Shader 通过计算 UV 坐标来生成圆角效果，并且可以通过调整参数来改变圆角的大小。文中提供了一个完整的 Shader 示例代码，包括顶点着色器和片段着色器的实现。

Shader "Study/13_imageCircle" {
	Properties{
		_image("image", 2D) = "white" {}
	    _percent("_percent", Range(-5, 5)) = 1
		_angle("angle", Range(0, 1)) = 0
	}

		CGINCLUDE
#include "UnityCG.cginc"               

		sampler2D _image;
	float _percent;
	float _angle;

	struct v2f {
		float4 pos:SV_POSITION;
		float2 uv : TEXCOORD0;
	};

	v2f vert(appdata_base v) {
		v2f o;
		o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
		o.uv = v.texcoord.xy;
		return o;
	}

	fixed4 frag(v2f i) : COLOR0{
		// 计算圆角    
		float2 uv = i.uv.xy - float2(0.5,0.5);
		float rx = fmod(uv.x, 0.4);
		float ry = fmod(uv.y, 0.4);
		float mx = step(0.4, abs(uv.x));
		float my = step(0.4, abs(uv.y));
		float alpha = 1 - mx*my*step(0.1, length(half2(rx,ry)));

		fixed4 k = tex2D(_image, i.uv);

		//k += fixed4(v,v,v,v); // 加上光线    
		k *= fixed4(fixed3(1, 1, 1), alpha); // 圆角的运用    
		return k;
	}
		ENDCG

		SubShader {
		Tags{ "Queue" = "Transparent" }
			ZWrite Off
			Blend SrcAlpha OneMinusSrcAlpha
			Pass{
			CGPROGRAM
#pragma vertex vert        
#pragma fragment frag        
#pragma fragmentoption ARB_precision_hint_fastest         

			ENDCG
		}
	}
	FallBack Off
}

其中fmod函数：取模

step函数：step(edge, x): 如 x<edge 则0.0, 否则 1.0