셰이더 그래프 기초 Part 07 색상과 텍스쳐의 연산, Lerp

본 글을 대마왕의 셰이더 그래프 책을 기초로 하고 있습니다

 

01 색상을 입력받고, 밝기를 조절하는 기능 제작

1. Float을 입력 받아 색상을 출력

RGB값에 해당하는 Property를 생성

이를 Slider로 설정한다

이를 다시 Combine Node로 엮어서 이를 결과값과 연동해준다

이렇게 하면 이제 오브젝트의 색깔을 셰이더의 Property 값으로 조절할 수 있게 된다

 

2. 밝기를 조절할 수 있는 기능을 만들기

Float를 하나 더 추가하여 밝기를 조절 할 수 있게 만든다

이렇게 Add Node를 사용하여 원래의 값에 +를 해주어 밝기를 표현한다

 

좌 = 일반 1, 0, 0 우 = +1 밝기

이때 우측이 흰색에 가깝게 변경되는 것을 볼 수 있는데

이는 Add연산을 통해서 (2, 0, 0)이 되었기 때문에 나머지 1에 해당하는 값이 Bloom으로 바뀌었기 때문이다

 

3. 수치의 제한

만약 값이 1이 넘지 않게 제한하고 싶다면?

Saturate Node를 사용하면 된다

제한을 1로 걸어주자 모든 값이 1이 됨으로 흰색이 출력되고 끝날 뿐, bloom이 추가되거나 하지는 않는다

 

이와 비슷한 Node로는 Clamp가 있다. 차이점은 사용자가 직접 min, max를 설정해줄 수 있다

 

 

책의 과제

곱셉, 나숫셈으로 밝게 만들 수 있는가?

좌 = 곱 우 = 나누기

(1, 0, 0)일시

*2 or % 0.5

를 하면 (2, 0, 0)를 얻을 수 있다

 

4. 어둡게 만들기

밝게 하는 기능을 반대 기능인 어두운 셰이더는 어떻게 만들어질까?

간단히 생각하면 *0.a를 통해서 값을 조절하는 방법을 생각할 수 있다 = a가 낮을수록 어두워짐

어두운 붉은색을 확인할 수 있다

 

다만, 책에서 언급하는 방법은 밝기 조절 범위를 0~1에서 -1에서 1까지 늘리라고 한다

밝기 값을 -1 ~ 1로 조절할시 색을 변화이다

 

즉, -1 = 빛이 없음 0 = 본래색 1 = 빛이 강하게 있음

 

02 텍스쳐를 출력

 

1. 텍스쳐 강제 출력

텍스쳐를 가져올 수 있는 노드 Sample Texture2D를 사용

현재처럼 아무것도 없는 상태일시 흰색 텍스쳐가 입혀짐

대충 URP에서 defult로 제공하는 texture를 사용해서 진행함

 

다만 이 SampleTexture2D Node는 강제로 texture를 입히는 방식이며, property로 승격도 불가능하다

 

2. 샘플과 UV를 이용한 텍스쳐 출력

제대로된 texture를 넣기 위해서는 이하 3가지 요소를 필요로 한다

• 어떤 텍스쳐가 나오는가
• 어느 위치에 나오는가
• 어떻게 픽셀을 출력하게 할것인가

좌 = Texture2DAsset 추가 우 = UV 추가

이때 1번 조건을 이하 Texture2DAsset + UV Node로 해결해줄 수 있다

그리고 Texture2DAsset을 Property로 승격시키면 일반적인 형태로 사용할 수 있게 된다

이때 Tiling, offset은 따로 켜주면 사용할 수 있다

 

03 이미지를 흑백으로 만들기

생각해보기 - 어떻게 할 수 있을까?

흑백이라는 것은 RGB가 동일값이라는 의미

 

대충 생각해보면 (R + G + B)/3 값을 Color에 넣으면 될 것 같다

((R + B) + B) / 3

이렇게 하면 흑백으로 변환된 결과를 얻을 수 있다

 

 

(개인적 해답 영역)

---

흑백의 정의란?

색이 없는것

=> RGB가 같은 값을 가지고 있다는것

 

기본적인 방법은 개인적으로 한 방법과 같음 = Add Add divide 처리법

 

이때 눈에서는 RGB색깔이 느끼기에는 조금씩 다르게 느껴지는데 이를 보정하는 값이 있음

그 비율값은 0.2126729, 0.7151522, 0.0721750임

이를 값에 곱연산 하는것으로 보정함

이렇게 각 RGB값에 보정 값을 곱연산 후 똑같이 합연산 후 나누어 주는것으로 보정된 흑백 텍스쳐를 얻을 수 있음

이때 saturation이라는 Node를 확인할 수 있는데 이는 앞에서 사용한 보정없는 회색을 얻을 수 있음

이때 밑의 float 값은 채도를 의미함 이를 slider로 사용하면 편하게 채도를 조절할 수 있음

(색이 보다 선명할수록 채도가 높다고 말하며 회색이나 흰색 또는 검정과 같은 무채색에 가까울수록 채도가 낮다고 말한다 https://ko.wikipedia.org/wiki/%EC%B1%84%EB%8F%84)

채도 - 위키백과, 우리 모두의 백과사전

 

 

실습 과제

컬러 연산을 이용한 밝기 조절, 색 변경, 이미지 색 반전 기능 추가

1. 컬러의 강도 조절

2. 흑백의 경우 보정을 통과, 일반값의 경우 강도를 그대로 Combine

3. boolean을 통한 색반전 결정

4. add를 통한 마지막 밝기값 보정

 

UnityShaderGraph/ShaderTest.shadergraph at main · NoNamed02/UnityShaderGraph

 

 

04 Lerp 노드 사용

텍스쳐 2장을 섞는 방법

이 texture 2장을 섞어보려 한다

이때 Lerp노드가 사용된다

섞이는 정도는 T값에 비례하게 된다

Lerp가 0.5인 경우

2개의 texture가 겹쳐 보이는 것을 확인할 수 있다

 

05 Lerp Node 응용

텍스쳐 이미지에는 A 채널 = 투명도가 포함되어 있음

이는 Node에서 A값이 있는것으로 확인할 수 있음

이때 PNG의 A값을 Lerp에 넣어보면 색이 있던 부분에 2번 텍스쳐가 들어가는 것을 확인할 수 있음

(검은 부분 = 0, 흰색 부분 = 1)

이를 반대로 바꿀려면 텍스쳐 순서를 바꾸거나

위와 같이 -1을 해주어 A값에 넣어주면 된다

 

이때 1-A를 T에 넣게 되는데

이렇게 될 시 흰색이 투명하게 변하게 되며, 두번째 텍스쳐가 나오게 된다

 

실습과제

텍스쳐 1장을 Lerp할때에 흑백으로 변하는 기능을 넣을려면? saturation은 금지됨

어캐 되는건지 잘 모르겠음....

 

 

+ RGB값이라는 것은 단순한 float값 1개를 말하는것이 아니라 1픽셀마다 하나씩 담겨있는 것인다

즉, 4*5짜리 이미지에서 R값을 뽑아보면 float가 1개가 아니라 20개가 뽑혀야 하는것이다

 

즉, 위의 흑백 텍스쳐 원리는 흑백의 밸랜스를 1픽셀당 그림의 밝기값 = RGB/3값을 보간값으로 정하여 그렇게 보여지는 것이다