셰이더 그래프 기초 Part 08 UV를 다루는 방법

1. UV의 기본 개념
2. UV를 시작적으로 해석
3. UV에 합연산
4. 곱연산
5. TIME로 UV가 흘러가게 하기
6. UV를 통한 불꽃 effect
7. 좀 더 멋진 불꽃

01 UV란 무엇인가?

3D오브젝트의 겉면을 2차원으로 표시한것

 

UV는 Vector2값 = float 2개로 이루어진 숫자임(0~1까지)

 

다만, 좌표계가 각 엔진마다 다르니 주의가 필요함

 

 

02 UV를 시각적으로 해석

우선 텍스쳐 1장으로 이루어진 셰이더를 만들어 줌

우선 U값을 출력해보기 위해서 UV Node를 Split한 뒤, R값 = U값을 출력해줌

(RGB = XYZ = UVW)

동일 방법으로 W값을 출력해볼시 나오는 shader임

 

이렇게 얻은 2개의 UV를 하나로 합치게 되면?

본래의 UV Node와 같은색이 나오는 것을 확인할 수 있음

 

03 UV의 합연산

우선 텍스쳐와 UV를 연결해줌

이제 여기에서 UV를 분리하여 연산할 수있게 준비함

 

아까전과 같이 split를 이용하여 값을 분리한 뒤, 이를 add연산을 이용하여 합연산을 진행한 뒤, 이를 다시 combine으로 엮어서 이를 UV에 넣어주는 것으로 UV에 +0.5 합연산을 진행함

좌 = original 우 = +0.5연산 후

보는 것 처럼 이미지가 0.5만큼 이동해서 보이는 것을 확인할 수 있다

 

이는 이미지의 UV값이 늘어나면서 tiling되어 있는 이미지를 보여주기 때문이다

 

04 UV의 곱연산

위와 같이 add Node대신 Multiply Node를 사용한다

X2를 한 연산

보이는 것 처럼 Tiling이 되고 있는 것을 확인할 수 있다

 

즉, 03과 04에서 알 수 있는 것은

UV의 +연산은 텍스쳐의 위치를 변경하는 것이고, *연산은 UV를 Tiling하는 것이다

 

실습과제

Q. UV에서 보이는 컬러는 무엇을 나타내는 것인가

A. UV값을 R, G로 나타낸 컬러임 이때 뭔가 이상하게 보인다고 느껴지는 것은 U가 위로 올라가는 느낌이고 V가 오른쪽으로 페이딩되는 느낌이 있기 때문, 이 과정에서 색이 섞이는걸 눈으로 확인하며 UV 밸런스를 확인 가능함

v가 u를 압도하게 할시 생기는 이미지

보는것과 같이 V에 압도적인 가중치를 줄시 G값이 강하게 보이는 것을 확인할 수 있다

 

실습과제2

UV의 합연산, 곱연산을 Property로 조절할 수있는 shader graph 만들기

간단하게 Node들을 float Property로 연결해 주었다

 

05 Time으로 UV를 흘러가게 하기

Time Node에 대해서 사용한다

• Time : 시간 값을 출력
• Sine Time : 사인 타임 값을 출력
• Cosine Time : 코사인 타임 값을 출력
• Delta Time : 현재 프레임의 타임 값인 델타 타임을 출력함
• Smooth Delta : 스무스 델타 타임 값 출력

연결점에 중복 연결로 사용함

현재 UV값에 Time값을 더하여 실시간으로 더하고 있다

위와 같이 UV값이 실시간으로 변함에 따라 이미지가 계속해서 움직인다

(Play scence가 아니라도 움직인다)

 

이때 실시간으로 움직이게 하고 싶지 않다면 Always Refresh 옵션을 On/Off 설정해주면 된다

 

이때 UV값중 한쪽만 +해주게 된다면 그 방향 한쪽으로만 움직이게 되기에, 이를 활용하여 물의 흐름 등을 만들 수 있다

 

만약 속도를 조절하고 싶다면

divide연산을 통해서 Time의 속도를 조절하여 UV가 +되는 속도를 조절해줄 수 있다

 

06 UV를 이용해서 불 이펙트를 만들기

 

1. 파티클 사용법

 파티클 = 작은 조작을 많이 사용한다면 간단히 구현이 되지만, 심각한 부하를 가져올 수 있음

 

2. 시퀸스 이미지 사용

 여러장의 이미지를 반복해서 보여줌으로 불을 시각화 하는 방법, 다만 이미지 숫자가 늘어나면 위와 같이 최적화 문제가 발생할 수 있음

 

 

1. Graph Setting을 바꾸고 Alpha 활성화

우선 불을 표현할 Quad를 만들어서 텍스쳐를 입힌다

추가적으로, 반투명을 표시하기 위해서 Shader Setting에서 Surface Type를 transparent로 변경합니다

 

그후 texture의 a값을 결과의 a값에 연결하면 불 부분만 남은것을 확인할 수 있습니다

 

2. 이미지를 위로 흘러가게 하기

추가적으로 흘러갈 텍스쳐를 셰이더 그래프에 추가함

 

이를 흘러가게 할려면 Time Node를 활용하면 됨

UV를 분해후 Time을 Add해서 위로 흐르게함, 이때 Multiply에서 음수를 곱하는 것으로 방향을 반전시킴

 

3. 두 이미지를 합쳐 불을 완성하기

이제 이렇게 완성된 2개의 이미지를 곱연산으로 움직이는 불을 만듬

각 RGB, A값을 각각 곱연산 후 결과값으로 연결해줌

 

이때 투명도에서 왜 필요한 부분이 남았는지 궁금할 수 있는데

이미지가 없는 = 투명한 부분의 경우 곱연산을 거치면 한쪽이라도 A가 0인 부분이 있다면 0 * a가 되어서 결국 0이 되고 투명해지게 된다

 

4. HDR Bloom을 활성화하기

Hierarchy - Global volume에서 Bloom을 확인해서 활성화 여부를 알 수 있다

활성화 되어 있다면 불에 곱연산이나 합연한으로 더욱 밝게할 시 Post Processing이 들어가게 된다

좀더 불같은 느낌이 나는걸 확인할 수 있다

 

07 좀 더 멋진 방법으로 불을 만들기

06의 경우 두장의 텍스쳐를 곱연산을 통해서 불을 만들었음

 

여기에서 좀 더 퀄리티를 높이는 과정

 

1. 준비하기

원점회귀한다

여기에 텍스쳐를 1개 추가한 뒤 검은색을 넣어준다

 

2. 이미지를 이용해 UV를 움직여 보기

책에서는 체크무늬를 넣는데 대충 무시하고 진행

UV에 검은색에 해당하는 Texture에 RGB를 받아서 더하고 있음, 하지만, 검은색은 000이기에 아무런 차이가 없음

하지만 회색이 되는 순간 0.5에 해당하는 UV가 움직이게 될것임

 

이때 검은색 ~ 흰색을 나타내는 texture는 SRGB가 아니라 Linear texture여야 함

 

이제 다른 이미지로 확인할 시, 이미지에 외곡이 들어가는 것을 확인할 수 있음

왜냐하면 중간 부분만 이미지가 이동하고, 겉부분은 가만히 있으려 하기 때문

여기에 패턴성 텍스쳐를 넣으면 이런 효과가 생기게 됨

 

3. 이미지를 흐르면서 구겨지게 만들어 봅시다

이전에 한것과 같이 Time와 Add Node를 활용하여 UV를 흐르게 해줌

흐르는 UV와 이를 불의 UV에 합연산을 하여 원래 texture의 UV에 넣어서 출력함

좀 더 사실적으로 묘사된 불을 확인할 수 있음