오늘은 저번에 만들어 놨던 물을 좀더 만져볼 것이예요!
첫 번째로 해볼 것은
1. 투명도 조절해주기
![](https://t1.daumcdn.net/cfile/cafe/2774444F59169DED2A)
출처 : 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를 쓸수 있도록 만들어줘야 겠지요.
![](https://t1.daumcdn.net/cfile/cafe/271BEB505916A1F307)
그리고 그 결과를
o.Alpha에 넣어주면!
![](https://t1.daumcdn.net/cfile/cafe/2119654C5916A22F06)
멀리 있는 쪽 아래가 살짝 비춰지는게 보이시나요?
이제 이걸 뒤집어 주면
![](https://t1.daumcdn.net/cfile/cafe/2237724A5916A2CB23)
![](https://t1.daumcdn.net/cfile/cafe/257A4B4A5916A2CC10)
![](https://t1.daumcdn.net/cfile/cafe/25141B4A5916A2CC1F)
내가 보는 방향과 물 표면의 노말방향이
0에 가까운 곳은 밑의 땅이 비춰지고,
직각이 되는 부분은 불투명 해 보입니다.
![](https://t1.daumcdn.net/cfile/cafe/223069505916A34E0C)
좀 더 확실히 보이게 하려고 (1-rim)에
pow로 범위를 조절 해 주고
0의 값을 가져 투명도가 너무 확 빠지는 부분이 있어
+0.2로 땡겨줘 투명도를 조절해 줬습니다.
1을 넘는 부분이 생겨서는 안되니 saturate로 잘라주는 것도 잊지 마세요!
![](https://t1.daumcdn.net/cfile/cafe/2120A1505916A3520D)
2.스페큘러 넣어주기
물 표면이 반짝거리면 좀 더 예쁘겠죠?
쓰고있던 Lambert를 지워주고 커스텀 라이트를 넣어 거기서 스페큘러를 만들어 줄 거예요.
![](https://t1.daumcdn.net/cfile/cafe/2612604A5916A5BF1C)
![](https://t1.daumcdn.net/cfile/cafe/2727854A5916A5C22B)
<-조기 구석에 조그마한 스페큘러가 보이시나요 허헣
3.물 움직여 보기 +상하 좌우 커다랗게 물결치기
물은 잔잔하게 흐르지만은 않죠!
위 아래 좌우로 울렁울렁 거리는 것을 표현 해 봅시다.
이건 표면만 움직이는게 아니라 오브젝트의 부분부분을 직접 잡아 끌어야 겠죠?
그러려면 vertex 쉐이더의 도움을 다시 한번 받아봅시다.
![](https://t1.daumcdn.net/cfile/cafe/2524213D5916A65C29)
자 일단
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강 때 배웠었지요.
그러니 이건
![](https://t1.daumcdn.net/cfile/cafe/2410113A5916A98D32)
버텍스의 x,y,z 축 중 y축에
uv(texcoord)의 x 값을 더해주겠다!
하는 말인거죠.
![](https://t1.daumcdn.net/cfile/cafe/27767A3D5916A65C1C)
물이 비스듬하게 섰어요!
이제 저 나눠진 부분들을 이어줘야 물결이 되겠지요?
![](https://t1.daumcdn.net/cfile/cafe/2771593D5916A65C25)
여기서 마법의 공식 하나 더
*2 - 1을 써볼 것이예요.
0 * 2 -1 = -1
0.5 * 2 -1 = 0
1 * 2 -1 = 1
0~1까지 있던 숫자들을
-1 ~ 1 까지로 만들어주는 마법의 공식이죠.
자 여기서!
만약
-1 0 1
이렇게 되어있던 것에 -1을 1로 끌어 올려주면?
![](https://t1.daumcdn.net/cfile/cafe/2518BE3D5916A65D1C)
절대값 abs의 힘으로 -1에서 -를 떼어버렸습니다!
![](https://t1.daumcdn.net/cfile/cafe/25767D3D5916A65D25)
↖_↗
1 0 1
물결 모양이 완성되었습니다
이제 이걸 움직여 볼건데
물결 모양으로 굽이쳐야 하니 sin 과 _Time.y의 도움을 받도록 하죠!
![](https://t1.daumcdn.net/cfile/cafe/2269493D5916A65D1F)
![](https://t1.daumcdn.net/cfile/cafe/273FAC465916A66015)
또잉
일단 물결사이의 간격을 조정해 주고
![](https://t1.daumcdn.net/cfile/cafe/242ABD375916ABEC30)
abs(v.texcoord.x *2-1) *10
![](https://t1.daumcdn.net/cfile/cafe/275E7B465916A6641B)
너무.. 밑까지 파고 들어가니 *0.15 정도로 조절해 주면
![](https://t1.daumcdn.net/cfile/cafe/22416A465916A6660E)
![](https://t1.daumcdn.net/cfile/cafe/216C4D465916A6680B)
이렇게 물결이 완성되었습니다.
5.굴절
아까 프레넬 반사에는 반사만 있는게 아니라 굴절에 대한 것도 있었지요!
그걸 구현해 볼거예요.
![](https://t1.daumcdn.net/cfile/cafe/213BFB3F5916C0FB13)
![](https://t1.daumcdn.net/cfile/cafe/270FB33A5916AD4F08)
screenUV -> 이 사진의 UV를 만들어 줍니다.
![](https://t1.daumcdn.net/cfile/cafe/2662E53A5916AD4F36)
screenUV
![](https://t1.daumcdn.net/cfile/cafe/256CD13A5916AD5201)
Grab
이제 Reflection과 grab을 섞어줘야 겠죠!
o.Emission에
lerp(Reflec , grab , rim);
![](https://t1.daumcdn.net/cfile/cafe/23274E3D5916D26B1C)
rim의 수치가 0에 가까운 곳엔 Reflec이
1에 가까운 곳은 grab이 진하게 나오도록 이렇게 적어줍니다.
![](https://t1.daumcdn.net/cfile/cafe/262C963E5916D29F0D)
중간중간 수정을 거쳐 완성된 결과물!
--------------------------------------------------------------------------
노말맵에 대해
1. 버텍스 쉐이더와 픽셀 쉐이더
![](https://t1.daumcdn.net/cfile/cafe/224A14495916D69F32)
출처 : 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 이렇게 되는 것입니다.
+아직 잘 이해가 안돼서 쓴 내용도 알송달송 하네요![](//i1.daumcdn.net/deco/contents/emoticon/ani_22.gif?v=2)
첫댓글 ㅎㅎ 그래도 잘 정리했는데