아트스타일 잡아가기 +FOG에 대해

1. 아트스타일 레퍼런스

  • 최초에 아트스타일 레퍼런스는 젤다의전설 바람의택트 스타일로 잡았다. 그 느낌이 너무 좋아서였는데 사람은 간사하게도 다른걸 보며 또 다른걸로 끌리곤한다.
  • 더군다나 바람의택트를 넘어서는 야생의숨결의 아트스타일을 보고나니 도저히 그걸 따라하는게 어려울것같다는 생각이들었다.
  • 그러면서 마음에 들었던 스타일을 다른쪽으로 틀었는데, 그것이 바로 리틀데빌인사이드이다. 한국 형제가 만든 인디게임으로 2020년 말을 목표로 개발중인 게임이다. 최근소식을 보니 차세대 콘솔 PS5 기간독점게임으로 출시될예정인것같다.
  • 이 게임을 레퍼런스로 고른건 개인취향이기도하지만, 그나마 내가 구매한 에셋들과의 유사성, 모델링을 배우고있는 와중에 로우폴리곤으로 작업하는것과 그나마 어울릴것같다라는 생각에서 시작했다. 물론 인디게임이라고 쉬울거라고 생각안한다. 그냥 취향에 끌리는게 80%를 좌우한다.
  • 아래는 공개된 리틀데빌인사이드게임영상 스크린샷이다.

%E1%84%8B%E1%85%A1%E1%84%90%E1%85%B3%E1%84%89%E1%85%B3%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF%20%E1%84%8C%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%A1%E1%84%80%E1%85%A1%E1%84%80%E1%85%B5%20+FOG%E1%84%8B%E1%85%A6%20%E1%84%83%E1%85%A2%E1%84%92%E1%85%A2%205248779cec664747ba2f8ce82c35a033/Little_Devil_Inside_Racist_Enemy_Design_Screenshot.jpg

%E1%84%8B%E1%85%A1%E1%84%90%E1%85%B3%E1%84%89%E1%85%B3%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF%20%E1%84%8C%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%A1%E1%84%80%E1%85%A1%E1%84%80%E1%85%B5%20+FOG%E1%84%8B%E1%85%A6%20%E1%84%83%E1%85%A2%E1%84%92%E1%85%A2%205248779cec664747ba2f8ce82c35a033/little-devil-inside-cover-photo.jpg

%E1%84%8B%E1%85%A1%E1%84%90%E1%85%B3%E1%84%89%E1%85%B3%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF%20%E1%84%8C%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%A1%E1%84%80%E1%85%A1%E1%84%80%E1%85%B5%20+FOG%E1%84%8B%E1%85%A6%20%E1%84%83%E1%85%A2%E1%84%92%E1%85%A2%205248779cec664747ba2f8ce82c35a033/Little-Devil.png

2. Volumetric Fog와 Light Shaft의 필요성.

  • 위 스크린샷을 보면 특징적으로 보이는게 마치 공기원근법으로 그려진것과 같은 안개 이다.
  • 그리고 숲사이로 들어오는 빛 갈래.
  • 도대체 저런느낌은 어떻게 낼수있는건가? 그래서 일단 Unity Fog로 테스트를 해보았다.

%E1%84%8B%E1%85%A1%E1%84%90%E1%85%B3%E1%84%89%E1%85%B3%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF%20%E1%84%8C%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%A1%E1%84%80%E1%85%A1%E1%84%80%E1%85%B5%20+FOG%E1%84%8B%E1%85%A6%20%E1%84%83%E1%85%A2%E1%84%92%E1%85%A2%205248779cec664747ba2f8ce82c35a033/unityFog.png

  • Exponential Fog로 Fog color는 약간 푸른색으로 설정해보니 이런식으로 보인다. 물론 요 씬은 대충 효과를 보기위해 빠르게 만든씬이긴한데, 진짜 못생기게나온다.
  • 가장 거지같은건 Mountain 모델이 아닌 하늘영역. 즉 스카이박스부분에는 안개효과가 없다. 사실 하늘영역에는 Surface가 없기에 안개가 적용되지않는건 당연한 결과이긴하다. 그리고 Light Shaft(틈새빛살)가 존재하지않는다. 요 부분을 수정해줘야 좀 괜찮아질것같다.
  • 일단 요것을 수정하려면 원래 Fog가 어떤식으로 구현되는건지 리뷰가 필요할것같다.(다 잊어버림)

3. FOG

  • 안개. 수증기를 포함한 대기의 온도가 어떤이유로 내려가 이슬점온도에 도달할때 포함된 수증기가 작은 물입자가 되어 공중에 뜬상태. (위키백과)
  • 3D공간에서는 멀리있는물체는 포그색상과 비슷하게 보이게하고 가까이에있는 물체는 선명하게 보이게하는 기법이다. 안개효과는 멀리있는물체를 가려서 성능 최적화하기위해서 사용되기도하고, 게임디자인상으로 현실감을주거나 몰입도를 극대화하기위해 사용된다.
  • 종류에는 정점포그와 픽셀포그 두가지가있다. 정점포그는 정점단위에서 계산을 한후 면계산때 보간을 하는 형식이고 픽셀포그는 픽셀단위로 포그계산을 하는방식이다.
  • 그렇다면 뭘 어떻게 계산한다는걸까 ? 결국 물체가있을때 그 색을 어떻게 표현하는지를 정하는것이다. 그 물체색상과 포그색상사이에서 조절을 하는계산인것이다. 멀리있으면 물체색상보다는 포그색상으로 더 많이 보일것이고 가까이있으면 물체색상이 더 잘보일것이다. 즉 요런식이다.

최종색상= 포그계수물체색상 +(1-포그계수)포그색상

  • 이 포그계수를 어떻게 계산하느냐에 따라 방식이 나뉘는데 유니티에서는 기본적으로 3가지를 제공하고있다.

    %E1%84%8B%E1%85%A1%E1%84%90%E1%85%B3%E1%84%89%E1%85%B3%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF%20%E1%84%8C%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%A1%E1%84%80%E1%85%A1%E1%84%80%E1%85%B5%20+FOG%E1%84%8B%E1%85%A6%20%E1%84%83%E1%85%A2%E1%84%92%E1%85%A2%205248779cec664747ba2f8ce82c35a033/fog_settingUnity.png

  • Lighting Settings에서 아래쪽을 보면 다음과같이 Fog셋팅이 있는데, 이를 보면 Linear,Exponential, Exponential Squared. 요렇게 3가지가있는걸 확인할수있다.

  • 요 3개를 간단히 알아보면 다음과같다(그래프)

    %E1%84%8B%E1%85%A1%E1%84%90%E1%85%B3%E1%84%89%E1%85%B3%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF%20%E1%84%8C%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%A1%E1%84%80%E1%85%A1%E1%84%80%E1%85%B5%20+FOG%E1%84%8B%E1%85%A6%20%E1%84%83%E1%85%A2%E1%84%92%E1%85%A2%205248779cec664747ba2f8ce82c35a033/fog_factor.jpg

    • Linear (선형)

      \[f= \frac{end-distance}{end-start}\]
      • 카메라와 멀어지는 거리에 따라서 선형으로 적용하는 방식이다. 그래프에서보면 초록색선을 의미한다. 가장 직관적으로 이해할수있다. (거리가 가까우면 선명. 멀어지면 희뿌옇게. 그 변하는 정도는 동일. 그래서 직선(선형)으로 표현된다)
      • start는 포그가 시작되는거리. end포그가 끝나는 거리. distance는 거리를 의미한다.

    • Exponential (지수)

      \[f=\frac{1}{e^{d*density}}\]
      • 지수함수라고 생각하면된다. 현실세계의 안개와 비슷한안개를 표현하고있다.
      • e는 자연로그의 밑을 의미한다(극한값e). d는 시점에서의 거리. density는 0~1사이의 포그 밀도를 의미한다.
      • 그래프에서는 파란색선을 의미한다.

    • Exponential Squard(지수 제곱)

      \[f=\frac{1}{e^{(d*density)^2}}\]
      • 지수함수와 비슷하다 다만 가까운거리에서는 평탄하고 먼거리에서는 가파른 경사를가진다.
      • 그래프에서는 빨간색을 의미한다.
  • 종합적으로 기존 안개는 물체의 surface를 기준으로 그려주는 안개라는것이다. 그래서 저렇게 부자연스러운 효과로 나타날수있었다.

4. FOG방식에 대한 고찰

  • 기존 FOG방식은 3D공간 렌더링시에 카메라의 far plane밖에있어서 그려지지않던 오브젝트가 가까워졌을때 갑자기 나타나는 현상인 Pop-in 현상을 안보이게 도와주는 가장 좋은 방법이었다. 거기에 아트적으로도 현실공간처럼 공기-대기와같은 것을 나타낼수있어 굉장히 좋은 방법이었다.
  • 기존방식의 단점은 실제 안개 및 대기효과처럼 움직이는 게 불가능하다는것. 이를 빌보드를 이용한방식으로 보완할수있는데, 빌보드를 사용하게되면 땅과 같은 다른 surface와 겹칠때 잘리는 부분(hard edge)이 나타나는 문제가있다. 이를 보완하기위해서는 뎁스버퍼를 샘플링해서 빌보드의 투명도를 조정하는 방식(Soft Particle)을 사용할수있는데, 이경우에는 반투명 텍스쳐사용으로 인한 오버드로우가 생길수있어 퍼포먼스에 영향을 줄수있다.

%E1%84%8B%E1%85%A1%E1%84%90%E1%85%B3%E1%84%89%E1%85%B3%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF%20%E1%84%8C%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%A1%E1%84%80%E1%85%A1%E1%84%80%E1%85%B5%20+FOG%E1%84%8B%E1%85%A6%20%E1%84%83%E1%85%A2%E1%84%92%E1%85%A2%205248779cec664747ba2f8ce82c35a033/Untitled.png

빌보드 사용시 왼쪽처럼 잘리는현상이 발생할수있다. 오른쪽이 Soft Particle방식

  • 그리고 이 Soft Particle방식또한 한계가있는게 빛이 이 안개-대기를 통과할때의 모습을 표현하기가 어려운 한계가 있다. 이런이유로 Volumetric Fog 및 Volumetric Light가 등장하여 사용되고있다.

5. 그래서 어떻게 구현하면될까?

  • Volumetric Fog 및 Light관련 내용을 찾아보니 언리얼에서는 Fog옵션중 하나로 제공중이고 유니티는 HDRP사용시 옵션으로 제공하고있다.
  • Volumetric이란 표현처럼 이 방식은 전체구역으로 적용하는게아닌 하나의 Volume을 만들어 그 영역에서만 적용되는 방식이다. 이러한 방식을 구현함에있어서 일단 이해하기로는 두가지방식이 존재함을 알수있었는데(확실하지는않다) 첫번째는 포스트이펙트베이스방식, 다른하나는 Ray-marching방식이다.
  • 포스트이펙트베이스 방식은 언리얼이나 크라이엔진에서 사용중인 방식이라고 하는데 요 부분은 찾아봐야알것같다.이러한 포스트이펙트베이스 방식은 카메라가 빛을 향할때만 적용된다는 단점이 있다고한다. Ray-marching방식은 이해하기는 어려우나 대락적인 알고리즘은 이런식인것같다.
    • 1) 포그구현을 위해 노이즈를 샘플링한다.
    • 2) 그림자 맵을 샘플링한다.
    • 3) 빛을 적용한 포그에 블러를 적용한다.
    • 4) 이 포그객체를 스크린에 블렌딩하여 적용한다.

    %E1%84%8B%E1%85%A1%E1%84%90%E1%85%B3%E1%84%89%E1%85%B3%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF%20%E1%84%8C%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%A1%E1%84%80%E1%85%A1%E1%84%80%E1%85%B5%20+FOG%E1%84%8B%E1%85%A6%20%E1%84%83%E1%85%A2%E1%84%92%E1%85%A2%205248779cec664747ba2f8ce82c35a033/unnamed.jpg

  • 하하. 뭔소리일까. 일단 이 방식으로 만들어진것인지 확실하지는 않지만 에셋스토어에 여러 에셋이 존재한다. Volumetric Fog나 Volumetric light만 검색어로 입력해도 여러가지가 나온다.(혼자 구현하는것도 많은 도움이 되지만, 기억하자. 바퀴를 재발명하려고하지마라..)

  • 공통점은 모바일에서 쓰기에는 다 무겁다라는것. 허허…
  • 난 무엇을한걸까ㅋㅋ
  • 일단 내 게임은 다이나믹하게 날씨를 바꿀것을 상정하지않았고, 스트리밍씬을 활용한 오픈월드를 상정하지않았기에, 스카이박스를 포그색상에 맞게 조정하고, light Shaft만 수동으로 조정해보는 식으로 하는게 최선일것이라고 생각이 되었다.

  • 결론적으로는 일단 이 부분은 공부가 더 필요할듯하여 미뤄두고 다양하게 시도해보는걸로.. 따라서 요 포스팅은 미완성인 상태로 뭔가 더 진전이있으면 더 업데이트해야할것같다. 아쉽지만.

    %E1%84%8B%E1%85%A1%E1%84%90%E1%85%B3%E1%84%89%E1%85%B3%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF%20%E1%84%8C%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%A1%E1%84%80%E1%85%A1%E1%84%80%E1%85%B5%20+FOG%E1%84%8B%E1%85%A6%20%E1%84%83%E1%85%A2%E1%84%92%E1%85%A2%205248779cec664747ba2f8ce82c35a033/_2020-08-30__6.07.14.png

스카이박스색을 조정하고 포그칼라 및 포스트프로세스로 색조를 조절했을때의 모습. 성능을 고려하면 이렇게 씬마다 색을 조정하고, 여기에 Light Shaft를 넣어주는 방식이 나을것으로 보인다.

댓글남기기

참고