Shader graph 스터디 (LERP함수, UV제어)

저번시간까지 텍스쳐를 만졌으니... 우리는 이제 이걸 이용해서 프로퍼티 만들고~ 노드 만들고~ 뭔가 그럴듯하게 시각적인 결과는 낼 수 있는것 같다.

이미지 만지작은 끝났으니, 이제 두 이미지(텍스쳐)를 전환시키는 전용 함수 lerp를 이용해보자.

 

 

Linear Interpolation

선형보간? 이거 그래픽스 과목에서 들었던.. 분명 이미지나 누락된 데이터들을 부드럽게 이어주는 기술이었던것 같다..?

아무튼 이론만 알던 것을 실제로 사용해보게 되다니 감회가 새롭다.

 

우선 프로퍼티에서 텍스쳐를 두 개 만들고, 각각에 이미지를 따로 적용시켜주자.

 

준비는 끝났다. 이제 lerp노드를 꺼내서 연결해주자

 

 

여기서 A, B 각각에 텍스쳐를 연결해주고, T에는 float 노드 하나 만들어서 연결해주자

그럼 이제.. float의 x값을 0~1 사이에서 마음대로 움직여주면

 

0일땐 파란하늘이었다가

 

1로 다가갈수록 점점 새로운 텍스쳐인 부직포같은 느낌이 된다.

 

이제 lerp가 뭐하는 함수인지 감이 좀 잡힌다. 0에 가까우면 첫 번째 텍스쳐가 나오고 1로 갈수록 서로 섞이다가 1이되면 완전히 두 번째 텍스쳐가 되는 함수인것 같다.

 

 

UV가 뭐지

처음엔 몰라서 gpt한테 물어보니 울트라 바이올렛 자외선이란다. 아~ 그래픽 다루는거니까 자외선 어쩌구 빛반사에 쓰이는 (뇌피셜 마구마구) ...~거겠구나 했는데

RGB랑 XYZ가 그래픽스에서 사실 같은 취급하듯이, 거기에 더해 UVW 도 추가한 느낌이라고 한다. 아니 그냥 UV만 아니었어? ㅋㅋ.. 그랬구나.. 그냥 좌표계였구나..

 

https://walll4542.wixsite.com/watchthis/post/unityshader-04-urp-shader-graph

유니티에서 사용하는 좌표는 왼쪽 아래가 0,0 이고 오른쪽 위가 1,1이다.

이걸로 vertex들의 좌표를 표시한다.

 

 

이제 전에 사용했던 Tiling and offset 노드를 직접 구현해보는걸로 텍스쳐 타일링과 오프셋에 대해 알아보자.

 

타일링은 곱셈연산이다. Vector2를 UV에 곱한 것을 타일링이라 한다.
저번 스터디에서도 말했지만 기본값은 항상 1. 곱셈이니까 0을 곱하면 안되겠지?

 

여기서 x는 2 y는 3으로 바꿔줘봤다.

 

아 이래서 타일링이구나 싶었다. 딱 타일모양만큼 2 X 3으로 나뉜다.

 

타일링이 곱셈이라면 오프셋은 덧셈이다. 그대로 ADD만 연결해주면 된다. 기본값은 0.

텍스쳐의 위치가 변했다. 오프셋은 텍스쳐를 이동시켜주는 것이구나.

 

불 텍스쳐를 다운받아서 책 예제 실습도 했다. 결국 오프셋 만지작 연장선이라 같은내용 반복해서 올리진 않을래