[Unity] 2D Shader Graph - 이미지 외곽선 Outline 만들기

2D Sprite의 Outline을 만들고 싶어서 강좌를 찾아보고 따라해봤다. 하면서 헤맸던 점과 Unity 최신 버전에서 바뀐 부분을 설명한다.

 

참고한 강좌는 이쪽

https://www.youtube.com/watch?v=MqpyXhBIRSw&t=911s 

 

 

2D Outline Shader Graph 제작

2D Sprite Unlit Shader Graph

2D Sprite Unlit Shader Graph를 하나 만든다. 강좌에서는 Experimental 기능이었는데 최신 Unity에서는 정식으로 지원한다. 경로는 Assets > Create > Shader Graph > URP > Sprite Unlit Shader Graph

Assets > Create > Shader Graph > URP > Sprite Unlit Shader Graph

 

Node 추가

Blackboard에서 3가지 Node를 만들어둔다. Texture2D의 이름은 반드시 MainTex로 해줄 것.* 안 그러면 에러난다. Float와 Color의 이름은 크게 상관 없다.

* 보다 정확히 이야기하자면 Texture2D의 Reference를 _MainTex로 해주어야 한다. 하지만 처음부터 이름을 MainTex로 지으면 알아서 Reference가 _MainTex로 잡힌다.

팁) 혹시 Blackboard나 Graph Inspector가 안 보인다면 Shader Graph 창의 우상단을 확인할 것!

Blackboard와 Graph Inspector, Main Preview 창을 On/Off 할 수 있는 버튼들은 우상단에 위치

 

Blackboard에서 만들 3가지 Node

MainTex의 설정 (Default Sprite 설정)

Default에 원하는 Sprite를 넣어주세요!

Float의 설정 (Slider로 변경하고  Default, Min, Max 값을 설정)

Color의 설정 (Default color, Mode 설정)

여기서 좀 헤맸는데, Color의 Mode를 HDR로 설정해야 나중에 빛나는 효과를 줄 수 있다. HDR 옵션이 안 보여서 헤맸는데 알고보니 처음부터 Color 노드의 설정을 HDR로 해줬어야 했다...

 

Mode - HDR

 

Simple Texture 2D : X 방향으로 UV 옮기기

1. MainTex를 끌어다놓고 Simple Texture 2D에 연결한다.
2. MainTex를 끌어다놓고 또 다른 Simple Texture 2D와 연결해 Sample Texture를 추가로 만들어둔다.
3. Tiling And Offset을 만들고 둘 중 하나의 Sample Texture 2D-UV에 연결한다.
4. 위에서 만들었던 Thickness를 끌어다놓고 Vector2-X에 연결한다. Vector2의 Out을 Tiling And Offset - Offset에 연결한다.

Thickness (float) -> Vector2의 X에 연결 // Vector2의 Out을 Tiling & Offset의 Offset에 연결 // Out을 UV에 연결

 

Sample Texture Alpha 값끼리 뺄셈

1. Subtract 노드를 만든다.
   • 만들어진 2개의 Sample Texture 2D 중 Tiling & Offset이 들어간 노드의 A값에서 MainTex만 들어간 Sample Texture의 A값을 뺄 것이다.
2. UV 옮기는 작업을 한 Sample Texture 2D 노드의 Alpha값을 Subtract 노드의 A에 연결한다.
3. MainTex만 연결한 Sample Texture 2D 노드의 Alpha값을 Subtract노드의 B에 연결한다.

주의) 여기서 나는 실수로 Subtract 노드의 B에 RGBA를 연결하는 실수를 저질렀다.... 그렇게 되면 나중에 결과물 이미지가 꼭 피를 흘리는 것처럼 빨갛게 나온다. Alpha 값끼리 뺄셈해야 한다는 것을 꼭 기억하자.

x방향으로 UV를 옮긴 Texture의 Alpha - 원래 Texture의 Alpha => 왼쪽 테두리 alpha가 생긴다.

 

Multiply

만든 Alpha 값에 색을 곱해 테두리에 색을 넣는다.

Multiply 노드를 만들고 Subtract 노드의 결과물을 A에, Blackboard에서 끌어다놓은 Color를 B에 연결한다.

색 집어넣기

 

Add Colors

UV 옮기는 작업을 하지 않았던 Sample Texture 2D에서 색을 뽑아와서 테두리 색과 더한다.

1. Add 노드를 만든다.
2. Add 노드의 입력값으로 Sample Texture 2D의 RGBA값과 Multiply의 결과물을 각각 연결한다.

UV에 아무것도 연결 안 한 기본 Texture와 더하는 것!

 

Fragment의 Base color, Alpha에 연결

최종적으로 만들어진 RGBA를 RGB, A로 Split해 Fragment에 각각 넣어준다. 이전 Unity 버전에서는 Color와 Alpha 부분이 나뉘어있지 않았지만 최신 Unity에서는 나뉘어있기에 Split으로 RGB파트와 Alpha 파트를 나누어 넣어주었다.

1. Split 노드를 만들어 Add의 결과물을 입력으로 넣어준다.
2. Vector3를 만들어 RGB를 XYZ에 연결한 뒤 그 결과물을 Base Color에 연결한다.
3. Split 노드에서 나온 A값을 Alpha에 연결한다.

Split을 활용해 RGB, A 파트를 분리 후 Fragment에 각각 연결한다.

 

결과물 확인

Save Asset을 누른 뒤, 지금 만든 Shader Graph를 우클릭해 Create > Material을 선택한다. 그러면 내가 만든 Shader Graph에서 나온 Material이 생성된다.

Scene의 Hierarchy 창에서 2D > Sprites > Square로 Sprite Renderer를 가진 오브젝트를 생성한 뒤, Sprite Renderer의 Sprite 부분에 MainTex에 넣어주었던 것과 같은 Sprite를 넣어준다.

해당 오브젝트의 Material을 Shader Graph에서 나온 Material로 넣어주면 외곽선 효과를 가진 Sprite가 완성된다.

왼쪽만 UV를 옮겼기에 왼쪽 테두리만 나온다.

 

상하좌우 모두 윤곽선 만들기

1. UV 옮기는 작업을 4방향 모두 해주면 된다. X방향으로 -Thickness만큼, Y방향으로 +Thickness, -Thickness만큼 해주면 된다. Thickness 노드에 Negate를 연결하는 방법으로 같은 값을 음수로 만들 수 있다.
   • Simple Texture 2D : X 방향으로 UV 옮기기에서 했던 내용에서 노드 몇개만 다르게 연결하면 된다.
2. 이후 좌우 Sample Texture 2D끼리 Alpha 값을 더하고(1), 상하 Sample Texture 2D의 Alpha값끼리 더하고(2), (1)과 (2)를 더하면 상하좌우의 윤곽선 Alpha값을 얻을 수 있다.
3. 이때 이 결과값이 1을 넘길 수 있는데 Alpha는 무조건 0부터 1 사이여야 하므로 Clamp를 이용해 값을 0부터 1 사이로 맞춰준다. 상하좌우 덧셈의 결과물을 Clamp의 in에 넣고 Min 0, Max 1로 설정하면 된다.
4. Clamp의 결과물을 기존 Subtract 노드의 A 자리에 넣어주면 상하좌우 윤곽선을 만들 수 있다.

-Thickness를 X에 연결해 오른쪽 윤곽선 만들기

Thickness를 Y에 연결해 아래쪽 윤곽선 만들기

-Thickness를 Y에 연결해 위쪽 윤곽선 만들기

4개의 Sample Texture 2D에서 나온 Alpha값을 더하고 더한 뒤 Clamp의 In에 연결한 모습

Clamp한 값을 기존 Subtract 노드의 A 자리에 연결하면 상하좌우 윤곽선 만들기 성공

 

상하좌우 윤곽선! Thickness 0.001

 

Thickness 0.002 조금 더 두꺼워진다.

 

 

 

후기

Color Mode를 HDR로 설정하는 부분과 Subtract 노드에 Alpha값을 연결해야 한다는 것을 조금 더 빨리 알아차렸더라면 시간을 낭비하지 않을 수 있었을 텐데....