Shader graph (노드조작, 스위즐링, 출력실습)

전 포스팅에서 linear와 gamma에 대해 알아봤다. 여기에 이어

이번엔 유니티 셰이더 그래프에서 노드 조작을 통해 색을 출력해보자.

 

두 가지의 노드를 만들어서 회색을 표현해봤다. 하나는 color 노드, 하나는 vector3노드로.

 

이 회색 노드를 복사하고 더하여 흰 색을 만들어보자.

0.5값이 들어있는 vector3 노드를 두 번 더하면 흰색이 만들어진다. 하지만 회색 color노드를 더하면 흰색이 안나온다!!

왜지?? 

>> 데이터는 정확한 값 입력으로 우리 눈에 보이는 색과 상관없는 계산을 하지만,

데이터가 아닌 지금 우리가 만든 color노드는 우리 눈에 보이는 색을 기준으로 계산된다.

(여기서 칼라 노드는 linear가 아니라 sRGB상태이므로 엔진에 들어와 있는 상태는 우리 눈에 보이는 색보다 어두워지고, 애초에 URP는 기본이 linear임)

 

여기에서 전 포스팅에 다뤘던 gamma와 linear상태의 지식이 쓰인다.

 

지난 스터디에서 텍스쳐는 하드디스크에서 밝게 저장되고, 엔진으로 가져오면 linear 공간으로 가져오기 위해 어둡게 만든다고 했다.

그런데 우리가 만든 칼라 노드는 원본값이란 것이 없다. 즉, 처음부터 밝게 저장된 것이 없다.

게다가 이건 원래 상태가 linear인데 노드로 가져올 때 이 노드도 sRGB에서 보이는 상태를 linear로 맞추려고 어둡게 만드는 것이다. (계산하기 위해 linear로 영역을 내려야 함)

 

(linear에 오면 어두워짐 >> 그럼 여기서 어떻게 다시 밝게함?)

이 문제를 해결하기 위한 노드가 있다. 바로 color space conversion 노드를 사용한다. (linear에서 RGB로 바꿔줌)

 

그럼 비로소 데이터와 칼라 값 둘 다 흰색이 되는 것을 확인할 수 있다.

 

이 외에 몇 가지 노드를 조작하는 단축키를 알아보자.

 

그룹 만들기

그룹으로 뭉칠 노드들을 선택한 후 ctrl + G 로 그룹화할 수 있다.

이 네모난 그룹 공간에 새로운 노드들을 넣어 추가할 수도 있고 그룹화를 해제할 땐 마우스 우클릭으로 언그룹해준다.

 

 

스티키 노트

포스트잇 같은 기능으로 노드의 주석과 같은 기능으로 생각하면 된다.

 

 

 

---

 

 

 

스위즐링 swizzling

 

스위즐링은 float1 ~ float4로 되어 있는 요소들을 섞어서 새로 만드는 방법들을 말한다.

예시를 위해서 일단 임의의 색 하나를 만들어보자

이 값은 빨강이니까 float3(1,0,0)이다. 앞으로 이 float3 값으로 장난쳐보자.

 

1. Split 으로 이 float3의 각 요소들을 분리할 수 있다.

이러면 각각 한 자리로 분리된다.

RGB(1,0,0)중 1의 값을 가져와서 노드를 이었는데 흰색이 출력된다. 반대로 G나 B의 0값을 이으면 검은색이 된다.

 

 

2. Combine 으로 각 요소를 합쳐줄 수 있다.

R의 1 값을 R과 G로 옮겼다. 결국 (1,1,0)이 된 셈. 위에서 봤다시피 하나의 값을 여러 노드에 넣어줄 수 있다.

 

 

그럼 지금까지 배운 것을 바탕으로 출력을 실습해보자.

목표는 인터페이스를 만들고, 거기서 값을 조작하는 것으로 출력하기다.

 

 

1. 프로퍼티 연결

1 - 1. 노드를 프로퍼티로 변환하기

 

 

convert to property를 누르면 블랙보드 창에 Color가 추가된 것을 확인할 수 있다.

 

 

 

1 - 2. 블랙보드에서 프로퍼티를 만든 후, 드래그 앤 드롭으로 노드를 연결해주기

 

말 그대로 블랙보드 창에서 드래그로 그래프에 끌어오면 color 노드가 생성된다. 그걸 연결하는 것으로 끝

 

 

---

 

 

2. float 입력을 조합해서 색상 만들기

 

앞에서 배운 스위즐링을 이용하여 각 float를 조합할 것이다.

각각의 float 프로퍼티 3개를 만든 후 드래그로 꺼내와서 셰이더 그래프 안에 넣어주자. 그 노드들을 컴바인으로 연결 후 다시 fragment에 연결해주면 인터페이스에서 각각의 값을 확인할 수 있다. 필요하다면 그래프 인스펙터에서 추가로 만져주자.

 

 

---

 

 

3. 밝기 조절하기

 

위에서 만들었던 float 3개에 추가로 밝기조절 이라는 이름의 float를 하나 더 추가해주자.

이번엔 combine이 아니라 add로 아까의 값과 밝기조절 값을 add 연결하면

인스펙터 창에 우리가 원하는 인터페이스가 추가된 것을 확인할 수 있다.

 

일단 인터페이스로 확인할 순 있는데.. 우리는 얼마나 더하고 뺄지 범위를 정해주어야 한다.

최대 값인 float3(1,1,1)은 흰색이고, 최소 값인 float3(0,0,0)은 검은색이다.

여기서 색을 더해줄수록 밝아진다는 사실을 알 수 있는데, 흰색  float3(1,1,1)에서 검은색 float3(0,0,0)을 만들기 위해선 최대 1 값을 빼야한다. 반대로 검은색에서 흰색을 만드려면 최대 1 값을 더해야 한다. 즉, 범위는 -1 ~ 1이 된다.

 

만약 이 범위를 넘어간다 하더라도 그래픽은 -1 ~ 1 값만 출력하기 때문에 크게 문제는 없어보이지만, 나중에 무조건 문제를 일으킨다.

그래서 이럴때를 대비하여 범위를 초과하는 값들을 잘라주는 노드가 있다.

 

saturate

이 노드는 숫자를 0 ~ 1 사이에서 잘라준다. 1 보다 큰건 1로 고정, 0 보다 작은건 0으로 고정시킨다.

 

clamp

이 노드는 saturate와 똑같이 숫자를 잘라주는 기능을 하지만 이것은 숫자를 지정하여 잘라줄 수 있다.

 

와 이번주 스터디 끝~ 유튜브 영상 이해하느라 너무 머리아팠다. HLSL은 나중에할래..