unity 切圆角矩形 --shader编程

先上个效果图

制作思路

如上图我们要渲染的就是上图带颜色的部分

步骤：

先获取黄色和蓝绿部分

例如以下图

算法

|U|<(0.5-r)或|V|<(0.5-r)

注意的是模型贴图最大值是1.

然后获取红色的四份之中的一个圆部分

实现过程

首先在unity里创建一个shader。

创建完毕后

然后双击newshader（名字是能够随便起）

将里面的内容所有删掉

代码例如以下:

Shader "Custom/NewShader" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
}
SubShader
{
pass
{

CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "unitycg.cginc"
sampler2D _MainTex;
struct v2f
{
float4 pos : SV_POSITION ;
float2 ModeUV: TEXCOORD0;
};
v2f vert(appdata_base v)
{
v2f o;
o.pos=mul(UNITY_MATRIX_MVP,v.vertex);  //将模型顶点坐标转换到视图坐标矩阵中
o.ModeUV=v.texcoord;   //获取模型的UV坐标
return o;
}
fixed4 frag(v2f i):COLOR
{
fixed4 col;

col=tex2D(_MainTex,i.ModeUV); //依据模型UV坐标获取贴图相相应的颜色

return col;
}
ENDCG

}
}
}

上述主要代码以凝视。

如今实现了一个简单的顶点像素shader。

然后建一个material材质球。将你写的shader拖到material上面去，然后给material赋值一张图片。

然后创建一个3D的Plane物体，将material拖到物体上面去。

效果例如以下图：

好了如今我们来切圆角矩形。

要说明的是我们为了计算方便坐标系原点在uv的中心，可是unity模型的uv的原点在左下角例如以下图，切vu取值范围（0，1）。就是说贴图的像素坐标也是（0,1）表示全部的像素坐标点

unity的uv坐标系

所以为了统一，我们将unity的uv坐标系处理成中心坐标系，用一个变量存储处理后的坐标系

方法是

unity的uv-float(0.5,0.5)

首先我们实现下图区域的显示

改动上面的代码，我们须要加入一个圆角半径的属性。然后我们要获取上面所说的黄色和蓝绿色部分，加入代码以下红色字体。

代码改动后例如以下：

Shader "Custom/NewShader" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
_RADIUSBUCE("_RADIUSBUCE",Range(0,0.5))=0.2
}
SubShader
{
pass
{

CGPROGRAM

#pragma exclude_renderers gles
#pragma vertex vert
#pragma fragment frag
#include "unitycg.cginc"
float _RADIUSBUCE;
sampler2D _MainTex;

struct v2f
{
float4 pos : SV_POSITION ;
float2 ModeUV: TEXCOORD0;
float2 RadiusBuceVU : TEXCOORD1;
};
v2f vert(appdata_base v)
{
v2f o;
o.pos=mul(UNITY_MATRIX_MVP,v.vertex); //v.vertex;
o.ModeUV=v.texcoord;
o.RadiusBuceVU=v.texcoord-float2(0.5,0.5); //将模型UV坐标原点置为中心原点,为了方便计算

return o;
}

fixed4 frag(v2f i):COLOR
{
fixed4 col;
col=(0,1,1,0);

if(abs(i.RadiusBuceVU.x)<0.5-_RADIUSBUCE||abs(i.RadiusBuceVU.y)<0.5-_RADIUSBUCE) //即上面说的|x|<(0.5-r)或|y|<(0.5-r)
{

col=tex2D(_MainTex,i.ModeUV);

}

return col;
}
ENDCG

}
}
}

效果例如以下图：