1. 왜 물은 물처럼 보이는 걸까?

반응형


왜 물은 물처럼 보이는 걸까?
사실 물을 만드는건 어느정도 정형화된, 뻔한 패턴이 존재한다.
거기에 가격대 성능비를 따져 꼼수를 쓰거나 하는 정도이다.


위키에서의 물의 정의는 간단하다.
물은 산소와 수소가 결합한 화학물질이며 표준온도 압력에서 무색투명하고, 무색무취하며 지표면의 70%정도를 덮고 있다.
가장 보편적인 용매로 보통 액체상태의 물을 가리키지만 고체 상태인 것을 얼음, 기체 상태인 것을 수증기라고 부른다.

, 물처럼 보일려면 우선 색깔이 없고 투명(시각적인 부분)해야 하고 액체의 성질(물리적인 부분)을 띄고 있어야 한다.

그렇다면 게임에서는 이러한 성질을 가지고 있는 물을 표현하기 위해 어떤방식을 사용하는가???
아주 기본적인 방식부터 천천히 올라가 보자.


1. 프로그래머가 사용가능한 셰이더가 등장하기 전까지는 적당한 물결모양의 반투명 텍스쳐를 폴리곤에 붙여서 사용했다.
   이는 당시에는 그럭저럭 이해가능한 범위였고 시각적으로나마 물의 느낌을 낼 수 있었다.
   좀 더 리얼한 느낌을 내기 위해 텍스쳐의 uv를 스크롤시켜 물이 흐르는 듯 한 착각을 하게 만들었다.
   여기에 보태어 하나 이상의 반투명 물결 텍스쳐를 멀티텍스쳐링을 사용하여 다른 방향으로 스크롤 시켜
   수면의 시각적인 부분에 추가적으로 물리적인 느낌이 조금이라도 나도록 수면의 일렁이는 느낌을 주려 하였다.


위의 방식이 물을 만들고자 했던 가장 처음방식 일 거라 생각한다.
단순히 물결모양의 텍스쳐에 알파를 줘서 사각형 폴리곤에 덮어쒸운것.

위의 사진은 uv스크롤만 추가한 모습이다. 스샷으로는 uv가 애니메이션 되는 모습을 보여줄 순 없으니 방식만... ㅎㅎ

그 후에는 텍스쳐 두장을 사용하고 uv 스크롤링을 다른방향 이나 다른 스피드값으로 흘리게 하여 약간의 출렁임을 꾀하려 했다.

단순히 텍스쳐 두장을 사용해서 lerp시켰다.
단순히 이렇게만 해도 어느정도 물적인 느낌을 줄 수 있었다...라고 당시에는 생각을 했었지....

2. 프로그래머가 셰이더에 접근할수 있게 되면서 부터 물결표현에 법선맵을 사용하는것이 유행하게 되었다.
법선맵을 스크롤 시켜 수면의 일렁이는 느낌을 주려 하였다.

텍스쳐를 아무거나 써서 그다지 예쁘지 않게 나오긴 했지만 대략 위와같이 하면 된다.
위에서는 밑에깔리는 텍스쳐와 위의 물거품같은 텍스쳐, 그리고 법선맵으로 쓸 텍스쳐, 이렇게 세개를 사용했는데
기호에 맞게, 게임특성에 맞게 적당이 빼거나 더하면 될 듯 하다.

3. 이제 슬슬 GPU성능도 올라가고 거기에 따른 비디오 메모리 용량까지 커지니 이를 활용하여 잔물결에 움직임을
주기위한 시도가 있었는데 가장 처음 구현된 것은 그냥 루프(loop)하는 법선맵의 애니메이션을 오프라인으로 생성하여
이것을 랜더링할 때에 사용하는 것인데 지금도 많이 쓰고 있는 방법중 하나이다.
몇가지 굵직한 방법들이 있는데 사인파를 사용하여 wave를 주는방식이나 노이즈를 사용하여 좀 더 자연스러운
잔물결을 만들어 내는 방식들이 있다.


위의 물은 mobile에서 사용하기 위해 opengl로 만들은 것으로 Ogre에 있는 "Ocean" 샘플을 참고해서 만들었다.
사인파를 사용하여 wave를 주고 거기에 blur, fake hdr, fresnel을 추가하였다.
reflection맵은 올바른 텍스쳐가 준비되어 있지 않아 빼 놓았다.
추가로 blur도 빠질예정이다...모바일 프레임을 위해. ㅡ0ㅡ.
사실 이러한 이야기가 지금 상황에 중요한건 아니고, 핵심은 오프라인으로 생성한
법선맵의 애니메이션을 통해 일렁이는 잔물결을 표현하고자 했다는 것이다.
하지만 이 방법은 위 사진을 보면 알겠지만 자세히 보면 법선맵의 반복적인 패턴이 보이게 된다.
이를 위해 법선맵의 스케일을 조정해서 섞어 쓰거나 하기도 한다.

위 물을 만드는 방법은 천천히 설명하기로 하고 물을 물처럼 보이게 하기 위한 노력들에 대해서 좀 더 이야기를 해보도록 하자.

*ps - 위 이미지들은 대부분 직접 만들려고 했지만 퍼온것도 있습니다. 이익창출의 목적이 아니니 이해해 주세유~! 
      - 잘못 설명된 부분이 있거나 이상한 부분이 있으면 과감한 지적질 감사유~!

 

'Study > M's Lecture' 카테고리의 다른 글

3. 왜 물은 물처럼 보이는 걸까?  (0) 2013.01.17
2. 왜 물은 물처럼 보이는 걸까?  (0) 2012.12.14
감마 보정 (gamma correction)  (0) 2012.02.27
벡터  (0) 2012.02.10
가우스 필터  (0) 2012.01.31
TAGS.

Comments