TA 코스 2주차 과제 - 프로시저 셰이더 응용하기

프로시저 셰이더란?

텍스처가 아닌 수학적 계산을 통해 무늬를 실시간으로 생성하는 셰이더.

 

예를 들어 머티리얼에 수학적으로 원을 그린다고 치자. 원이라는 것은 중심점에서 같은 거리에 있는 점들의 집합이다.

 

맨 처음 할 일은 TextCoord 노드를 사용하여 기본 UV (1, 1) 에서 (0.5, 0.5)를 빼서 중심을 (0.5, 0.5)로 옮겨주는 일이다.

그 다음 Vector Length로 거리를 계산하고, if를 사용하여 원의 반지름을 정한 뒤 원의 안과 밖을 구분해준다. 원의 안은 1, 밖은 0으로 구분이 되고, Lerp로 1일때와 0일 때의 값을 지정해줄 수 있다.

 

 

직접 구현해보기

내가 원하는 모양은 구체의 빛나는 원들이 생기다가, 마지막에는 전체가 빛나게 되는 텍스처다.

여러 개의 원 그리기

원이 구체에 나타나려면, 일단 UV를 수많은 칸(Cell)으로 나누고 각 칸에게 "너는 몇 번째 칸이야"라는 고유 번호를 주는 작업이 선행되어야 한다.

UV에 원하는 가로세로만큼의 Cell 개수를 곱해준다. 

우리가 UV에 10을 곱하면 값의 범위는 0.0~1.0에서 0.0 ~ 10.0으로 확장된다. 이때 각 숫자를 정수와 소수로 강제 분리하는 것입니다.

• Floor (버림. 정수부): 0.1, 0.5, 0.9는 모두 0이 된다. 1.2, 1.8은 모두 1이 된다.
  • 즉, 일정 영역을 하나의 값으로 묶어버리므로 이 값은 해당 칸의 '고유 이름(ID)' 역할을 하게 된다.
• Frac (소수부): 1.2는 0.2가 되고, 5.2도 0.2$가 됩니다.
  • 어떤 칸에 있든 상관없이 각 칸 내부에서 다시 반복되는 개별 좌표계를 만들어준다.

 

Sphere Mask는 주어진 위치를 중심으로 반지름을 기준으로 원을 그린다.

 

이상태에서 Sphere Mask를 사용하여 A에는 개별 UV값, B에는 (0.5, 0.5)로 각 칸의 중심을 잡아주면 된다.

 

Sphere Mask

• A와 B의 차이를 계산하여 두 점 간의 거리를 구한다.
• 그 거리 값이 Radius 이하이면 1로 반환되고, 그 이상이면 0으로 반환되어 해당 영역이 마스크로 적용된다.

 

구체에 적용하기

상자 모양으로 볼 때는 이상하지 않지만, 같은 텍스처를 원에 적용했을 때는 북극점과 남극점 기준으로 확대되어 이상하게 보인다.

이를 정리해주기 위하여 World Position, VertexNomalWs, Local Position 등을 사용한다.

 

이번에는 Local Position을 사용해 보았다.

Local Position

오브젝트 자체의 중심점을 0, 0, 0으로 하는 좌표계이다. 오브젝트 자체의 고정된 좌표값을 가져온다.

구체에 무늬를 매핑하게 되면 북극점과 남극점에 빨려들어가는 현상이 생겨 모양이 찌그러진다. Local Position을 사용하면 이러한 현상이 줄어든다.

 

 

값이 크기 때문에 0.08배로 줄여주었다. 값이 클수록 원이 많아지고, 작을 수록 원이 적어진다. 이 다음에는 똑같이 Floor와 Frac으로 나눠준다.

그리고 Time과 Lerp를 사용하여 Sphere Mask의 Radius값으로 넣어줘서 원이 시간에 따라 커지도록 하였다.

 

 

또다른 Time 노드를 사용하여, 구체에서 점점 빛이 나고 마지막에 사라지는 연출을 만들어 주었다. 

 

• Time에 Multiply(0.25)로 시간 조정
• OneMinus로 Time이 1이 되면 0이 곱해지도록 변경
  • OneMinus는 1->0로 줄어들지만, power가 훨씬 빨리 증가하기 때문에 0이 되기 전까지는 큰 의미가 없는 값이 된다.
• Power로 뒤로 갈수록 증가량이 많아지도록 조정
• 밝기 강도를 위하여 Multiply로 10000를 곱함
• Shpere Mask와 Multiply하여 원 부분만 유효한 값으로 만들어 Emissive Color에 연결해준다.

 

 

 

 

여러가지 패턴

구현 도중에 노드를 연결하다보니 다양한 패턴을 확인할 수 있었다.

의도한 바는 아닌데 괜찮은 것 같다.