[Unity 쉐이더] Lerp

내용 정리

 

• 밝기
• 텍스쳐 넣기
• 흑백만들기
• 러프
• 연습

---

밝기 조절

 

저번에는 색상 조절이 가능한 쉐이더를 만들어보았습니다. 이번에는 추가로 밝기까지 조절할 수 있도록 해봅시다.

과정을 하나하나 진행하며 저장해 유니티에서 에러가 뜨지 않는지 확인해줍시다! 

 

시작하기 전에 평소와 같이 코드를 정리해주고 갑니다.

반복 함으로써 코딩이 익숙해지게 만드는 과정 중 하나입니다.

 

 

정리가 끝났으니 다시 슬라이더로 RGB색상을 조절하는 쉐이더를 만들어봅시다.(반복 학습)

RGB까지의 제작 과정은 저번 글에서 설명했으니 스킵합니다. 밑의 사진들과 주석을 참고해주세요. 

밝기를 조정하는 기능을 추가하려면 새로 변수가 필요합니다.

R,G,B와 같이 float1의 슬라이더면 되지만 최소,최대값에 차이가 있습니다.

 

그러합니다.

 

 

인터페이스를 제작했으니 변수도 만들어 줍니다.

properties에서 사용되는 변수들은 surf 등등 다른 구조체 내에 넣을 수 없습니다.

구조체에 대해서는 저번에 코드 정리하며 간단하게 설명함 sunsimu1018.tistory.com/9

변수를 가져다 쓰기 위한 과정에 위반한다고 생각하면 될 것 같습니다.(안방에있는 택배를 거실을 거치지 않고 현관으로 가져가는 느낌 )  

로마에서 로마법 따르듯이 각 언어마다 문법이 있는 것입니다.

 

o.Albedo = float3(_R,_G,_B)+_Brightness;

밝기 추가는 간단하게 Add로 이루어집니다. 최소값이 -1이었기 때문에 -1을 더하면 기존 색상보다 어두워지게 되죠.

 

 

위 사진 주석에서 말한 것 처럼 1이상, 0이하의 수가 나와 HDR컬러와 괴상한 색상들이 나오게 되었습니다.

이 문제를 해결하기 위해서는

 

 

Clamp,Saturate

Clamp와 Saturate를 사용합니다.

 

대소문자에 주의 

노드에서도 자주 사용해 익숙하네요. 어떤 값의 최소,최대값을 제한해줍니다. Saturate와의 차이점은 최소,최대값을 수동으로 지정해 줄 수 있다는 것입니다.

clamp(x,min,max);

 

 위의 clamp와 다르게 자동으로 0~1로 범위를 제한합니다.

saturate(x);

 

함수는 사용법만 익히면 사용하는데 크게 문제가 없습니다. 

Albedo가 세개나 되는데 적용시켰을 때 에러는 뜨지 않습니다. 이유는 Albedo를 계속 새로 선언해주고 있는 것이기 때문이겠죠?

 

원래 코드도 주석으로 달아두려고 했는데 보기 편하라고 냅뒀습니다.

이제 유니티 내에서도 잘 나오는지 확인하고 넘어갑니다.

 

 

전체 코드

 +정리

 

짧지만 깁니다. 알아보기 쉬운 코드로 만들어주기위해

o.Albedo = clamp(float3 (_R,_G,_B)+_Brightness,0,1);

 

정리해서 새 변수를 선언해줍니다.

float3 B = float3 (_R,_G,_B)+_Brightness;
o.Albedo = clamp(B,0,1);

 

 

---

텍스쳐 넣기

 

 드디어 텍스쳐를 넣어봅니다.  

 

프로퍼티내의 인터페이스 제작 방식은 

sunsimu1018.tistory.com/8 <<여기서 확인할 수 있습니다.

 

텍스쳐는 sampler2D를 이용합니다. 엔진내의 텍스쳐들을 잡아오는 역할을 합니다.

텍스쳐는 불러올 수 있게 되었지만 오브젝트에 적용하려면 정보가 필요합니다.

 

 어떤 정보?

모델링을 해서 가져왔다면 텍스쳐를 적용하기 위해 UV언랩 과정을 거쳤을 것입니다. 그 UV정보는 오브젝트에 남아있고, 오브젝트에서도 버텍스에 저장이 됩니다.

그러므로 버텍스의 UV정보를 가져오는 과정이 필요합니다.

 

버텍스 정보는 또 어디서 가져오나요?

Input에서 가져올 수 있습니다. SurfaceOutputStandard와 같이 구조체로 안에 여러 타입의 데이터를 담을 수 있습니다.

처음 쉐이더를 열었을 때 있던 것과 같은게 있습니다. uv는 2D텍스쳐의 x,y값만 가져오기 때문에 float2입니다.

 

지금 단계에서는 Input은 버텍스의 정보를 불러오는 곳으로 간단하게 짚고 넘어갑시다.

shadowmint.gitbooks.io/unity-material-shaders/content/support/input_structure.html <<매뉴얼

공간에 대한 정보가 많은 것 같네요. 뭐라는거야~~

 

 

 

이제 뿔뿔히 흩어져있는 정보들을 새 변수에 모아 넣어줍시다. 그걸 알베도에 적용시켜주면 텍스쳐가 적용되는 것을 확인 할 수 있습니다.

 

uv정보를 가져올 때 IN.을 붙이는 이유

Input의 uv_Maintex를 surf로 가져올 건데 매번 Input으로 부르기는 귀찮으니 surf내에서 줄여서 IN이라고 부르자~ 라고 정한것입니다. 정말 짧은 별명같은 느낌이네요.  

 

---

흑백 이미지 만들기

이미지를 적용시킬 수 있으니 이제 이미지를 가지고 놀아봅시다.

코드로 RGB컬러 이미지를 흑백 이미지로 만들어보자

 

공식, 전체 코드

 

(r+g+b)/3

 

흑백이미지를 만드는 공식은 많지만, 그중에서 제일 간단하게 평균값을 구하는 공식입니다.

 

---

Lerp(선형보간)

 

돌아온 러프

대소문자에 주의

lerp (x,y,s)

 

 

준비물- 텍스쳐 두장 (알파들어간 텍스쳐 1개 이상)

_Lerp변수는 혼합 비율 슬라이더 제작을 위해 준비한 float1

 

 

 

텍스쳐가 2개 필요하니 변수도 2개 uv변수도 2개

2채널의 uv를 불러올 수도 있으니 번호 지정시 위치 확인을 꼼꼼하게 합시다. 

 

 

surf내 텍스쳐 변수도 2개 많아지면 복잡해지겠네요.

s값에 아까 만든 변수_Lerp를 넣어주면 인터페이스로 러프값을 바로 조정할 수 있습니다.

 

---

Lerp 응용.1

 

야매로 채도 조절 기능 만들기

이미지의 채도 조절이 가능한 슬라이더를 만들어주세요. 

고민.. 채도를 기본 텍스쳐 이상으로 높일지 말지도 확인해야하지만 지금은 둘 다 해보겠습니다.

 방금까지 진행한 과정과 유사합니다. 채도를 높일 경우에는 0이하의 값까지 사용해야 하겠네요.

 

 

 

채도를 높일 경우 1이상의 색이 나오지 않게 saturate를 사용합니다.

 

 

 

---

Lerp 와 Alpha

 

러프값을 알파 텍스쳐를 이용해 적용해봅시다.

방법은 이미 했던 것과 비슷하며 s값의 위치에 텍스쳐의 알파값을(.a) 넣어주변 됩니다. 

 

알파를 반전하고 싶은 경우 두 개의 간단한 방법이 있습니다.

1. (1-x)를 이용해 알파값을 반전

2. 텍스쳐의 위치를 서로 변경

 

 

 

Lerp 응용.2

 

알파값을 슬라이더로 조절할 수 있게 만들자

과정

 

 

알파값 중 0이상인 부분에 1을 더해줌으로서 원래는 보였던 부분도 두번째 텍스쳐가 나타나게 합니다.

빼거나 더하거나 값 지정은 텍스쳐의 종류나 순서에 따라 원하는대로

 

---