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

왜 물은
물처럼 보이는
Speaker : Mgun.

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

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

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

물을 만들기 위한 노력.
옛날 옛적에는 말이지….

프로그래머가 사용가능한 셰이
더가 등장하기 전..
그냥 적당한 물결모양의 반투명 텍스처를 폴리곤에
붙여서 사용합시다~!
(시각적으로 물의 느낌이 나도록…)

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

좀 더 리얼하게? 그럼 UV를 흘려볼까?
(물이 흐르는 듯한 느낌을 추가..)
더? 그럼 텍스쳐 여러 개 써서 서로 다른 방향으로 흘
려보자꾸나~! (멀티텍스쳐링)
(수면의 일렁이는 느낌을 나도록 추가..)

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

밑에 깔리는 텍스쳐 + 위의 물거품으로 사용할 텍스
쳐, 법선맵으로 사용할 텍스쳐.

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

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

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

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

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

“물”과 “빛”의 관계..
물을 만들기 위한 이론.
물을 물처럼 보이도록 하는 두가지 요소는 “시각”적
인 부분 + “물리”적인 부분 이다.
시각적인 부분에서 물은 투명하기 때문에 아래 밑 바
닥이 보이는 투과현상이 있고
주위 환경이 반사되어 보이며 잔물결에 빛이 반짝 거
리기도 한다.
물의 움직임에 따라 물에 반사된 모습이 굴절되어 보
이기도 하며
추가적으로 물거품이 있을 수도 있다.

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

물의 바닥 부
분이 투과
(transmission)

거울과 같이 깨끗한
반사와

왜 이러한 현상들이 나타나는걸까?
바로 물은 항상 물 표면(surface)를 가지기 때문이다.
즉, 물과 물 외부를 나누는 물 표면이 있고 이를 경계
로 서로 다른 매질이기
때문에 빛의 이동이 다르다.
그렇다면 물 표면은 빛을 어떻게 반사시키는가?
반사(Reflection)이라는 말은 한 표면의 한쪽면으로
들어오는 빛이
같은 쪽 면으로 반사되어 나가는 현상이며 들어오는

가운데 물 표면이 있다고 가정할 때
들어오는 빛(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)이론.
평평해 보이는 면도 사
실
세밀하게 거친 표면이
있기 때문에
거울처럼 완전 평면인
물체에서
나타나는 정반사가 나타
나는게

다양한 BRDF 이론적
모델중 하나로 미립면
(microfacet)이론.
평평해 보이는 면도 사
실
세밀하게 거친 표면이
있기 때문에
거울처럼 완전 평면인
물체에서
나타나는 정반사가 나타
나는게
요게 바로 겁
나 중요한
프레넬 항이다.

F는 프레넬.
G는 기하감쇠 계수.
D는 미세면 분포함수.
참고 :
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;
}

정리해봅시다~~~!
잔물결을 표현하기 위해서~
- 법선맵을 사용하여 범프맵핑을 한다.
주위 정경을 비추기 위해서~
- 화면반사를 위한 환경맵 텍스처를 사용한다.
물의 특성(시야에 따라 바닥이 보이거나 정경이
비치거나)을 위해~
- 라이팅(프레넬)을 적용해 준다.

화면반사~~~!
화면 반사를 위해서는 환경맵 텍스처를 사용한
다.
저퀄과 고퀄?
- 정적 환경 텍스처와 동적 환경 텍스처
큐브와 구?
- 여섯면을 가진 큐브로 전체를 감싼다.
- 어안렌즈로 본 것처럼 2D 이미지로 표현한 것
을 쓴다.

화면반사(큐브맵)~~~!
큐브 환경맵은 현재 카
메라의
위치에서 90도씩 회전
하면서
장면을 찍으면 된다.
이렇게 총 6번을 찍은
샷을 이어 붙이면 하나
의
큐브가 완성되고 UV가
자연스럽게 이어진다.

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

화면반사~~~!
환경맵이란 모델 표면의 배경등이 비추는 모습을
재현하기 위해 사용하는 텍스처.
정적 환경맵은 언급했던 방법(큐브, 스피어)대로
만들어서 머티리얼에 설정하여
사용하면 되지만 어느정도의 리얼리티를 감소해야
한다.
동적 환경맵은 매 프레임 마다 생성하여 사용해야
하는데 리얼리티는
확실히 증대되지만 그에 반비례하여 퍼포먼스가
떨어진다.

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

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

반사벡터~~~!
정반사를 기준으로 생각해 보자.
정반사는 이사벡터와 반사벡터의 크기가 같고 입사
각과 반사각의 크기가 같다.
오른쪽의 그림을 보면 시야벡터-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을 구할 수 있다.

반사벡터~~~!
반사벡터 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)
환경맵에 환경칼라를 곱한 값과
물의 칼라값을 프레넬 기준으로
적당히 섞어주는 것을 볼 수 있다.
여기에 굴절벡터까지 더해주면
한층 리얼하게 보인다.

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

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

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (7)

Featured

Featured (20)

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

Editor's Notes