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

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

Speaker : Mgun.

사실 게임상에서 물을 만드는건어느정도 정형화된 , 뻔한 패턴이 존재한다 . +가격대 성능비를 따지고 꼼수를 추가하는 정도 .

Wiki 가 말하길…물은 산소와 수소가 결합한 화학물질이며표준온도 압력에서 무색투명하고 , 무색무취하며지표면의 70% 정도를 덮고있다 .…~~

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

물을 만들기 위한 노력 .

옛날 옛적에는 말이지… .

프로그래머가 사용가능한 셰이더가 등장하기 전 ..


그냥 적당한 물결모양의 반투명 텍스처를 폴리곤에 붙여서 사용합시다 ~!( 시각적으로 물의 느낌이 나도록… )








좀 더 리얼하게 ? 그럼 UV 를 흘려볼까 ?( 물이 흐르는 듯한 느낌을 추가 ..)






좀 더 리얼하게 ? 그럼 UV 를 흘려볼까 ?( 물이 흐르는 듯한 느낌을 추가 ..)

더 ? 그럼 텍스쳐 여러 개 써서 서로 다른 방향으로 흘려보자꾸나 ~! ( 멀티텍스쳐링 )( 수면의 일렁이는 느낌을 나도록 추가 ..)





프로그래머가 셰이더에 접근할수 있게 되었다 !!


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







밑에 깔리는 텍스쳐 + 위의 물거품으로 사용할 텍스쳐 , 법선맵으로 사용할 텍스쳐 .기호에 맞게 , 그리고 게임특성에 맞게 좀 더 더하거나 빼면 됩니다유 ~!.

GPU 성능 up, 비디오 메모리 용량 up


gpu 성능도 올라가고 거기에 따른 비디오 메모리 용량도 커지니 이를 활용하기 위한 시도가 있었는데 가장 처음 구현된 것은 단순 loop 하는 법선맵의애니메이션을 오프라인으로 생성하여 렌더링할 때 사용하는 것 !!이 방식은 지금도 많이 쓰고 있는 방법 중 하나입니다유 ~!

굵직한 방법을 보면 sine 파를 이용하영 물에 wave를 주는 방법과noise 를 사용하여 자연스러운 잔물결을 만들어 내는 방식들이 있다 .



Mobile 에서 사용하기 위해 opengles 로 만듬 , Ogre 에 있는 Ocean 샘플을 참조 . 사용 : Sine Wave+blur+fake hdr+fresnel+reflectionReflection 맵이 마땅한게 없어서 지금은 빠져 있음 . 그리고……겁나 느림 . 아하하하하 .



핵심은 오프라인으로 생성한 법선맵의 애니메이션을 통해 일렁이는 잔물결을 표현하고자 한 것 .!법선맵의 반복적인 패턴을 자연스럽게 뭉그러 트리기 위해 법선맵의 스케일을 조절해서사용하는 방법을 사용하는데 위 스샷의 결과물도 3 가지 스케일로 사용하고 있다 .

조금 더 욕심 내 보기 . 내 컴 사양은 쩔거든 ~!


게임이 물에 대한 의존성이 높고 사양이 충분하다면 조금 더 욕심 내 볼 수도 있다 .즉 , 오프라인으로 미리 만들어 둔 법선맵을 사용하는 것이 아니라 동적으로 법선맵을 생성하여 사용하는 것이다 .법선맵은 높이맵으로부터 만들 수 있는데 결국 높이맵부터 동적으로 만들어야 한다는 뜻 .

조금 더 욕심 내 보기 . 내 컴 사양은 쩔거든 ~!


잔물결의 높이맵 생성에는 동적인 파동 시뮬레이션을 실시할 필요가 있는데이 때 사용하는 것이 베를레 적분법 이다 .베를레 적분법은 천의 시뮬레이션에서도 많이 사용되고 있는데간단하게 요약하자면 “이전 상태와 현재 상태의 차분 정보로 부터 속도를 산출해다음 상태를 구하는 이산적인 방법”으로 GPU 텍스쳐에 대해 실행하는연산모델에 적합하기 때문에 많이 이용된다 .

GPG : http://www.gpgstudy.com/gpgindex/#i7-88Nvidia Demo : http://www.nvidia.com/object/demo_tidepool.html

http://www.gpgstudy.com/gpgindex/

http://www.nvidia.com/object/demo_tidepool.html

http://www.nvidia.com/object/demo_tidepool.html

“ 물”과 “빛”의 관계 ..

물을 만들기 위한 이론 .

물을 물처럼 보이도록 하는 두가지 요소는 “시각”적인 부분 + “ 물리”적인 부분 이다 .

시각적인 부분에서 물은 투명하기 때문에 아래 밑 바닥이 보이는 투과현상이 있고주위 환경이 반사되어 보이며 잔물결에 빛이 반짝 거리기도 한다 .물의 움직임에 따라 물에 반사된 모습이 굴절되어 보이기도 하며추가적으로 물거품이 있을 수도 있다 .물에 돌을 던지면 파문이 일어 나기도 하고 물이 물의 압력에 wave 된다 .

“ 물”과 “빛”의 관계 ..


물이 환경을 비추고 반사(reflection)물의 물결에 따라 굴절(refraction)

“ 물”과 “빛”의 관계 ..


물의 바닥 부분이 투과(transmis-sion)

“ 물”과 “빛”의 관계 ..


거울과 같이 깨끗한 반사와물의 파문 (ripple).

“ 물”과 “빛”의 관계 ..


왜 이러한 현상들이 나타나는걸까 ?

바로 물은 항상 물 표면 (surface) 를 가지기 때문이다 .즉 , 물과 물 외부를 나누는 물 표면이 있고 이를 경계로 서로 다른 매질이기 때문에 빛의 이동이 다르다 .

그렇다면 물 표면은 빛을 어떻게 반사시키는가 ?반사 (Reflection) 이라는 말은 한 표면의 한쪽면으로 들어오는 빛이같은 쪽 면으로 반사되어 나가는 현상이며 들어오는 면과 반대쪽 면으로 나가는 현상을 Transmission 이라고 한다 .

“ 물”과 “빛”의 관계 ..


가운데 물 표면이 있다고 가정할 때 들어오는 빛 (Incident Light Beam) 이 있고물의 표면을 때리면서 같은 쪽 면으로 반사되어 나가는 BRDF, 그리고 반대쪽 면으로 반사되어나가는 BTDF 가 있다 .

반사되어 나가는 BRDF 와 투과되어 나가는BTDF 로 크게 나눌 수 있는데 이들의 상위 개념으로BSDF(bidirectional scattering distribution function) 이 있다 .

“ 물”과 “빛”의 관계 ..


BRDF 라는 개념이 왜 중요한가 ?

BRDF 는 단순하게 말하자면 입사하는 빛에 따른 반사하는 빛의 비율에 대한 함수 .물을 물처럼 보이기 위해 Lighting 라는 개념에서 렘버트의 단순함 만으로는사실적인 결과물을 만들기 어렵다 .렘버트는 빛이 입사하는 방향에 관계없이 모든 방향으로 같은 양의 빛을 반사한다고 가정 . 하지만 실제로 물을 본다면 물을 바라보는 위치에 따라 물의 빛의 반사정도나투과정도가 다르다는 것을 알 수 있다 .즉 , 특정 표면이 현재 내가 바라보는 시점과 빛과의 관계에 따른 특정값을얻을 필요가 있는 것이다 .

“ 물”과 “빛”의 관계 ..


BRDF 함수의 가시화

“ 물”과 “빛”의 관계 ..


BRDF 함수의 가시화

Lambertian model, Lommel Seelinger, Phong reflectance model, Blinn Phong model, Torrance Sparrow model, Cook Torrance model, Ward's anisotropic model, Oren Nayar model, Ashikhmin Shirley model, HTSG, Fitted Lafortune model, Lebedev model... 겁나 많음 . ㄷㄷ

“ 물”과 “빛”의 관계 ..


다양한 BRDF 이론적모델중 하나로 미립면(microfacet) 이론 .

평평해 보이는 면도 사실세밀하게 거친 표면이 있기 때문에거울처럼 완전 평면인 물체에서나타나는 정반사가 나타나는게아니라 각 미립자간의 상호 반사나표면물질의 자체적인 산란으로 인해빛의 반사가 희매해 진다 .

“ 물”과 “빛”의 관계 ..




“ 물”과 “빛”의 관계 ..




“ 물”과 “빛”의 관계 ..




요게 바로 겁나 중요한프레넬 항이다 .

“ 물”과 “빛”의 관계 ..


F 는 프레넬 .G 는 기하감쇠 계수 .D 는 미세면 분포함수 .

참고 : http://gamedevforever.com/35

요게 바로 겁나 중요한프레넬 항이다 .

http://gamedevforever.com/35

“ 물”과 “빛”의 관계 .. 그리고 프레넬 ..




물을 바라보는 관측자의 시야에서 바라보는물의 지점까지의 방향의 각도에 따른물의 투과 및 반사에 대한 관계 .



고개를 들어 멀리 있는 물을 볼 수록 투과률은 줄어들고 주위 환경의 반사율이 높아진다 .



고개를 들어 멀리 있는 물을 볼 수록 투과률은 줄어들고 주위 환경의 반사율이 높아진다 .

float base = 1 - dot(V, H);float exponential = pow(base, 5.0);float fresnel = exponential * F0 * (1.0 - exponential);specVal *= fresnel;

위의 공식으로 프레넬의 밝기를 계산할 수 있다 .





half3 GetMaterialEmissive(FMaterialPixelParameters Parameters){float3 Local1 = (UniformPixelVector_0.rgb * GetPerInstanceSelectionMask(Parameters));float Local2 = dot(float3(0.00000000,0.00000000,1.00000000),Parameters.TangentCameraVector);float Local3 = max((0.00000000),Local2);float Local4 = ((1.00000000) - Local3);float Local5 = ClampedPow(Local4,(3.00000000));float3 Local6 = (Local5 + Local1);return Local6;}



half3 GetMaterialEmissive(FMaterialPixelParameters Parameters){float3 Local1 = (UniformPixelVector_0.rgb * GetPerInstanceSelectionMask(Parameters));float Local2 = dot(float3(0.00000000,0.00000000,1.00000000),Parameters.TangentCameraVector);float Local3 = max((0.00000000),Local2);float Local4 = ((1.00000000) - Local3);float Local5 = ClampedPow(Local4,(3.00000000));float3 Local6 = (Local5 + Local1);return Local6;}

정리해봅시다 ~~~!잔물결을 표현하기 위해서 ~- 법선맵을 사용하여 범프맵핑을 한다 .

주위 정경을 비추기 위해서 ~- 화면반사를 위한 환경맵 텍스처를 사용한다 .

물의 특성 ( 시야에 따라 바닥이 보이거나 정경이 비치거나 ) 을 위해 ~- 라이팅 ( 프레넬 ) 을 적용해 준다 .

정리해봅시다 ~~~!잔물결을 표현하기 위해서 ~- 법선맵을 사용하여 범프맵핑을 한다 .

주위 정경을 비추기 위해서 ~- 화면반사를 위한 환경맵 텍스처를 사용한다 .

물의 특성 ( 시야에 따라 바닥이 보이거나 정경이 비치거나 ) 을 위해 ~- 라이팅 ( 프레넬 ) 을 적용해 준다 .

화면반사 ~~~!화면 반사를 위해서는 환경맵 텍스처를 사용한다 .

저퀄과 고퀄 ?- 정적 환경 텍스처와 동적 환경 텍스처

큐브와 구 ?- 여섯면을 가진 큐브로 전체를 감싼다 .- 어안렌즈로 본 것처럼 2D 이미지로 표현한

것을 쓴다 .

화면반사 (큐브맵 )~~~!큐브 환경맵은 현재 카메라의위치에서 90 도씩 회전하면서장면을 찍으면 된다 .

이렇게 총 6번을 찍은샷을 이어 붙이면 하나의큐브가 완성되고 UV 가자연스럽게 이어진다 .

http://telnet.or.kr/directx/graphics/programmingguide/advancedtopics/pixelpipe/envmap/cubicenvironmentmapping.htm

화면반사 ( 스피어 맵 )~~~!스피어 ( 구 ) 맵은 구 형태의 텍스처를 사용하는데 카메라 주위의 360 도의시야를 어안렌즈로 본 것처럼2D 로 표현한 것이다 .

어안렌즈란??

http://mwultong.blogspot.com/2007/04/fisheye-lens-gallery-flickr.html

http://mwultong.blogspot.com/2007/04/fisheye-lens-gallery-flickr.html

http://telnet.or.kr/directx/graphics/programmingguide/advancedtopics/pixelpipe/envmap/sphericalmap.htm

화면반사 ~~~!환경맵이란 모델 표면의 배경등이 비추는 모습을 재현하기 위해 사용하는 텍스처 .

정적 환경맵은 언급했던 방법 (큐브 , 스피어 )대로 만들어서 머티리얼에 설정하여사용하면 되지만 어느정도의 리얼리티를 감소해야 한다 .

동적 환경맵은 매 프레임 마다 생성하여 사용해야 하는데 리얼리티는확실히 증대되지만 그에 반비례하여 퍼포먼스가 떨어진다 .

http://www.youtube.com/watch?feature=player_detailpage&v=8fxZsUHD5A8



화면반사 ~~~!만약 수면에 비치는 주위 정경의환경맵을 동적으로 만들고자 한다면시점 위치를 수면에 대해서 반전시킨가상 시점으로부터 정경을 텍스처에그리면 된다 .

반사벡터 ~~~!수면을 렌더링 할 때 잔물결을 표현하기 위해 사용하는 법선맵으로부터법선벡터를 구하고 , 픽셀단위의 반사벡터를 구한 후 이에 따라 환경맵을샘플링 하면 된다 .

그렇다면 게임에서 사용하기 위한 반사 벡터는 어떻게 구하는 걸까 ?

반사벡터 ~~~!정반사를 기준으로 생각해 보자 .정반사는 이사벡터와 반사벡터의 크기가 같고 입사각과 반사각의 크기가 같다 .오른쪽의 그림을 보면 시야벡터 -E 와 법선벡터 n 이 주어졌을 때 반사벡터 R 은 시야벡터 – E 와 크기가 같고 입사각과 반사각이 같음을 알 수 있다 .

사람마다 개인취향으로 – E, L, I, V 등을 쓴다 .

반사벡터 ~~~!입사벡터 – E 의 역벡터인 E 를N 의 연장선상에 투영시킨 투영벡터 Dot(N,E)N 을 구한다 .

입사벡터인 – E 의 시작위치를 원점에위치시키고 여기에 Dot(E,N)N 을더하면 입사면에 투영된 벡터의 위치를 알 수 있다 .-E 에 Dot(E,N)N 을 더하면입사면에 투영된 위치를 , 두번 더하면 반사벡터R 을 구할 수 있다 .

http://toymaker.tistory.com/2

반사벡터 ~~~!반사벡터 R = -E + 2*Dot(N,E)*N그렇다면 R + E = 2*Dot(N,E)*N.

반사벡터 ~~~!반사벡터 R = -E + 2*Dot(N,E)*N그렇다면 R + E = 2*Dot(N,E)*N.

반사벡터 ~~~!렘버트 = Dot(L,N) 명암의 차이가 또렷하다 .

반사벡터 ~~~!평준화 렘버트 = Dot(L,N)*0.5 + 0.5 명암은 제대로 구분되지만 자연스럽지 않다 .

반사벡터 ~~~!하프 렘버트 = pow(Dot(L,N)*0.5 + 0.5, 지수 n)

반사벡터 ~~~!

반사벡터 ~~~! 요것도 만들어 볼까 ?

반사벡터 ~~~!반사 벡터 = -E + 2 * dot(N,E)N

반사벡터 ~~~!

Reflection Eye Reflection+NormalMap

반사벡터 ~~~!

반사벡터 ~~~!물을 구현하기 위해 필요한 반사 , 환경맵 , 프레넬까지 모두 알아보았다 .반사 ( 프레넬 ) 을 사용하여 빛을 ,환경맵을 사용하여 비치는 정경을 ,법선맵을 사용하여 잔물결을 표현하였다 .

반사벡터 ~~~!mix(watercolor, environmentmap*environmentcolor, fresnel)환경맵에 환경칼라를 곱한 값과물의 칼라값을 프레넬 기준으로적당히 섞어주는 것을 볼 수 있다 .

여기에 굴절벡터까지 더해주면한층 리얼하게 보인다 .

Thank U

Technology

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