[번역]The Fog of Random! Losf of Random 개발 사례.

원문

The Fog of Random (agentlien.github.io)

GitHub Pages

요즘은 페이지 번역기도 나쁘지 않기 때문에 간단히 그런 번역기로 문서를 봐도 되는 세상이 되었죠. 
아무튼... 
2022년 봄 개발팀 내에서 다양한 포그 효과 개발에 대한 이슈가 있을 때 여러가지 사례에 대해 조사 했던 적이 있습니다.  그때 읽어 봤던 토픽 중의 하나를 소개 하고자 합니다.

 

 

들여다보기...

Lost in Random을 개발하는 동안 우리 아티스트들은 종종 컨셉 아트나 다른 비하인드 스토리를 게시했습니다. 어떤 시점에서 누군가 코드 측면에서 비슷한 작업을 수행할 수 있는지 궁금해했습니다. 당시에는 상황이 조금 바빴지만 적용했던 아이디어가 정말 마음에 들었습니다.

제가 좋아하는 게임의 뒤를 엿보는 것을 좋아하는 저 자신을 보았기 때문입니다. 나는 그것에 보답하고자(?) 당시에 내 업적에 대해 조금 더 기술적인 글을 쓰고 싶었습니다. 1년 후 게임이 완성되고 마침내 나는 흥미로운 시각 효과에 무엇이 들어가고 그것이 우리 게임의 전반적인 모양을 형성하는데 어떻게 도움이 되는지에 대한 흥미로운 시각을 제공하는 간단한 토픽을 작성할 시간을 갖게 되었다.

A screenshot from Lost in Random

... 프로젝트 들여다보기

Lost in Random은 매우 특별한 비주얼 스타일을 가지고 있습니다. 그것을 달성하기 위해 많은 생각과 노력이 들어갔습니다. 내가 Zoink의 그래픽 프로그래머로 처음 합류했을 때 게임의 비주얼과 환경은 이미 꽤 멀리 떨어져 있었습니다. 내 일은 우리가 가지고 있는 것을 가져와서 목표 플랫폼에서 실제로 실행할 수 있는 것으로 만드는 데 도움이 되는 것이었습니다. 원래 구상했던 것을 보면서 작업을 충분히 빠르게 진행하는 것은 상당히 어려운 일이었습니다.

이 기사를 통해 이 미학을 형성하는 부분과 이에 관련된 작업에 대한 통찰력을 제공하고자 합니다. 이 독특한 모양을 만드는 많은 요소들이 있지만 여기서 이야기하고 싶은 것은 다채로운 안개의 사용입니다. 단순한 효과처럼 보일 수 있지만 전체 룩에 큰 영향을 미칩니다. 내 말을 이해하려면 안개가 활성화된 상태와 활성화되지 않은 상태에서 엔진 내에서 캡처된 이 스크린샷을 보십시오.

안개가 없는 것과 안개가 있는 동일한 풍경.

 

처음에 이 프로젝트는 Unity의 HDRP(High Definition Render Pipeline)와 내장된 Volumetric Fog를 사용했습니다. 그 기능들은 매우 멋지게 렌더링 되었지만 불행히도 여러 대상 플랫폼에 대해 너무 많은 계산 부담이 있음이 입증되었습니다. 예상대로 가장 큰 문제는 닌텐도 스위치였다. Switch는 훌륭한 플랫폼입니다. 게이머로서 아마도 내가 가장 좋아하는 게임 플레폼일 것입니다. 하지만 불행히도 가장 강력한 기계는 아닙니다.

몇 달 동안 다양한 옵션을 테스트하고 Unity 렌더러의 복잡성을 분석 한 후, 모든 플랫폼에서 더 간단하고 성능이 우수한 URP(Universal Render Pipeline)를 위해 HDRP를 포기하는 방식으로 결정했습니다. 우리는 덜 사실적인 조명에 대해 걱정했지만 프로젝트 리더는 실제로 단순화된 조명으로 인해 더 만화 같은 모습을 선호했습니다. 이것은 물론 더 이상 HDRP 포그를 사용 할 수 없음을 의미했습니다.

처음에는 이 포그를 URP로 이식하려고 시도했지만 그것이 주는 가치 보다 더 많은 문제가 있음이 판명되었습니다.

결국 우리는 안개에 대해 두 가지 다른 구현을 사용했습니다. 대부분의 플랫폼에서 사용되는 Volumetric fog 가 있습니다. 다른 하나는 스위치용으로 충분히 빠르도록 개발된 화면 공간 솔루션입니다. 흥미롭게도 우리는 모든 플랫폼의 시퀀스에서 이 화면 공간 솔루션을 사용하고 있습니다.

 

Volumetric Fog

고급 플랫폼에서 사용되는 볼류메트릭 포그는 Oniric Studio에서 개발한 자산인 Aura 2의 수정된 버전입니다.

Aura2 에셋은 기술적인 관점에서 HDRP에 내장된 에셋과 매우 유사하지만 아티스트는 원하는 방식으로 구성하는 것이 더 쉽다는 것을 알게 되었습니다. 누락된 몇 가지 기능을 추가하려면 몇 가지 작업을 추가 하여 URP로 파이프라인용으로 변환 하였다.

Aura 2를 URP로 변환하기 위해 Aura2 코드를 호출하고 결과를 프레임 버퍼로 blit하는 새로운 ScriptableRendererFeature를 만들었습니다. Camera.onPreCull 및 Camera.onPreRender콜백은 단순히 RenderPipelineManager.beginCameraRendering 콜백으로 변환되었습니다. 또한 투명 개체는 깊이 버퍼에 쓰지 않기 때문에 안개와 잘 어울리는 셰이더를 수정해야 했습니다.

Aura 2의 가장 큰 변경 사항은 HDRP 안개에 존재하는 방향성 빛 감쇠를 추가하여 깊은 안개로 내려갈수록 햇빛을 어둡게 만드는 것입니다.

아래 두 개의 이미지를 통해 그 기능을 사용하거나 사용하지 않을 때의 결과를 확인할 수 있다.

방향광 감쇠가 있거나 없는 자욱한 안개를 적용 한 장면.(좌측은 방향광 감쇠 없음)

이 효과는 우리가 Lit 셰이더에 적용한 많은 작은 변경 사항 중 하나입니다. HDRP의 LightEvaluation.hlsl에 있는 높이 감쇠에서 복사하여 URP의 Lighting.hlsl로 옮겼습니다. 필요한 유일한 추가 코드는 포그 볼륨 관리자가 현재 활성화된 모든 포그 볼륨에서 소멸 매개변수를 수집하고 평균화하는 것입니다.

 

Screen Space Fog

여러 플랫폼에서 시각적 스타일을 유지하기 위해 스위치에서 사용할 수 있을 만큼 충분히 빠르면서도 예상한 것과 최대한 비슷하게 보이는 안개가 필요했습니다. 수많은 기존 솔루션을 평가한 후 나는 스위치를 위해 특별히 의미하는 기하급수적인 높이 안개(Exponential Height Fog)를 작성하게 되었습니다.

이것이 의미하는 바는 높이 좌표를 사용하여 안개 색상과 밀도에 대한 지수 감소를 결정하는 화면 공간 솔루션이라는 것입니다. 안개 밀도와 보기 거리에 대한 깊이가 주어지면 안개 색상에 1.0 - exp(-depth * density)를 곱하여 거리 0.0에서 시작하여 보기 거리가 무한대로 갈수록 1.0으로 증가하는 계수를 제공합니다.

안개는 하위 레이어, 상위 레이어 및 스카이박스 레이어의 세 가지 레이어로 구성됩니다. 각 레이어에는 고유한 높이, 색상 및 밀도가 있습니다. 카메라에서 지정된 거리 이상이고 스카이박스 높이보다 높은 모든 것은 스카이박스 레이어의 색상에 적용된 이전에 언급한 지수 함수를 사용합니다. 그렇지 않으면 우리는 낮은 높이와 높은 높이 사이를 가로지르는 시야 깊이 부분을 계산하고 그것을 사용하여 안개 내부의 시야 높이를 계산합니다. 그런 다음 smoothstep(LowerHeight, UpperHeight, viewHeight)과 유사한 것을 사용하여 낮은 높이와 높은 높이 사이에서 역 lerp를 수행하고 결과 값을 낮은 색과 위쪽 색상 사이의 lerp 매개변수로 사용합니다. 이렇게 하면 이 두 값 사이에 안개가 그라디언트됩니다.

실제로 뷰 높이를 계산하는 두 가지 방법이 있습니다. 기본값은 단순히 카메라 위치에서 픽셀 중심을 통과하는 길이 깊이의 광선을 따라 도달한 높이를 취합니다. 이는 낮은 높이와 높은 높이 사이의 색상 그라디언트가 대부분의 시야각에서 하늘을 가로질러 명확하게 볼 수 있음을 의미합니다. 다른 옵션은 광선이 통과하는 평균 높이를 계산하는 것입니다. 이것은 더 부드러운 모양을 제공합니다.

우리 아티스트가 원하는 것을 설명할 때 어떤 옵션을 의미했는지 확신할 수 없었기 때문에 이 두 가지를 추가했습니다. 아이디어는 그들이 둘 다 테스트하고 "잘못된"것을 제거하도록하는 것이 었지만 철저히 테스트되고 비교된 후에 아티스트들로부터 둘 다 필요하다는 정보를 받았습니다.

사실, 일부 장면은 더 역동적인 모습을 위해 이 두 가지를 결합한 안개 볼륨으로 끝나기도 했습니다.

 

세 가지 모드

이 높이 기반 솔루션의 단일 인스턴스는 우리가 원하는 체적 버전에 가까워지기에 충분하지 않았습니다. 더 나은 결과를 얻기 위해 모든 장면에서 이러한 안개를 결합합니다. 안개는 렌더링 시기와 위치를 결정하는 세 가지 모드를 지원합니다.

• Global - 사용자가 모드가 있는 볼륨 안에 완전히 있지 않은 한 렌더링합니다. 이것은 장면의 전체 모양을 구성하는 데 사용됩니다.
• RenderWhileInside - 외부에서는 보이지 않으며 카메라 위치가 범위 내에 있을 때만 렌더링됩니다. 더 작은 영역에 대한 전역 모양을 재정의하는 데 사용됩니다.
• PhysicalObject - box로 렌더링되며 주로 지면을 가로질러 흐르는 안개 레이어를 형성하는 데 사용됩니다.

일반적인 장면은 하나 또는 두 개의 글로벌 포그 볼륨과 RenderWhileInside 또는 PhysicalObject 모드를 사용하는 약 12개의 볼륨을 사용합니다.

화면 공간 안개는 앞서 언급한 빛 감쇠도 지원합니다. 이것은 단순히 앞서 언급한 우리가 수정한 Aura 2 버전과 동일한 데이터를 Lit 셰이더에 제공한다는 것을 의미합니다. 실제로 안개 셰이더 자체에는 영향을 미치지 않습니다. 몇 가지 더 많은 정보(예: 햇빛이 안개 색상에 혼합되는 방식)가 있지만 전반적으로 카메라 변환 및 렌더 깊이 정보등만이 필요한 간단한 셰이더입니다.

소용돌이 치는 재미

내가 가장 좋아하는 작은 안개 기능은 행복한 놀라움이었고 실제로 화면 공간 버전에만 있습니다. 지면을 가로질러 흐르는 안개 볼륨의 상단을 따라 안개가 흩날리는 애니메이션 텍스처가 있습니다. 이 볼륨을 처음 구현할 때 날카로운 상자처럼 보이는 대신 안개 가장자리를 약간 흐릿하게 만들기 위해 간단한 노이즈를 추가했습니다. 또한 노이즈의 패턴을 덜 눈에 띄게 만들기 위해 애니메이션을 만들었습니다. 그런 다음 우리의 놀라운 환경 아티스트 Leo Brynielsson의 요청에 따라 텍스처에 대한 노이즈 기능을 교체했습니다. 나는 그가 나에게 코드를 변경하도록 요구하지 않고 자신의 노이즈 함수를 선택하기를 원할 것이라고 상상했습니다. 대신 그는 그것을 사용하여 다음과 같이 만들었습니다.

Wisps of fog on the Switch version of Lost in Random.

Random Rules!

이 토픽이 당신에게 흥미로웠기를 바라며 개발 뒷편에서 진행되는 멋진 구현에 대해 약간의 감사를 표하기를 바랍니다. 이것은 물론 안개가 어떻게 작동하는지에 대한 개요일 뿐입니다. 특히 성능과 관련하여 할 말이 많습니다. 그러나 그렇게 하면 토론이 상당히 길어질 것입니다. 이 게임에 참여하게 되어 매우 기쁩니다. 많은 분들이 이 게임을 즐기시기 바랍니다. Lost in Random은 2021년 9월 10일 PS4, PS5, Xbox One, Xbox 시리즈 X/S, PC 및 Switch용으로 출시됩니다.

역자 주.

알겠지만 번역문은 구글번역기를 토대로 했으며 전체 맥락을 이해할 수 있는 수준으로 교정 한 것입니다. 아시죠?

번역을 마칠 무렵 관련 된 reddit 토픽을 찾았다.

https://www.reddit.com/r/gamedev/comments/pky8zz/how_we_made_the_fog_for_lost_in_random/

From the gamedev community on Reddit: How we made the fog for Lost in Random