[쉐이더]색깔 놀이2_Lerp

내용 정리

 

• 시작하기 전
• 감마, 리니어
• Properties
  • 색 변경 UI
• 흑백
• Lerp

---

색깔 놀이 전

 

 

 

정리에 유용한 기능들

 

그룹

 

노드는 코드에 비해 조금만 복잡해져도 찾아보기 어렵기 때문에 꾸준한 정리가 필요하다.

 

 

스티커 메모

 

공유, 인수인계, 공부 등에 활용할 수 있는 메모

 

 

---

회색+회색/ Gamma, Linear

 

저번에 배웠듯이 0이 검정이고, 1이 흰색일 때 0.5(회색)+0.5는 흰색이 될 겁니다.

 

둘 다 0.5임

 

하나는 연한 회색이 나왔다.

 

왜 이러는 걸까?

 

베버의 법칙

베버-페히너의 법칙이란 감각기에서 자극의 변화를 느끼기 위해서는 처음 자극에 대해 일정 비율 이상으로 자극을 받아야 된다는 이론을 말한다.

[위키백과] 베버-피헤너의 법칙

 

이런 사람의 감각기 때문에 사람 눈에 더 자연스럽게 보이기 위해 모니터에서 감마값을 조절해 더 어둡게 출력합니다.

결론: 위 회색의 값은 정확한 회색이 아니라 조금 더 어두운 색이다! 위가 sRGB, 아래가 Linear라고 보면 된다.

 

128에서 원래 회색보다 더 어둡게 보이게 됩니다. 감사합니다. 삼성디스플레이 블로그

 

 

 

이제 sRGB를 Linear로 변환시켜 봅시다.

Colorspace Conversion을 통해 Linear->RGB로 바꿔줍니다. (위의 내용이랑 반대인데 이렇게 해야 함)

 

그러면 우리가 원하던 흰색이 나옵니다.

 

---

Properties

 

1. 기능 알아보기

 

Properties에 추가되면 그래프 밖 Inspector에서 바로 조절할 수 있게 됩니다.

 

 

 

vector1로 구경하기

 

• Exposed- 단어 뜻대로 인터페이스를 표시할지 말지 정한다.
• Reference- 우측 하단의 properties에서 보이듯이 프로그래머가 찾을 때는 Referenxe의 이름을 이용해 찾는다.

플머를 위해 이름을 잘 지정해 줍시다. 위의 이름은 Reference와 같게 하면 플머가 찾기 쉬울 것이며, 엔진 기능에 미숙한 사람을 위해 쉬운 이름을 지정해줘도 될 겁니다. 케바케

 

• Default- 초기값입니다.
• Mode- 인터페이스 모드를 결정합니다.(거의 Default, Slider만 사용함)
  • Default- 기본
  • Slider- 0~1 사이의 숫자를 슬라이더로 이용할 수 있습니다.
  • Integer- 정수만 사용 가능 (하다는데 소수점까지 다 나옵니다.)
  • Enum- 사용할 수 없음 (따로 사용하는 곳이 있다고 함)

 

Vector1과 Vector4의 차이는?

그냥 4개다.

Vector2, Vector3은???

쉐이더에는 Vector1과 Vector4만 있기 때문에 2,3은 내부에서만 존재할 수 있어서 2,3을 억지로 불러와도 Vector4와 동일하게 표시됩니다.

되도록이면 Vector1과 Vector4만 이용합시다.

 

---

연습 1 색 변환 UI를 만들어보자

 

RGB를 조절해 빨강, 노랑, 회색, 흰색까지 다양한 색을 만들 수 있게 해 보자 어떻게하면 될까?

 

과정

 

1. 조건 분석해보기

 

RGB를 조절해 빨강, 노랑, 회색, 흰색까지 다양한 색을 만들 수 있게 해보자

 

[RGB를 조절해]

RGB각각의 슬라이더는 Vector1로 만들어져 있습니다.

 

[빨강, 노랑, 회색, 흰색까지 다양한 색을 만들 수 있게 해보자]

Vector1 3개로 Vector3인 RGB를 나타내야 합니다. 

 

 

2. 해결방안 찾기

 

Vector1 3개로 Vector3을 만들어 Albedo로 나타내려면?? 3개를 합치면 되지 않을까

합치려면 뭐가 필요할까

 

 Combine을 써보자. 

 

flpat3인 RGB니까 RGB(3)를 Albedo(3)에 연결.

 

---

 

 

만들어졌다.

 

 

이어서 연습 2 Brightness(밝기 조절) 기능을 추가해보자.

 

과정

 

1. 조건 분석해보기

 

밝기 조절 기능을 추가해보자.

 

[밝기 조절 기능]

1. 현재의 RGB 컬러에 추가로 어두움과 밝음을 표시해야 한다.

2. 왼쪽으로 가면 어두워지고 오른쪽으로 가면 밝아지게 해야 한다.

 

2. 해결방안 찾기

 

Combine 해서 나온 결과에 밝기를 더하려면 어떻게 해야 할까

 

 

더하면 되겠지.

 

 

결과는?

 

 

어두워지지 않음. 밝아지기는 함.

 

 

2-2. 해결방안 찾기 2

 

기존의 색보다 더 어둡게 하려면 어떻게 해야 할까?

 

 

최소값을 -1로 만들어 -1을 더하게 하자. 0 이하로 내려가면서 기존의 색보다 어두워지게 됩니다.

0 이하의 수도 쓸 수 있다는 것을 머리에 세겨둡시다.

 

그런데 0과 1 사이를 넘어 HDR이 되고 뭔가 징그러운 색이 나온다.

 

 

 

 

2-3. 해결방안 찾기 3

 

0과 1 사이를 넘지 않으려면 어떻게 해야 할까????

 

 

이런 경우에는 Clamp를 사용합니다.

 

Clamp는 아무리 많이 더해져도 최소, 최대로 나타나는 값을 설정할 수 있습니다. 지금 같은 경우에는 (0,0,0), (1,1,1)으로 설정합니다.

 

 

결과는?

 

 

 

 

 

짜짠

이제 검정, 흰색 사이에서 색조, 명도를 조절할 수 있게 되었습니다.

 

 

 

---

 

흑백, Saturation

 

텍스쳐도 가지고 놀아봅시다. 텍스쳐는 드래그로 가져올 수 있습니다.

 

연습 3. 컬러 이미지를 흑백으로 만들어보자

같이해봅시다.

 

 

실수

 

RGBA / float4, float1

 

텍스쳐를 흑백으로 만드는 도중 한 실수

RGBA를 Combien에서 R, G, B로 합쳤더니 흑백이 나오길래 이것도 흑백인가 싶었지만 뭔가 아닌 것 같은 느낌이 들었다.

 

 

무엇이 문제인가?

각 색이 뚜렷한 이미지로 비교해보면 알기 쉽다.
RGB를 흑백으로 만든 게 아니라 RGB세자리에 R값만 똑같이 들어가 흑백으로 보이고 있다.

(0.5,0.5,0.5)는 회색이듯이

 

 

알 수 있는 것

float4인 RGBA를 folat1로 나타내면 맨 앞의 R값만 가져오게 됩니다. 

 

 

---

 

 

 

 

과정

 

1. 조건 분석해보기

 

텍스쳐를 흑백으로 만들어보자

 

[흑백으로 만들어보자]

1. RGB(3)를 이용해 그레이 컬러를 만들어야 한다.

 

 

2. 해결방안 찾기

 

 

 

1. 회색을 만들려면 RGB의 평균값이 필요한데 

2. 합치려면 무엇을 사용해야 할까

 

Combine은 RGB로 각각 합쳐지기 때문에 쓸 수 없었다.

 

다른 방법은? 

 

 

Add로 RGB를 따로 더한다. 그리고 3을 나눠준다. 이렇게 평균값을 구할 수 있습니다.

 

(R+G+B)/3

공식을 코드가 아니라 노드로 구현한다고 생각하면 이해하기 쉽습니다.

아래 이미지는 숫자로 보면 조금 더 알기 쉬울 것 같아서

 

간단하게는 (R+G+B)/3 으로 평균값을 구할 수 있고,

(0.2126R+0.7152G+0.0722B), (0.299R+0.587G+0.114B) 같이 눈의 민감도에 따라 가중치를 다르게 둔 공식들이 있습니다.

찾아보니 저것들 외에도 이것저것 많이 나옵니다.

 

 

Saturation

 

흑백 이미지는 Saturation를 사용해 만들 수도 있습니다. 

직접 만들어야 할 경우에는 위의 공식들을 이용하고, 간편하게 제작할 때는 Saturation를 사용할 수 있습니다. 

 

 

 

---

Lerp

 

Linear Interpolation (선형 보간법)

끝점의 사이 값을 알기 위해 직선거리에 따라 선형적으로 계산하는 방법.

A와 B를 인자값(0~1)에 따라서 섞어준다.

 

 

Lerp, 선형보간, 그라데이션 여러 단어로 부를 수 있습니다.

 

Lerp- 프로그래머 쪽에서 주로 부르는 방식

그라데이션- 그래픽이 들으면 바로 이해하는 방식

 

lerp(x, y, s)

그래프가 나와서 무서워졌다면 그라데이션이라고 외칩니다.

 

A와 B를 설정해주고 T값으로 조절합니다.

아래 Vector1에 주목

 

 

---

 

어느 정도 이해가 됐다면 연습을 해보자

연습 4 텍스쳐를 설정하고 슬라이더를 이용해 이미지를 흑백으로 만들 수 있게 해 보자

 

 

과정

1. 조건 분석해보기

텍스쳐를 설정하고 슬라이더를 이용해 이미지를 흑백으로 만들 수 있게 해보자

 

[텍스쳐 설정]

[슬라이더를 이용해 이미지를 흑백으로]

 

 

텍스쳐를 설정하기

 

inspector에서 텍스쳐를 설정하는 건 많이 해봤을 겁니다. 그걸 properties에서도 Texture2D를 이용해 생성할 수 있습니다.

이름 변경 까먹음

 

 

inspector에서는 이렇게 보이게 됩니다.

 

 

 

이제 원본 텍스쳐가 준비됐으니 그레이 컬러의 텍스쳐를 준비하고

슬라이더로 그라데이션을 나타내 봅니다.

과정 2

 

그레이 컬러로 변환하는 과정은 위에서 연습한 것과 같습니다.

(R+G+B)/3

 

마지막으로 슬라이더로 나타내려면 어떻게 해야 할까?

Lerp자체는 properties로 보낼 수 없습니다. 그리고 필요한 것은 그라데이션을 나타내는 슬라이더 뿐입니다.

 

 

 

우리가 필요한 것은 Lerp에서 어느 값일까??

 

 

 

A는 선택한 텍스쳐, B는 A의 그레이 컬러 이므로, T값을 조절하는 Vector1을 슬라이더로 나타내면 됩니다.

 

 

 

 

 

짜잔

마지막으로 하나 더 해봅시다.

 

---

연습 5 Alpha텍스쳐와 Lerp

 

 

간단하게 알파 텍스쳐가 포함되어있는 이미지로도 연습해봅시다.

흙 위에 풀이 보이게 하려면 어떻게 해야 할까?

 

 

 

T에 알파 값을 연결하면 표현 가능한데 원하던 결과와 반대로 나옵니다. 이런 경우에는

 

 

 

 

A와 B의 텍스쳐 위치를 바꿔주거나 One Minus를 이용해 알파를 반전해 줄 수 있습니다. 

 

이런 식으로 활용 가능!

 

 

 

---