201513010 백금주 9강,10강

[201513010 백금주]

 오늘은 저번에 만들어 놨던 물을 좀더 만져볼 것이예요!

첫 번째로 해볼 것은

 1. 투명도 조절해주기

출처 : http://korean.visitkorea.or.kr/kor/bz15/bz15diyTravelLeaderList.kto?func_name=view&articleId=20659 

이 계곡사진을 보시면!

바로 앞쪽은 물 아래 돌이 비춰지지만 

그에서 멀리 떨어질 수록 그 아랜 비춰지지 않고 주위에 있는 풀 색을 반사하고 있지요.

이렇게 사람의 시야각과 수면의 각이 같을 수록

투과/굴절 > 반사 

가 되어 그 속이 비춰지고

그 각이 90도에 가까워질 수록

투과/굴절 < 반사가 되어

 거울처럼 주위를 반사하는 성질을

 프레넬 반사라고 합니다.

오늘은 우리가 만든 강물에 이 반사를 적용하는 것 부터 시작해 볼거예요.

[정보 도움:http://blog.naver.com/PostView.nhn?blogId=edgerider&logNo=110155453496 ]

가까이 보고있는 곳은 투명하게!

투명도를 조절하려면 일단 alpha를 쓸수 있도록 만들어줘야 겠지요.

그리고 그 결과를 

o.Alpha에 넣어주면!

멀리 있는 쪽 아래가 살짝 비춰지는게 보이시나요?

이제 이걸 뒤집어 주면

내가 보는 방향과 물 표면의 노말방향이 

0에 가까운 곳은 밑의 땅이 비춰지고,

직각이 되는 부분은 불투명 해 보입니다.

좀 더 확실히 보이게 하려고 (1-rim)에

pow로 범위를 조절 해 주고

0의 값을 가져 투명도가 너무 확 빠지는 부분이 있어

+0.2로 땡겨줘 투명도를 조절해 줬습니다.

1을 넘는 부분이 생겨서는 안되니 saturate로 잘라주는 것도 잊지 마세요!

2.스페큘러 넣어주기  

 물 표면이 반짝거리면 좀 더 예쁘겠죠?

쓰고있던 Lambert를 지워주고 커스텀 라이트를 넣어 거기서 스페큘러를 만들어 줄 거예요.

<-조기 구석에 조그마한 스페큘러가 보이시나요 허헣

3.물 움직여 보기 +상하 좌우 커다랗게 물결치기

물은 잔잔하게 흐르지만은 않죠!

위 아래 좌우로 울렁울렁 거리는 것을 표현 해 봅시다.

이건 표면만 움직이는게 아니라 오브젝트의 부분부분을 직접 잡아 끌어야 겠죠?

그러려면 vertex 쉐이더의 도움을 다시 한번 받아봅시다. 

자 일단 

vertex:vert 로 버텍스 쉐이더를 가동시켜 주고.

void vert(inout appdata_full v){

로 내가 버텍스의 위치, 노말, uv, 컬러 모든 것을 꺼내오겠다 ! 하고 말해 줍니다.

+버텍스의 정보는+

----------------------------

 -float4 vertex <- 버텍스의 위치

 -float3 normal <- 버텍스의 노말

 -flaot4 texcoord 

- flaot4 texcoord1

 -flaot4 texcoord2

- flaot4 texcoord3 <- 이 texcoord는 uv의 원래 이름

-----------------------------

라고 5,6강 때 배웠었지요.

그러니 이건 

버텍스의 x,y,z 축 중 y축에 

uv(texcoord)의 x 값을 더해주겠다!

하는 말인거죠.

물이 비스듬하게 섰어요!

이제 저 나눠진 부분들을 이어줘야 물결이 되겠지요?

여기서 마법의 공식 하나 더

*2 - 1을 써볼 것이예요.

0 * 2 -1 = -1

0.5 * 2 -1 = 0

1 * 2 -1 = 1

0~1까지 있던 숫자들을 

-1 ~ 1 까지로 만들어주는 마법의 공식이죠.

자 여기서!

만약 

-1 0 1

이렇게 되어있던 것에 -1을 1로 끌어 올려주면? 

절대값 abs의 힘으로 -1에서 -를 떼어버렸습니다!

↖_↗

1 0 1

물결 모양이 완성되었습니다 

이제 이걸 움직여 볼건데

물결 모양으로 굽이쳐야 하니 sin 과 _Time.y의 도움을 받도록 하죠!

또잉

일단 물결사이의 간격을 조정해 주고

abs(v.texcoord.x *2-1) *10

너무.. 밑까지 파고 들어가니 *0.15 정도로 조절해 주면

이렇게 물결이 완성되었습니다.

5.굴절 

아까 프레넬 반사에는 반사만 있는게 아니라 굴절에 대한 것도 있었지요!

그걸 구현해 볼거예요.

screenUV -> 이 사진의 UV를 만들어 줍니다.

screenUV

Grab

이제 Reflection과 grab을 섞어줘야 겠죠!

o.Emission에

lerp(Reflec , grab , rim);

rim의 수치가 0에 가까운 곳엔 Reflec이 

1에 가까운 곳은 grab이 진하게 나오도록 이렇게 적어줍니다.

중간중간 수정을 거쳐 완성된 결과물!

--------------------------------------------------------------------------

노말맵에 대해

1. 버텍스 쉐이더와 픽셀 쉐이더

출처 : http://goanna.cs.rmit.edu.au/~gl/teaching/rtr&3dgp/tutorials/tute-shaders2.html

디지털 세계에서의 라이팅 연산은 

라이트 벡터와 오브젝트의 노말 벡터 사이의 내각으로 구해지지요!

그러니 버텍스 노말로 연산되는 오브젝트 보다는

픽셀 하나하나의 노말로 연산되는 오브젝트가 좀 더 부드럽게 나오게 되죠.

이게 노말맵 텍스쳐의 원리일 것이예요! 

픽셀단위로 노말연산을 해 로우 폴리의 오브젝트도 부드럽게 보일 수 있도록 해주는 것이지요.

2.노말맵에 대하여

노말맵에서 x,y는 각각 축의 기울기 값을 조정하고

z는 이들의 값을 1로 잘라주는 normalize를 담당해 준답니다.

그런데 여기서 문제가 하나 있다면 

텍스쳐로 표현할 수 있는 기울기의 범위는 0~1. 즉 90도 까지인데

실제의 기울기는 180도 까지 있지요.

이때 이 0~1까지의 수를

-1~1까지로 바꿔주려면?

그렇죠 아까 배운 마법의 공식

*2 -1 이 있죠.

그리고 우리가 normalmap을 꺼낼 때 사용하는 

[UnpackNormal] 바로 이 안에 저 마법의 공식이 담겨져 있답니다. 

하지만 문제가 여기서 끝나지는 않아요.

기본적으로 DXT파일로 저장되는 텍스쳐의 컬러 단계는

5 : 6 : 5

이 작은 단계로 90도아닌 180도를 표현하기엔 턱없이 부족하겠죠?

그러니 이 R,G,B 채널중 

B채널을 버리고 R,G 두 채널에 몰아주게 된 것이예요!

R : G = 8 : 8 이렇게 되는 것입니다.

+아직 잘 이해가 안돼서 쓴 내용도 알송달송 하네요

[corps]

ㅎㅎ 그래도 잘 정리했는데