[Unity Shader] Outline 외곽선 쉐이더 만들기

2019년 4월 26일에 쉐이더 강의를 구매했었다.

 

계속 따라하다가 이제 정리해보려고 한다.

 

맨 처음에 제일 궁금했던 건 외곽선 쉐이더 만들기였다.

방법이 4개 정도?가 있어서 뭐가 좋고 나쁘고를 몰랐는데, 이제 이 쉐이더만 사용할 것 같다.

 

 

구현

 

소스 코드

Shader "Mingyu/Outline"
{
	Properties
	{
		_Color("Main Color", Color) = (1,1,1,1)
		_MainTex("Main Texture", 2D) = "white" {}
		_Outline("Outline", Float) = 0.1
		_OutlineColor("Outline Color", Color) = (1,1,1,1)
	}

	SubShader
	{
		Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }

		// 외곽선 그리기
		Pass
		{
			Blend SrcAlpha OneMinusSrcAlpha
			Cull Front // 뒷면만 그리기
			ZWrite Off

			CGPROGRAM

			#pragma vertex vert
			#pragma fragment frag

			half _Outline;
			half4 _OutlineColor;

			struct vertexInput
			{
				float4 vertex: POSITION;
			};

			struct vertexOutput
			{
				float4 pos: SV_POSITION;
			};

			float4 CreateOutline(float4 vertPos, float Outline)
			{
				// 행렬 중에 크기를 조절하는 부분만 값을 넣는다.
				// 밑의 부가 설명 사진 참고.
				float4x4 scaleMat;
				scaleMat[0][0] = 1.0f + Outline;
				scaleMat[0][1] = 0.0f;
				scaleMat[0][2] = 0.0f;
				scaleMat[0][3] = 0.0f;
				scaleMat[1][0] = 0.0f;
				scaleMat[1][1] = 1.0f + Outline;
				scaleMat[1][2] = 0.0f;
				scaleMat[1][3] = 0.0f;
				scaleMat[2][0] = 0.0f;
				scaleMat[2][1] = 0.0f;
				scaleMat[2][2] = 1.0f + Outline;
				scaleMat[2][3] = 0.0f;
				scaleMat[3][0] = 0.0f;
				scaleMat[3][1] = 0.0f;
				scaleMat[3][2] = 0.0f;
				scaleMat[3][3] = 1.0f;
				
				return mul(scaleMat, vertPos);
			}

			vertexOutput vert(vertexInput v)
			{
				vertexOutput o;

				o.pos = UnityObjectToClipPos(CreateOutline(v.vertex, _Outline));

				return o;
			}

			half4 frag(vertexOutput i) : COLOR
			{
				return _OutlineColor;
			}

			ENDCG
		}

		// 정상적으로 그리기
		Pass
		{
			Blend SrcAlpha OneMinusSrcAlpha

			CGPROGRAM

			#pragma vertex vert
			#pragma fragment frag

			half4 _Color;
			sampler2D _MainTex;
			float4 _MainTex_ST;

			struct vertexInput
			{
				float4 vertex: POSITION;
				float4 texcoord: TEXCOORD0;
			};

			struct vertexOutput
			{
				float4 pos: SV_POSITION;
				float4 texcoord: TEXCOORD0;
			};

			vertexOutput vert(vertexInput v)
			{
				vertexOutput o;
				o.pos = UnityObjectToClipPos(v.vertex);
				o.texcoord.xy = (v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw);
				return o;
			}

			half4 frag(vertexOutput i) : COLOR
			{
				return tex2D(_MainTex, i.texcoord) * _Color;
			}

			ENDCG
		}
	}
}

 

 

원리

 

총 2번의 과정으로 외곽선을 그린다.

 

첫번째에는 원래 오브젝트에 행렬을 곱해 크기를 키워준 뒤, 그려준다. (이것이 외곽선이 된다.)

두번째에는 원래 오브젝트를 그려준다.

 

왼쪽은 결과, 오른쪽은 2번의 과정을 분리했다.

 

오브젝트 Vertex에 행렬을 곱해주면, 행렬에 따라 위치, 회전, 크기 등을 조절해줄 수 있다.

 

단위행렬 기준!!

이동 행렬

 

회전 행렬

회전 행렬이 축마다 달라서 어려울 것 같다.

 

크기 행렬

출처 - https://www.youtube.com/user/chayanvinayak/videos

이 분 강의입니다.

 

 

 

정말 간단한 외곽선 제작 방법이지만,

 

오브젝트를 뒤집지 않았으므로 외곽선이 깨지지 않는다.

Vertex Shader를 이용했기 때문에, 라이팅 연산도 존재하지 않는다.