[ Unity Shader ] Sprite Shader - 테두리 강조

결과물

---

 

셰이더 그래프 생성 방법.

---

 

이미지 회전 구현

 

• 변수 선언
  • Node에 적용할 변수 같은 경우 좌측에서 + 버튼을 눌러서 생성할 수 있다.

 

 

 

 

 

 

 

• 회전속도 제어.
  
  • Time Node 와 직접 선언한 Float 형 변수를 곱하여 ( Multiply ) 사용한다. 
  • 직접 코드나 Material의 Speed 변수를 조절할 경우 회전속도가 변경됨

• Square Wave를 회전시키기 위한 노드.
  • 회전시킬 거기 때문에 Rotate UV Node 를 가져온다. ( UV는 이미지를 그릴 설계도면 같은 역할. 좌측 하단은 (0,0) 우측상단은 (1,1) 의 좌표를 가지고 있음. )
  • UV의 Center 값은 회전시킬 기준 좌표를 말함. 
    • 1 번 경우. Subtract를 사용해서 UV의 X는 -0.25 만큼 Y는 0 만큼 이동시키고.
      • Split을 이용해서 r g b a 4개의 채널을 모두 사용하지 않고 r 채널만 가져와서 사용함.
      • Square Wave에 넣어서 적용하면 양쪽 부분은 검은색 ( 0 ) 중앙 부분은 흰색 ( 1 ) 임.
      • 해당 Square을 중앙을 가리고 회전 시킨다면 맨 위 GIF 처럼 만들 수 있음.
    • 2번의 경우. Subtract를 사용하지 않음.
      • 위 과정과 동일하게 진행할 경우 양옆이 검은색이 아닌 횐색 반 검은색 반으로. 중심을 기준으로 회전시킬 때 맨위 GIF처럼 만들 수가 없음.
      • 이렇기 떄문에 Subtract를 사용해서 UV위치를 조절함.

 

사각형 모서리 구현.

• Rectangle 노드를 사용해서 안쪽이 흰색 ( 1 ) 외각이 검은색 ( 0 ) 인 사각형을 그린다.
• One Minus를 사용해서 해당 사각형을 반전시키면. 안쪽 부분이 검은색 ( 0 ) 외각 부분이 흰색으로 ( 1 ) 변함.

 

테두리 일부분만 강조.

• 아까 만든 Square Wave 노드와 One Minus 노드의 결과값을 Multiply 곱해주게 되면.
• One Minus 의 외각 부분이 흰색 ( 1 ) 이고. 내부는 검은색 ( 0 ) 이기떄문에. 사각형의 내부는 무조건 검은색 ( 0 ) 이되며 Square Wave가 회전하며 One Minus의 외각 부분과 겹치는 경우에만 흰색 ( 1 ) 로  결과값이 나오게 되서 모서리 일부분만 회전하는 결과를 만들어낼 수 있다.

 

---

색상변경.

• 두 가지의 색상의 사이를 왔다 갔다 하기 위해서 위에서 했던 것처럼. Time 과 Float 노드를 사용해서 색상 변경의 시간을 설정할 수 있게 해줌.

• Sine 노드를 사용하기 쉽게 0 ~ 1 사이의 값을 반환 하도록 만들기 위한 과정.
• Sine 노드의 기존 반환 값은 -1 ~ 1로 0 ~ 1 사이의 값으로 반환하게 만들기 위한 과정은 결과값에 +1 을 한다음 0.5를 곱하는 과정이 필요함.
• Add 노드를 사용해서 Sine 노드의 반환 값에 +1 을 하고
• Multiply 노드를 사용해서 Add 노드의 반환 값에 x 0.5 를 하게 되면
• Multiply 노드의 반환 값은 0 ~ 1 사이의 값을 가지게 됨.
• 해당 값들을 시각적으로 각각의 노드 밑에서 검은색과 흰색 화면이 보이고 각각의 노드마다 같은값을 가지는데도 다르게 보이는 걸 확인할 수 있음.

Sine / Sine +1 / (Sine +1) * 0.5 각각의 결과값 그래프.

• 색상은 두 가지의 색을 왔다 갔다 하게 만들기 위해서 Color 노드를 두 개 지정하고 Lerp 를 사용해서 위에서 만든 값을 받아와서 두 가지의 색들을 왔다 갔다 하게 만들어줌.

 

 

위에서 만든 테두리 부분과 색상 부분을 Multiply 로 곱해준 결과.

 

 

 

---

 

 

위 과정을 모두 만들고 나서 Material을 적용하면 이렇게 검은 배경에 테두리만 빙글빙글 돌고 있는 걸 확인할수 있다.

여기서 검은색 부분을 투명하게 만드는 방법은.

Fragment 부분의 Alpha 값을 넣어주고 Graph Settings 에 Alpha Clipping을 켜줘야 한다.

 

간단하게 여기서 적용할 Alpha 값을 만드는 방법은

 

아까 만들었던 테두리 Multiply 노드를 하나 더 가져와서 Color Mask 노드로 잡다한 색을 지우고 Alpha 값에 넣어주면 된다.

 

Step 노드 과 Branch 노드 같은 경우 꼭 만들어줄 필요는 없음.

해당 노드를 사용한 이유는 회전속도가 0.1 이하일떄는 그냥 테두리가 표시가 안 되게 하려고 해당 노드를 만들었다.

Step 노드를 사용해서 Speed 값에 따라 0 또는 1을 반환하게 만들고 Branch 노드를 사용해서 1이면 만들었던 테두리를 0이면 아무것도 없는 검은색 화면 ( 0 ) 을 반환하게끔 만들었다.

 

---

전체 노드 

---

속도 1 기준 최종 결과물은 이런 느낌이다.