[ 대마왕의 유니티 URP 셰이더 그래프 스타트업 1 ] Part07

 

Part7. 색상과 텍스쳐의 연산, Lerp 

 

1. 색상을 입력 받고, 밝기를 조절하는 기능을 만들어 봅시다

Float 변수 세 개를 입력 받아 Combine RGB 값을 만들어 BaseColor에 연결해보기

 

색상을 입력 받고, 밝기를 조절하는 기능을 만들어 볼거다.

밝기를 나타낼 float 형의 변수를 만들어줬다.

 

이렇게 한글 이름을 지으면 왼쪽처럼 레퍼런스 이름이 없다.. _Brightness라고 지어줌

코드에서 머티리얼을 제어해야 할 때 저 레퍼런스로 접근하기 때문에 이름을 잘 지어줘야 한다. 

 

 

이렇게 세팅을 끝내 놓고 씬을 보며 밝기를 조절해보자!

 

색상을 회색으로 맞춰놓고,

이건 밝기 0일 때

 

이건 밝기 1일 때이다.

 

여기서 질문. Vector3에 float 값 1을 어떻게 더하는거지?

= > Vector3 각 요소에 1을 하나씩 더해줌. 즉,  (0.5, 0.5, 0.5) + 1 = (1.5,1.5,1.5) 가 되는 격이다.

저번주에 공부했던 내용이지만, 제한값 1을 넘어가면 Bloom  효과가 일어나고 이 효과는 Post Processing을 켜야 나온다.

 

이런 Bloom을 원치 않는다면 Saturate을 쓰면 된다!

- saturate [0,1]

 

또 clamp를 쓸 수도 있다.

- clamp [Min, Max]

 

어둡게 만들어보자!!!

더해서 밝아졌따면 빼야 어두워지겠죠?!

 

-1를 더해준 모습...

 

ㅋㅋㅋㅋ책 하단에 언급된 음수가 뿌리고 다니는 불길한 기운의 색이 너무 궁금한데 누구 보여줄사람..? 담에 회사컴으로 혼자 해보고 리버트 해야겠다..

 

2. 텍스쳐를 출력해 봅시다

 

텍스쳐 강제 출력

Sample Texture 2D 노드 사용

- 이 방법은 텍스쳐를 제어하지 못해서 잘 쓰이지는 않음

 

텍스쳐 기본 데이터 3대장

1. 텍스쳐 오브젝트: 어떤 텍스쳐가 나올 것인가? SampleTexture2D노드

2. UV: 어느 위치에 나올 것인가? UV노드
3. 샘플: 어떻게 픽셀을 출력하게 할 것인가?

 

 

- SampleTexture2D에 Texture2D 파라미터의 Default 텍스쳐를 입력해서 기본 텍스쳐를 지정할 수 있음. 이 텍스쳐는 나중에 이 셰이더를 적용하는 머티리얼에 텍스쳐가 없을 떄 기본으로 지정되는 텍스쳐이다.

- 텍스쳐 파라미터를 클릭해서 Use Tiling and Offset 토글을 활성화하면 손쉽게 Tiling, Offset 좌표를 입력할 수 있음

 

 

내가 좋아하는 짤로 만들어 봤다 헷

 

3. 이미지를 흑백으로 만들어 봅시다

자, 흑백을 만들어 보자.

흑백이란? 컬러가 없는 상태이다. 그리고 이런 상태는 R,G,B의 수치가 동일할 때 발생한다.

BaseColor의 수치값을 (R+G+B)/3로 만들어주면 되는거다.

 

짜잔~

 

코드로 연산할 땐 자료형이 안 맞으면 바로 에러가 나니까 벡터는 벡터끼리, 정수는 정수끼리 생각하는게 익숙한데 셰이더 그래프에선 정수 1 을 Vector3인 BaseColor에 연결해도 자동 형변환이 이뤄져서 바로 작동하는게 너무 어색한 것 같다. 처음 흑백 만드는 그래프를 봤을 때 뇌정지가 와서 3번 읽고 이해했음.. 아무튼 성공~

 

정확한 흑백을 계산해보려면,

 

휘도가 뭔지 알아야 할 것 같았다. 대충 사진 보정할 때 흔하게 본 단어인데 밝기, 명도, 휘도 뭐가 뭔지 정확히 모른다.

 

여기 삼성반도체에서 설명하는 휘도란? ( 구글링하면 첫번째 게시물로 뜸. 삼성 뭐지,,, )

광원으로부터 복사되는 빛의 밝기의 척도로 구체적으로 관측자가 광원을 특정 방향에서 볼 때, 얼마나 밝아 보이는가를 나타내는 값이다.

광도를 광원 면적으로 나눈 것, 쉽게 말해 빛의 밝기를 나타내는 단위이다. 이걸 디지털 세계로 가져와서 디지털 이미지/ 픽셀에서의 밝기를 휘도라 한다고 함

https://semiconductor.samsung.com/kr/support/tools-resources/dictionary/semiconductor-glossary-leds-luminance/

휘도 | Samsung Semiconductor KR

 

이 밝음은 색마다 다르다고 한다.

RGB (1, 1, 1)이 있다면 각 색들이 밝기에 기여하는 정도가

0.2126729 : 0.7151522 : 0.0721750 이라고 한다. (이거 외우는 사람 없겠지?) 

 

외워야 하나봄

 

암튼 이 수치를 각 RGB에 각 가중치를 곱해서 더해주면 더 정확한 흑백을 뽑을 수 있다.!!!!

 

어떄보이나요? 좀 괜찮나요?

암튼암튼 이 복잡한 계산은 Color 값을 Dot(내적) 해주어도 동일한 결과가 나온다. 계산 방법은 같으니까!

 

그리고 또~~~~ 이걸 편하게 만들어주는 Saturation이라는 노드가 있다. (saturate 노드와 혼동하지 말라.)

몰.랐.어

 

이렇게 0~1 사이의 수치로 채도를 조절할 수 있다.

이게 뭐냐면 우리가 힘들게 구한 흑백, 휘도가 기준점이 되고

현재 색에서 휘도로 입력한 수치만큼 보간해주는 것이다. 그래서 0이면 흑백, 1이면 본래의 색이되는 것.

 

4. Lerp 노드를 사용해 봅시다

이미지 두 장을 준비한다.

기분 좋아지는 명수짤과 내 친구 닮은 스폰지밥짤

 

텍스쳐 노드에 두 이미지를 각각 적용하고, Lerp 노드와 연결한다.

 

누끼를 땄는데 배경이 왜 초록색인지 모르겠어..... 왜그런가여,,,,

 

Lerp 수치를 알맞게 조정한다. 

 

5. Lerp 노드를 응용해 봅시다

이미지의 알파 채널을 이용해서 마스킹 효과를 만들 수 있다.

Lerp 값을 텍스쳐의 알파값으로 넣으면 된다.

 

이렇게 되는 건데, 이해를 돕기 위해 그림을 그려보았다.

저의 그림입니다

 

물 이미지, 별 이미지가 있고 Lerp로 별 이미지의 알파값을 주었을 때를 생각해보자

 

별 이미지의 별 부분은 알파값이 1이고 배경은 알파값이 0이다.

이 알파값이 Lerp의 비율로 들어가게 되면

0에 가까워질수록 물 이미지, 1에 가까울수록 별 이미지가 되니까

가운데 이미지에서 0인 부분은 물 이미지가 들어서게 되고, 1인 부분은 별 이미지가 들어서게 되는 것.

결국 제일 오른쪽 이미지처럼 합쳐지게 되는 것이다.

 

 

실습과제

텍스쳐 한 장만 받아서, lerp를 이용해 텍스쳐가 컬러에서 흑백으로 변하는 기능을 만들려면 어떻게 해야 할까요?

Saturation  노드를 사용하지 않고 만들어 보도록 합시다.

 

 

컬러 텍스쳐, 흑백 텍스쳐 하나씩 만들어 놓고 Lerp로 연결해주었다.

 

 

끝!!!!