用Shader來繪制一個跳動的心臟。效果圖
代碼如下：
Shader"Custom/Heart"{
SubShader{
pass{
CGPROGRAM
#pragmavertexvert
#pragmafragmentfrag
#include"UnityCG.cginc"
//1.心形Shader的渲染需要拿到紋理坐標來進行渲染
//2.位置綁定
struct v2f{
float4 pos:POSITION;
float2 uv:TEXTCOORD0;
};
v2f?vert(appdata_full?v)
{
v2f?o;
//坐標轉換
o.pos?=mul(UNITY_MATRIX_MVP,v.vertex);
//將心形中心點設置到紋理坐標中央(即（0.5,0.5）=>(0,0)),4為縮放比例
o.uv?=4*v.texcoord.xy-fixed2(2,2);
returno;
}
float4 frag(v2f?i):COLOR{
//背景顏色亮暗可以通過（1，.0.8,0.7）*（r（0到1之間的值））來達到
//距離中心越遠r值越小
//length(q)q向量的的長度
fixed3 background?= fixed3(1,0.8,0.7-0.07*i.uv.y)*(1-0.25*length(i.uv));
//控制心跳時間和函數橫向長縱向短
//利用時間控制周期
float tt?=fmod(_Time.y,1.0)/1.0;
float ss?=pow(tt,.2)*.5+.5;
ss?-=?ss*0.2*sin(tt*6.2831*3.0)*exp(-tt*4.0);
i.uv?*=float2(0.5,1.5)?+float2(0.5,?-0.5)/ss;
//心形函數
float a=abs(atan2(i.uv.y,i.uv.x))/3.141593;
float r?=length(i.uv);
//利用函數調節心形函數
float d?=?(13*a-22*a*a+10*a*a*a)/(6-5*a);
fixed3 hcol?=fixed3(1,0,0.3);
//背景顏色與心顏色過渡用Lerpsmoothstep做平滑處理
fixed3 col?=lerp(background,?hcol,smoothstep(-0.01,0.01,?d-r));
return fixed4(col,1);
}
ENDCG
}
}
Fallback"Diffuse"
}
1.心形畫法的原理
利用心形函數方程的特性
如圖所示? 心形曲線上的每個點到原點的距離與每個點到x軸的夾角的弧度制存在著一定的比例
我們可以利用這個來畫心。
2. 坐標的設置
根據紋理坐標的性質，通過獲取到紋理坐標，然后來設置坐標軸的原點位置以及在顯示方面的大小。這里我們是把心形中心點設置到紋理坐標中央(即（0.5,0.5）=>(0,0)),4為縮放比例o.uv?=4*v.texcoord.xy-fixed2(2,2);
3.圖形的畫制
atan2(i.uv.y,i.uv.x)求的是向量所對應的角度。求得的是弧度制的值，除以pi后得到的范圍是［0，1］；所以上面的函數就是求得平面上的坐標點所對應向量的角度（被映射到［0，1］之間）；然后只需要把心形里面和外面渲染成不同的顏色即可。方法是用step方法，這里用smoothstep，使得邊緣不那么硬, 然后結合lerp方法，如下：
float a=atan2(i.uv.y,i.uv.x)/3.141593;
float r?=length(i.uv);
fixed3 col =lerp(background, hcol,smoothstep(-0.01,0.01, a-r));
這樣只是畫了半顆心，需要翻轉xy軸，并取絕對值，
即可
4.利用函數調節心形
利用下面函數可以來調節心形
//利用函數調節心形函數
float d?=?(13*a-22*a*a+10*a*a*a)/(6-5*a);
5.心形跳動的算法
原理就是通過一定比例來改變心形的長寬的比例，然后讓這種變化呈現一種周期性的變化。
我們這里有了一個接近于心跳規律的函數來控制。
//控制心跳時間和函數橫向長縱向短
//利用時間控制周期
float tt?=fmod(_Time.y,1.0)/1.0;
float ss?=pow(tt,.2)*.5+.5;
ss?-=?ss*0.2*sin(tt*6.2831*3.0)*exp(-tt*4.0);
i.uv?*=float2(0.5,1.5)?+float2(0.5,?-0.5)/ss;
