心形函數的正確打開方式（Unity3D Shader）

一、前因

前幾天刷完了最近特別火的一部電視劇《隱祕的角落》，裏面秦昊飾演的張東昇提到了一個笛卡爾的心形函數：r=a(1-sinθ)。

出於好奇我就去查了一下這個函數的圖形，但感覺並不恨像心行，有點像桃子。

所以我打算使用Unity的Shader畫一個更好的心形函數。

二、實現

1.要渲染到全屏，就需要相機Camera的Texture進行材質修改，所以先創建一個RenderTexture的腳本

public class RenderControl : MonoBehaviour {

    [SerializeField]
    Material mat;
    private void OnRenderImage(RenderTexture source, RenderTexture destination)
    {
        Graphics.Blit(destination, mat);
    }
}

把它掛在場景的相機上

賦予材質Test1然後就是對改材質的shader進行編寫。

2.先在網上找一個心形函數的公式

在Shader進行改公式的計算

float heart(float2 st)
{
    //調整位置
    st = (st - float2(0.5, 0.38)) * float2(2.1, 2.8);
    //心形函數計算
    return pow(st.x, 2) + pow(st.y - sqrt(abs(st.x)), 2);
}
			
fixed4 frag (v2f i) : SV_Target
{
    float d = heart(i.uv);
    return d;
}

的到如下心形圖案

使用step()函數讓心形的邊界分明

d = step(d, 1);

得到如下圖

還可以讓心動起來

d = step(d, abs(sin(d * 8 - _Time.w * 2)));

最後在給它加個紅色

				float d = heart(i.uv);
				//循環動畫
				d = step(d, abs(sin(d * 8 - _Time.w * 2)));
				//上色
				float4 col = fixed4(d, 0.2, 0.21, 1);
				if(d < 1){
					col = fixed4(d, 0, 0, 1);
				}				
				return col;

三、最終效果

四、完整shader代碼

Shader "XYH/Test1"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				UNITY_FOG_COORDS(1)
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}

			float heart(float2 st)
			{
				//調整位置
				st = (st - float2(0.5, 0.38)) * float2(2.1, 2.8);
				//心形函數計算
				return pow(st.x, 2) + pow(st.y - sqrt(abs(st.x)), 2);
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				float d = heart(i.uv);
				//循環動畫
				d = step(d, abs(sin(d * 8 - _Time.w * 2)));
				//上色
				float4 col = fixed4(d, 0.2, 0.21, 1);
				if(d < 1){
					col = fixed4(d, 0, 0, 1);
				}				
				return col;
			}
			ENDCG
		}
	}
}