ue4의대규모배경제작사례 - 카페24 · ue4.17.2. 를사용하고있습니다....

V F X S T U D Y G R O U P

그그그 그그그 그 그그그그.

©2019 SQUARE ENIX CO., LTD. All Rights Reserved.

주식회사스퀘어・에닉스사이토오사무 요시오카쿠니토 스야마토시아키

UE4의대규모배경제작사례（드로잉・특수표현편）




약칭에대해

・『UnrealEngine4』를슬라이드내에서는『UE4』로표기하고있습니다.




목록

바다

하늘구름

지형

식물

눈

이(異)세계

파쇄

라이팅 섀도

각렌더링패스（데칼 포그 SSR SSAO）

포스트프로세스

자기소개/처음으로




お品書き

海

空雲

地形

植物

雪

異世界

破砕

ライティングシャドウ

各レンダリングパス（デカールフォグ SSR SSAO）

ポストプロセス





사이토 오사무


테크니컬 아티스트• 배경 만드는 방법 등을 생각하거나 서포트 하거나

• 처리부하를 보거나 대응하는 일을 하고 있습니다

요시오카 쿠니토 그래픽 프로그래머• 그래픽 전반에 대한 지원

• 그래픽 담당으로 참여하는 건 처음임

스야마 토시아키 • 그래픽 프로그래머

• 배경의 그래픽 이슈 지원

• 드로잉 관련 오류 조사·대응




• 처음으로


이번 사례에서는 UE4.17.2 를 사용하고 있습니다.때문에 최신 버전에서는 변경이나 수정이 돼 있을 수 있습니다.

또한다양한 엔진개조를 하고 있기 때문에,상황이 재현되지 않을 수 있습니다.




• 다음으로


이번 기회에 가능하면 많은 사례를 공유했으면 합니다.그 결과 많은 분들이 관여하게 된 부분도 있어

특수 사례의 나열이 되고 말았습니다.상세한 부분은 나중에 Q&A 혹은 개별적으로 질문 주시면 감사하겠습니다.




• 마지막으로


이번 배경 제작 사례는 많은 분들의여러 도움을 통해 달성할 수 있었습니다.아래 발표 사례에 대해 흔쾌히 협력해 주신 여러분께 깊은 감사의 마음 전하고싶습니다.

고토타모츠나카미치마사시나카켄고마츠오카히데키요시다타케시

마츠모토아키라하노노리토모치즈키노리츠구키무라요이치나카무라다이사쿠

모리타히데아키카와사키코지（존칭생략）




목록

바다

하늘 구름

지형

식물

눈

이(異)세계

파쇄

라이팅 섀도

각 렌더링 패스（데칼 포그 SSR SSAO）

포스트 프로세스





お品書き

바다

空雲

地形

植物

雪

異世界

破砕




自己紹介/初めに




필요 요건

바다그그그 그그그 그 그그그그.

・실사처럼 리얼하게・헤엄칠 수 있다・잠수할 수 있다・멀리 내다볼 수 있다・해전을 할 수 있다




사용한 기법

바다

・FFT・프로젝션 그리드・하이트맵 밀려오는 파도・굴절 확장・반사 확장




使用した手法

海

・FFT・プロジェクショングリッド・ハイトマップ打ち寄せ波・屈折拡張・反射拡張




Fast Fourier Transform

많은사인(sine)파를추가하면복잡한형상을만들수있습니다. 그것을고속으로계산하는방식이라해두도록하죠.

바다FFT





처리는

오른쪽 그림순서대로

이뤄집니다.

바다

FFT

초기 스팩트럼


Dx


Dy


Dz


디스플레이스먼트


노멀

X변위 스팩트럼

Z변위 스팩트럼

Y변위 스팩트럼




512*512의초기 스펙트럼분포 텍스처로부터

바다FFT

초기 스팩트럼


Dx


Dy


Dz


ﾃﾞｨｽﾌﾟﾚｲｽﾒﾝﾄ


ノーマル

X変位ｽﾍﾟｸﾄﾙ

Z変位ｽﾍﾟｸﾄﾙ

Y変位ｽﾍﾟｸﾄﾙ




XYZ 각 방향 별로경과시간 후의변위 스펙트럼 생성

바다FFT

初期スペクトル


Dx


Dy


Dz




ノーマル

X변위 스팩트럼

Z변위 스팩트럼

Y변위 스팩트럼




각 스펙트럼에IFFT를 실행하여,변위량을 산출

바다FFT



Dx


Dy


Dz




ノーマル







XYZ변위량을 합성해서,

디스플레이이스먼트를

생성

바다FFT



Dx


Dy


Dz




ノーマル







디스플레이이스먼트에서

경사를 줘서

노멀을 생성

바다FFT



Dx


Dy


Dz




노멀







이 디스플레이스먼트

와 노멀을

머티리얼 측에서

불러 사용하고 있습니다.

해상도는 512*512

입니다.

바다FFT



Dx


Dy


Dz




노멀







결과

바다FFT




이것으로, 바다의 외형은 만들어졌습니다.하지만, FFT는 GPU에서 실행되고 있고,이것을 CPU, 게임 측에서 사용할 수 있도록 할 필요가 있습니다.(안 그러면 캐릭터가 헤엄치거나 할 수 없습니다.)

바다FFT




CPU로 읽어 들이는 처리는

오른쪽 그림 순으로 이뤄집니다.

(Rendering Thread는

바다 시뮬레이션 뒤에

계속 처리)

읽어 들이는 처리는 비동기로

하고 있습니다.

바다FFT

RenderingThread

GameThread

Update Simulation

ReadbackRequest

Async TransferCompleted

AsyncTask

Ocean Simulation




RenderingThread

GameThread

Update Simulation

ReadbackRequest


AsyncTask

Ocean Simulation

바다FFT

불러들이기 리퀘스트 처리를하기 위해바다 시뮬레이션 결과의Displacement/Normal을별도 텍스처에 복사

드로잉 완료 확인용으로Occlusion Query를 생성해커맨드 리스트에 축적함




Query가 완료됨(=드로잉이 완료됨)

읽어들이기 리퀘스트가 있으면복사한 텍스처를매핑하여 어드레스를 보존

또한 동시에 GameThread에비동기 태스크로서CPU측에서 참조할 어드레스의갱신을 하게 한다

RenderingThread

GameThread

Update Simulation

ReadbackRequest


AsyncTask

Ocean Simulation

바다FFT




시뮬레이션 결과의

주소를 반영해,

레이캐스트 등으로 적절하게참조

RenderingThread

GameThread

Update Simulation

ReadbackRequest


AsyncTask

Ocean Simulation

바다FFT




이것으로 캐릭터가 헤엄칠 수 있는 바다가완성됐습니다.

하지만 광활하게 펼쳐진 범위 전체에

고밀도 폴리곤을

유지 할 수는 없습니다.

바다FFT





이것으로 캐릭터가 헤엄칠 수 있는 바다가완성됐습니다.

하지만 광활하게 펼쳐진 범위 전체에

고밀도 폴리곤을

유지 할 수는 없습니다.

바다FFT


→카메라에 비치는 범위만 바다를 만들자




使用した手法

海

・FFT・프로젝션 그리드・ハイトマップ打ち寄せ波・屈折拡張・反射拡張




카메라의 프러스텀을이용하여

보이는 범위만

그리드맵을 작성하고

있습니다.

•프로젝션 그리드란?

바다프로젝션그리드





투영하는 그리드는8장의 메시로 나눠져 있고,거리에 따라 줄이고 있습니다.










프로젝션 그리드는거리에 따라 머티리얼을전환할 수 있게 되어 있어,근경은 반투명, 중경은 마스크,원경은 불투명과 같은 방식으로구분해 사용할 수 있습니다.

또, 각각의 파라미터는

전용 머티리얼 함수(material function)에서

액세스 할 수 있게 되어 있어,

TA가 적절히 운용하고 있습니다.




이것으로 고밀도이면서고품질의 바다를완성했습니다






이것으로 고밀도이면서고품질의 바다를완성했습니다


→하지만 해안에 부자연스럽게 들이친다





使用した手法

海

・FFT・プロジェクショングリッド・하이트맵 밀려오는 파도・屈折拡張・反射拡張




•하이트맵 밀려오는 파도란?

바다하이트맵밀려오는파도


지형의 하이트맵을 이용해해안을 향해 들이치는 파도를만들었습니다.

또한 동시에 지형보다 높게해면이 올라가지 않도록제한하고 있습니다.





•하이트맵 밀려오는 파도란?

바다하이트맵밀려오는파도

또한 노이즈를 추가하거나월드 포지션 오프셋이나노멀을 조정해 자연스러운 파도로보이도록 하고 있습니다.

하이트맵의 해상도를 유지하기 위해섬마다 볼륨판정을 해서다르게 읽기도 합니다.




바다하이트맵밀려오는파도 그그그 그그그 그 그그그그.


또 파도의 형상은 이차원의 변위량을텍스처에 베이크해서그것을 참조하기도 합니다.이 부분은 컷 신 등으로사용했습니다.




使用した手法

海

・FFT・プロジェクショングリッド・ハイトマップ打ち寄せ波・굴절확장・반사확장




바다굴절확장


UE4의 리프랙션은배경에 넣게 되면이펙트와의 궁합이좋지 않습니다.




바다굴절확장


여기서배경용 리프랙션 처리를추가했습니다.

현재 프레임의베이스 패스의 씬 컬러를복사해 두고,그것을 왜곡하여 참조하는방식으로 구현되어 있습니다.




바다반사확장

또한 캐릭터가 바다에 들어가기때문에

반투명의 바다로 하는 것은

필수였지만,

퀄리티를 위해서 SSR이필요했습니다.




https://udn.unrealengine.com/questions/423378/%E5%8D%8A%E9%80%8F%E6%98%8Essr%E3%81%8Bfxaa%E3%81%AE%E5%A0%B4%E5%90%88%E9%BB%92%E3%81%8F%E6%BD%B0%E3%82%8C%E3%81%BE%E3%81%99.html

바다반사확장

하지만 UE4의 반투명 SSR은몇 가지 문제가 있어・FXAA에서는 사용할 수 없음(UDN으로 해결)・1프레임 앞의 버퍼를 사용하기때문에 카메라 전환 시 지연됨

・심도 판정이 느슨해 가까운 물체가비친다

・Surface Forward Shading에서사용할 수 없다

https://udn.unrealengine.com/questions/423378/%E5%8D%8A%E9%80%8F%E6%98%8Essr%E3%81%8Bfxaa%E3%81%AE%E5%A0%B4%E5%90%88%E9%BB%92%E3%81%8F%E6%BD%B0%E3%82%8C%E3%81%BE%E3%81%99.html




바다반사확장


여기서 반투명 SSR처리를 별도로 추가했습니다.굴절과 마찬가지로, 현재 프레임의 베이스 패스의 씬 컬러를 사용합니다.반사를 커스텀 노드에서 접근할 수 있기 때문에머티리얼 별로 반사 강도나 정확도 등을 조정할 수 있어 편리했습니다.




바다반사확장



또, 커스텀 노드가 복잡한 코드를 쓰는 데는 불편해서,ush를 include하는 기능도 추가 구현 했습니다.




바다반사확장



또한

흔히 쓰는 기법이라 생각하지만

아티스트가 드로잉을 할 때

반사상태를 조정하고 싶었기 때문에

큐브 맵을 참조하는 유사 반사도주요 부분에 사용하고 있습니다.




바다반사확장


반사와 관련해서는EV에 따라 외관이 변화하는 것을 피하고 싶었기 때문에,이미시브(Emissive)로의 EV카운터도 구현했습니다.




바다반사확장



이미시브 EV카운터는 머티리얼 프로퍼티로설정할 수 있도록 확장했습니다.

（머티리얼의 프로퍼티 메트릭스는 4.8부터 사용할 수 없지만https://udn.unrealengine.com/questions/258128/view.html

편의성을 위해 버그를 허용해 사용할 수 있도록 하고 있습니다. ）

https://udn.unrealengine.com/questions/258128/view.html




바다반사확장


또한 반사는 기본적으로는SSR을 사용하고 있지만컷 신 등에서 일부분은퀄리티 업 할 필요가있었습니다.

이 부분은 씬 캡처를사용해 반사를 구현했습니다.




바다반사확장



단, 씬 캡처의 부하가매우 높았기 때문에・해상도 제한・렌더링 패스 제한・렌더링 대상 제한을 적절히 했습니다.

또한 렌더링 대상 제한은제어하기 쉽도록 액터 측에렌더링 여부를 정하는 프로퍼티를추가했습니다.




바다반사확장


Planar Reflection은 사용하지 않았습니다.

엔진 확장에 의한 것인지

의도치 않은 발광 버그가 생기거나

셰이더 메모리의 증가를

피하고 싶었기 때문입니다.

수면 이하 클립에 대해서는

개별적으로 머티리얼 측에 마스크

처리를 추가하여 대응했습니다.http://api.unrealengine.com/JPN/Engine/Rendering/LightingAndShadows/PlanarReflections/

http://api.unrealengine.com/JPN/Engine/Rendering/LightingAndShadows/PlanarReflections/




お品書き

海

하늘 구름

地形

植物

雪

異世界

破砕








필요 요건

하늘구름

・구름이 움직이면 좋겠다・시간에 따라 변하면 좋겠다・세계관에 맞추어・리얼하게・툰(Toon)스럽게




필요 요건

하늘구름

여러 가지 요건이 있었기 때문에다양한 기법을 조합했습니다.

・구름이 움직이면 좋겠다・시간에 따라 변하면 좋겠다・세계관에 맞추어・리얼하게・툰(Toon)스럽게




사용한 기법

하늘구름

・2D노이즈 적층(stack)・플로맵・IBL 수정・렌더링・레이마치




使用した手法

空雲

・2D노이즈 적층(stack)・플로맵・IBL 수정・렌더링・レイマーチ




하늘구름2D노이즈적층


시간변화에 대응하기 위해,

노이즈 텍스처를 겹쳐서,

비켜놓거나 더하거나 늘어뜨려

프로시저(procedure) 한 2D

구름을 만들었습니다.

노이즈 텍스처를 6회×3층 샘플링한 고 퀄리티의 하늘이 됩니다.




하늘구름2D노이즈적층

3층의 구름은메시 측에서 구름의 고도를 고려한 UV를각각 작성한 것을 참조하고 있습니다.




하늘구름플로맵

또한바람의 방향에 맞춰서구름이 자연스레 흐르듯이플로맵도 사용했습니다.

2D노이즈 적층과 조합하여타임랩스 표현 등에도이용했습니다.




하늘구름IBL수정

또한각 로케이션,각 계절, 각 시간대별많은 360도 하늘(全天球) 이미지도촬영했습니다.

원래는 IBL용으로 촬영하고 있었는데,품질이 좋은 것은 약간의 수정을 거쳐스카이스피어 이미지에도사용했습니다.




하늘구름렌더링

Terragen이나 Houdini를 이용한

렌더링도 진행했습니다.

Terragen에서는 주로

스카이스피어용 스페리컬(spherical) 이미지를,

Houdini에서는 주로 구름 빌보드나

레이 마치용 3D텍스처 제작 등을

했습니다.




하늘구름렌더링

또한 각 HDR 이미지는 의도치 않은 에러를막기위해 피크 휘도를 4.0으로 억제하고 있습니다.




使用した手法

空雲

・2Dノイズ積層・フローマップ・IBL修正・レンダリング・레이마치




하늘구름레이마치

볼류메트릭(volumetric)한구름에 대한 요청도 있었기에레이마치 구름도 구현했습니다.

니즈로 보자면「들어갈 수 있는 구름」이였습니다.





운용에 관해서는,구름 한 덩이 당한 개의 BP을 배치해제어했습니다.

그림 패스는UE4의 반투명을확장했습니다.





레이마치 구름은 처리부하 대응에 의해1/4축소 버퍼로 렌더링하고 있습니다.

또 별도 버퍼에 각각의 구름 아이디도렌더링하고 있습니다.





그릴 때는축소버퍼와 ID버퍼를 사용해순차적으로 업 스케일 합성해나갑니다.

개별 아이디 버퍼를 사용하는 이유는구름과 구름 사이에다른 반투명(이펙트 등)이들어가는 것을 고려하기 위함입니다.





또 구름에는 캐릭터가 들어가야 할 필요가 있기 때문에뒷면 렌더링할 수 있도록 엔진 확장도 진행했습니다.





아티스트분들의 요청으로3D텍스처를 이용해임의형상으로 해보거나나선회전이동을 구현하기도했습니다.

레이 마치는 기본적으로국소적으로 사용되고 있지만,처리 부하는 최악의 경우2ms정도였습니다.




お品書き

海

空雲

지형

植物

雪

異世界

破砕








지형

지형은 기본적으로메시로 작성했습니다.

모듈애셋으로 조합하거나,특수한 지형은 원오프로 작성하기도했습니다.




지형

단 자연 지형에서는, 국소적으로랜드스케이프도 사용하고 있습니다.

그 이유는・콜리전(collision) 제작 코스트・피지컬 머티리얼 설정 코스트완화를 위함입니다.




지형

특히 피지컬 머티리얼은 다수의 설정을적절히 설정할 필요가 있기 때문에,랜드스케이프 레이어로설정할 수 있는 것은 편리했습니다




지형예를 들어 정점컬러의 색칠 구분은피지컬 머티리얼이 대응할 수 없는 경우가 많아,그 경우에는 수작업으로 오버라이드 볼륨(확장)을설치하게 되기 때문에, 랜드스케이프의 편의성에 의지했습니다.




지형

하이트맵 작성에 관해서는

houdini의 하이트필드도 사용했습니다.

대강의 지형을 메시로 작성 후,디테일 추가 등을 했습니다.




지형

또한 랜드스케이프 컴포넌트는캐릭터가 가지 않는 곳은어떻게든 삭제했습니다.

지형의 위치나 입자 크기에 따라별도 레벨로 나누어작은 단위의 랜드스케이프를 만들어운용했습니다.




지형또한 타일링감 완화를 위해 셰이더에서도 여러모로 검증했습니다.TextureBomb이라고 하는,많은 텍스처 샘플링을 해서 혼합하는 기법입니다.(UE4의 머티리얼 함수에도 있습니다. 운용 시에는 샘플링 수를 가변 할 수 있도록개조했습니다.)




지형

그그그 그그그 그 그그그그.그그그 그그그 그 그그그그.

WangTile이라는 랜덤 샘플링 기법도 검증했습니다.↓이런 텍스처를 만들어,랜덤 배치하는 것으로 타일링감을 완화합니다.




지형

그그그 그그그 그 그그그그. 그그그 그그그 그 그그그그.


이러한 특수 텍스처는SubstanceDesigner등에서 적절하게 작성을 자동화했습니다.




지형


지형의 푹 들어감 완화에는,하이트맵을 이용한 조정을 하기도 했습니다.




지형그그그 그그그 그 그그그그.


또한 국소적으로는픽셀 뎁스(depth)를 이용해어우러지게도 했습니다.(디스턴스필드는메모리나 처리부하의 관점에서사용하지 않았습니다.)




지형


시차도 사용하고 있습니다.패럴랙스 오클루전(Parallax occulusion)은 무거운 것과 적층감으로 문제가 생겼었기때문에,콘스텝맵이라는 사전 계산 텍스처 하나를 추가한릴리프(relief) 매핑을 구현했습니다. (POM도 사용하고 있습니다.)




지형콘스텝맵은그 위치에서 가장 가까운 교(차)점의 거리 정보가 베이크 돼있습니다.그것을 이용함으로써 정밀하게, 고속으로릴리프 매핑을 할 수 있는 기법입니다.

https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch18.html

https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch18.html




お品書き

海

空雲

地形

식물

雪

異世界

破砕








식물


식물은 기본적으로 SSS나 TwoSidedFoliage를 사용해 양면화,정점 오프셋을 사용해 바람의 흔들림이나 쓰러진 풀 등구현하고있습니다.




식물



쓰러진 풀은 전용 BP를 배치하여,머티리얼 파라미터 컬렉션에캐릭터 위치나 범위 등이 전달됩니다.그것을 머티리얼 쪽에서 사용하는 것으로구현되어 있습니다.동시에 판정 가능한 캐릭터 수는6개까지입니다.




식물



바람의 흔들림은 노이즈 베이스,흔들릴 때는 정점컬러나 UV에흔들리는 정도를 나타내는그라데이션을 넣어 두고,자연스럽게 흔들리도록 조정하고있습니다.

약간의 Tips를 드리자면VertexInterpolator를 사용하면,인스턴스화 된 경우에도각각의 인스턴스의피벗(pivot) 위치를 얻을 수있습니다.




식물


또한 식물은 그림자 모델도 사용합니다.대략 1/5정도의 폴리곤 수로 그림자 모델은 작성하고 있습니다.그림자가 거의 다 드리워진 곳에는 하나의 플레이트 그림자 모델도 사용하고있습니다.덤불 등은 간이 그림자 모델로 대체하기도 합니다.




식물


스피드 트리도 사용하고 있습니다.바람의 흔들림도 스피드 트리의기능을

그대로 사용하고 있습니다.

(UV8채널이 사용돼버리는데

제작비용을 감안해서

사용하기로 했습니다.)




식물


그그그 그그그 그 그그그그.스피드 트리를 사용하지 않는 나무의바람 흔들림에 대해서는,Houdini로 부모-자식 피벗을자동으로 넣을 수 있는 HDA를 작성해,MAYA나 houdini로 운용했습니다.




식물그그그 그그그 그 그그그그.


폴리지(foliage)도 사용하고 있습니다. 하지만,되도록 사용하지 않도록 하고도 있습니다.(미세 조정하기 어렵고, 데이터 가시화의어려움,버그가 많은 등의 이유입니다.)

또한컬링이 덩어리로 처리돼 버리기 때문에거리에 따라 지면에 묻어서 (정점 오프셋)자연스럽게 전환 되도록 있습니다.




식물


최종 LOD에는 인포스터도 사용하고 있습니다.작성은 UE4의 RenderToTexture_LevelBP를 사용하고 있습니다.1회전축에서 8*8패턴, 1024*1024의 BaseColor,트리플 마스크, 노멀의 3장으로 운용하고 있습니다.




식물그그그 그그그 그 그그그그.

또한 인포스터에 대해서는라이트 맵을안정적으로 굽는 게 어려웠기때문에LOD0에 베이크용 판자를 넣어서,그것을 참조시켰습니다.




お品書き

海

空雲

地形

植物

눈

異世界

破砕








눈그그그 그그그 그 그그그그.

•필요 요건

・캐릭터가 걸으면 움푹패인다




눈


눈 패임은들어가게 하고 싶은 에리어를 박스로감싸면,그 영역이 SceneCapture2D에 의해바로 아래부터 심도 렌더링이 됩니다.

그 후 얻은 심도를 가공하여시차매핑용 텍스처를만들어 구현하고 있습니다.




눈그그그 그그그 그 그그그그.



처리의 흐름은,1. 지형의 심도 렌더링2. 캐릭터의 심도 렌더링3. 별도 버퍼에시차용 텍스처를 작성

이라는 순서입니다.




눈



제반 처리는 BP로 작성되어 있고,BP에는 지형용과 캐릭터용 각각의SceneCapture2D가 2개,텍스처 작성&가공은DrawMaterial ToRenderTarget으로짜여 있습니다.




눈


시차 머티리얼은 UE4의 ParallaxOcclusionMapping을 사용하고 있습니다.




눈

발생한 문제




눈

그그그 그그그 그 그그그그.・1F지연 문제BP에서의 texture 가공 처리가,신 캡처의 렌더링보다먼저 이뤄지기 때문에 1F 뒤처지게 된다.↓회피하기 위해 캡처 직후UpdateDeferredCaptures(FSceneInterface* Scene) 중인Update Scene Capture Contents의처리 후 BP이벤트로브로드캐스트하고 있습니다.BP측에서는 그 이벤트를 바인드해서텍스처 가공을 하고 있습니다.




눈

・눈 버퍼클리어 대응일정 이상 캐릭터위치가 움직인 경우버퍼클리어 하고 있습니다.(컷 신 등으로 캐릭터의 서 있는 위치가순식간에 바뀌는 경우가 있기 때문.)

강제적으로 클리어하는 BP노드 등도사용했습니다.

・광활한 지형에 대한 대응광활한 지형에서는 캡처 위치를항상 플레이어에 추종하도록갱신했습니다.렌더링 범위의 가장자리 부분은페이드 해서 서서히 사라져 갑니다.

・고속 이동의 보간(補間)미끄러지는 듯한 이동으로 속도가 빠르면얼룩덜룩 부자연스러운 패임이 되기 때문에특정모션만 심도 드로잉용리본 파티클을 보내고 있습니다.

또, 눈 패임의 범위는 상황에 따라 적절히 조정하고있으며,대략 50m~100m의 범위,텍스처 해상도는 512~768정도입니다.강한 제약으로 움푹 패인 영역에서는 지형의 오버행은금지되어 있었습니다




눈


또, 눈의 시스템을 활용해모래사장이 썰물로 젖는 부분도구현했습니다.




눈


눈의 셰이더에는, 스노우 플레이크의 요청도 있었기 때문에,그리드 베이스의 스노우 플레이크를 구현했습니다.참고 URL:http://advances.realtimerendering.com/s2015/




お品書き

海

空雲

地形

植物

雪

이(異)세계

破砕








이(異)세계


필요 요건

・이(異) 세계에 연결된포털・안에 들어갈 수 있다




이(異)세계

사용한 기법

・공간 큐브맵

・평면 레이마스크

・감산 메시




異世界

使用した手法

・공간 큐브맵

・평면 레이마스크・減法メッシュ




이(異)세계공간큐브맵 그그그 그그그 그 그그그그.


평면이면 들어가 버리기 때문에공간매시에 큐브맵을 붙였습니다.또한 셰이더 측에서 공간의 기울기나,위장 퍼스(pers) 조정 등도대응했습니다.




이(異)세계공간큐브맵


평면이면 들어가 버리기 때문에공간매시에 큐브맵을 붙였습니다.또한 셰이더 측에서 공간의 기울기나,위장 퍼스(pers) 조정 등도대응했습니다.

→그러나 이대로라면,옆에서 봤을 때 삐져나온 게 보여버린다.




이(異)세계평면레이마스크

P

P0

V

N

Ray : P = P0+tVPlane: P・N+d = 0

(P0+tV)・N+d = 0t = -(P0・N+d)/(V・N)P = P0+tV


여기서 평면에 대한 레이판정을 해서포털 범위에서 벗어나면마스크 하도록 했습니다.




이(異)세계평면레이마스크

여기서 평면에 대한 레이판정을 해서포털 범위에서 벗어나면마스크 하도록 했습니다.

→공간 큐브맵의 안쪽에벽 등이 있으면 들어가 버린다.





異世界

使用した手法

・空間キューブマップ・平面レイマスク・감산 메시




이(異)세계감산메시


뒷면 렌더링한 메시로뎁스를 덮어쓰기 하는 것으로,메시형상으로 깎아내는 듯한그림을 그릴 수 있습니다.




이(異)세계



TStaticDepthStencilState<false, CF_DepthFartherOrEqual, // reverse depth-testtrue, CF_NotEqual, SO_Keep, SO_Keep, SO_Decrement, // front-face stencil-testtrue, CF_NotEqual, SO_Keep, SO_Keep, SO_Increment // back-face stencil-test

>::GetRHI(), 0x00

감산에 사용하는 메시는뎁스 테스트를 역전시켜,(들어간 부분만 그림)양면그리기를 해서, 스텐실로 교차돼있는 부분만을 추출합니다.

그 후, 추출한 부분에뒷면의 뎁스를 그려 넣어,마지막으로 추출 시에 부서진 스텐실을원상회복하면 완료입니다.

감산 메시




이(異)세계감산메시


감산 메시에서,공간 큐브맵에들어가 있는 메시를 깎아내는 걸 통해,비로소 위화감 없는이(異)세계의 문이 구현됐습니다.




お品書き

海

空雲

地形

植物

雪

異世界

파쇄








사용 기법

파쇄

・이펙트 교체

・부서진 메시 교체

・본 애니메이션

・정점 오프셋 파쇄

・시뮬레이션 애셋




使用した手法

破砕

・이팩트 교체・被破壊メッシュ差し替え・骨アニメ・頂点オフセット破砕・シミュレーションアセット




파쇄이펙트 교체


대미지를 주면 그 순간파편이 흩날리는 이펙트로교체합니다.→외관과 타이밍,처리 부하의 조정이 용이합니다.

파편의 콜리전 판정은들어있거나 들어가 있지 않거나적절히 조정하고 있습니다.




파쇄이펙트 교체



단, 이펙트로 교체만 해서는부자연스럽게 남는 경우가 있기 때문에,

한쪽이 깨지면 다른 한 쪽에통지를 보내 동시에 부수는방식도 사용하고 있습니다.(BP로 대상 액터를 지정해서 부수고 있습니다.)




使用した手法

破砕

・エフェクト差し替え・부서진 메시교체・骨アニメ・頂点オフセット破砕・シミュレーションアセット




파쇄부서진 메시교체


이펙트 교체로는 좀위화감이 큰 것에 사용하고 있습니다.(거대한 바위라던가.)

부서진메시는 LOD를 사용할 수 없는 등의문제가 있기 때문에,콜리전 히트한 타이밍에스태틱 메시에서부서진 메시로 갈아 끼우고 있습니다.

부서진 메시는 UE4내에서 작성하고 있습니다.(apex는 검증했습니다만작성 비용 때문에 사용하지 않았습니다.)




使用した手法

破砕

・エフェクト差し替え・被破壊メッシュ差し替え・본 애니메이션・頂点オフセット破砕・シミュレーションアセット




파쇄본애니메이션

그그그 그그그 그 그그그그.의도된 파쇄 애니메이션이

필요한 경우는 본 애니메이션으로구현했습니다.

작성수단은 houdini의 RBDtoFBX,

MAYA의 Pull DownIt 등 입니다.

강체(剛体) 시뮬에는

VertexAnimationTexture를

사용하지 않았습니다. VAT가 아니라 본으로 베이크한 이유는애니메이션 압축의 효율이 좋기때문입니다.(CPU 부하보다 메모리를 우선했습니다.)





그그그 그그그 그 그그그그. 그그그 그그그 그 그그그그. 그그그 그그그 그 그그그그.

본 애니메이션에 대해서는 모델이나 머티리얼에서도 여러 시도를 했습니다.자연스러운 파쇄를 하기 위해,애니메이션에 맞춰 매끄러운 노멀을 블렌드 하거나,






엣지에 전용 UV를 준비해서, 폴리곤을 줄이거나정점컬러를 넣어, 머티리얼을 조정하기도 했습니다.




使用した手法

破砕

・エフェクト差し替え・被破壊メッシュ差し替え・骨アニメ・정점 오프셋 파쇄・シミュレーションアセット




파쇄정점오프셋 파쇄


게임의 상황에 따라 파쇄하고 싶다는요청이 있었기 때문에,머티리얼에서의 정점 오프셋 파쇄도했습니다.

파편에는 각각의 피벗 위치가UV에 저장되어 있으며,게임 상황에 따라 변하는렌더 타깃을 참조해,파편마다 트랜스폼을 해서구현하고 있습니다.




使用した手法

破砕

・エフェクト差し替え・被破壊メッシュ差し替え・骨アニメ・頂点オフセット破砕・시뮬레이션 애셋




파쇄시뮬레이션 애셋


파쇄와는 조금 다른 이야기이지만,Simulate Physics를 사용하는 것에 대해서는전용클래스에 여러가지 필요한 프로퍼티를추가해 운용했습니다.

기본적으로 평상시에는 sleep 시켜놓고wake하면 시간, 거리, 데미지를보고 사라지게 되어 있습니다.




お品書き

海

空雲

地形

植物

雪

異世界

破砕

라이팅 섀도







라이팅




라이팅채택기법


라이트매스에 의한 베이크가 주를 이루고 있습니다.스테이셔너리를 메인, 스태틱을 보조로.무버블도 일부분 사용했습니다.






라이트 부분은 기본적으로라이트리그라 불리는 BP로 운용하고 있습니다.

디렉셔널 라이트(스테이셔너리),스카이 라이트 (스태틱),스카이스피어(天球)를 하나로 묶고 있으며,태양의 위치나 직접광 간접광의 휘도차방향 등이 알맞게 설정되어 있습니다.





그그그 그그그 그 그그그그. 그그그 그그그 그 그그그그. 그그그 그그그 그 그그그그.

또한 이전에 「Lightmass Deep Dive」의조도 베이스라이팅에서「현실 기준의 라이팅을 하고 있다」고발표했습니다만 그 후 형태를 바꿨습니다.







그 이유는 발표 후아주 우수한 라이팅 전담자가 들어와서,라이팅팀이 설립되었고페인팅 워크플로를 정리했기 때문.

사용하고 있던 EV의 폭도,현실 베이스의 10에서 5정도로 제한해현실 베이스의 기법을 전제로 하면서페이팅을 염두 해 변경해간 형태라 할 수 있습니다.

(현실 베이스의 너무나도 넓은 EV폭은 작업에지장이 있었기에 아주 도움이 되었습니다.)




라이팅기능확장

또한 라이팅팀이 생긴 덕에니즈에 맞춘 다양한 기능이 확장되었습니다.






각 레벨 단위로 라이트매스의품질조정을 하고 싶었기 때문에,Lightmass.ini를 월드세팅에서설정할 수 있게 했습니다.

특히 그림자와 포톤,PLV 부분의 파라미터는레벨 별로 적절하게 조정 하고 있습니다.






또한 지정한 라이트에 대해,Intensity나 Temperature의랜더마이즈를 할 수 있게 하거나,루멘값에서의 직접 수치 입력이힘들기 때문에라이트에 대해 EV(계수) 제어를할 수 있도록 확장했습니다.






컷 신의 라이팅은품질 향상 시 매우 중요했기 때문에,마티네에 라이트 제어용전용 트랙도 추가했습니다.

제어하고 싶은 라이트에태그를 설정해 두는 것으로레벨에 배치되어 있는 라이트를직접 제어할 수 있습니다. Intencity나 캐스케이드 거리, 매수,

MinRoughness, shadow 부분의 프로퍼티등 컷 단위로 키를 눌러조정합니다.




라이팅라이트 펑션


라이트 펑션도

적절히 사용하고 있습니다.

구름에 의한 그림자, 코스틱스(caustics),

적색 등, 영상의 투영 등에도

사용했습니다.




라이팅라이트 펑션


라이트 펑션에서 한가지 곤란했던 건SSS에 대해서는 마스크 처리가되지 않았습니다.

이 부분은 확장해서 마스크 처리도고려할 수 있도록 했습니다.




라이팅라이트 시나리오


라이트 시나리오는 광범위하게사용하고 있습니다.

단, 동일 레벨로 각 환경을라이트 시나리오화 해서 베이크하면,베이크 할 필요가 없는 곳도데이터를 가지게 되기에베이크 전용 퍼시스턴트 레벨로쪼개서 개별적으로 베이크했습니다.





라이팅라이트 시나리오

개별적으로 베이크할 때의주의점으로는

PLV를 사용하고 있는 경우,PLV는 퍼시스턴트 레벨에도데이터가 보관되기 때문에베이크한 퍼시스턴트 레벨도모두 보이도록 해둘 필요가 있습니다.




PLV에 대해선 여러모로 고생했습니다.

라이팅PLV




라이팅PLV 퍼시스턴트에 남는 문제


조금 전에도 말씀 드린 것 같지만PLV의 데이터는 퍼시스턴트에도보관됩니다.

그래서 의도하지 않은 레벨에라이트 빌드 돼 있었을 경우,PLV가 쓰레기 데이터로그 레벨에 남게 됩니다.

메모리도 먹고,드로잉 오류로도 연결됩니다.






레벨은 각 섹션별로작성, 운용되고 있으며,레벨 총수는 2000을 넘고 있었습니다.

그 중에는 developer 폴더로테스트했던 레벨을 복사해서정규 데이터화한 것도 있어의도치 않은 쓰레기가 많이 남아있었습니다.






그래서 2000레벨 모두pkginfo를 걸어,내역을 확인했습니다.

MapBuildData Registry와같은 것들이 주로 PLV입니다.수십MB 정도의 쓰레기가발견되기도 했습니다.




라이팅PLV 박힘 문제


또 PLV는서피스의 경계부분일 경우검은 PLV를 만듭니다.

정말 난감합니다. 여기에 캐릭터가 서게 되면갑자기 어두워집니다.




라이팅PLV가 부족하거나 or 너무 많은 문제


또 반대로 공중 등 필요한 곳에만들어지지 않기도 합니다.

볼륨의 변형이나 회전에대응하지 않았거나,의도치 않은 곳에 쓸데없이많이 만들어지는 경우도 있습니다.

Lightmas.ini에서 여러모로 시험해보았지만의도대로 동작하지 않는 경우가많았습니다.




라이팅PLV운용


그래서 PLV의 운용은 아래와 같이 했습니다. SurfaceSample은 사용하지 않는다. Detail Sample만 사용한다.(SurfaceSample은 의도치 않은 밀도의 PLV를 배치하는 경우가 많았기 때문)




라이팅PLV운용


또 볼륨 별로PLV 밀도를 변경할 수 있게하거나,변형이나 회전에대응할 수 있도록확장했습니다.




라이팅PLV운용


또, PLV에 스태틱 라이트의 직접광 성분이 들어가게 돼서발광하는 일이 있었기 때문에직접광 영향을 온 오프할 수 있도록 확장했습니다.




라이팅ILC지연


또 PLV의 휘도 차이는ILC의 지연을 불러일으켜,여러 곳에서 문제가됐습니다.

이 부분에 대해서는적절하게 Transition Speed를조정하거나,ILC를 강제 갱신하는 함수등을 확장하여대응했습니다.




라이팅무버블 애셋이 떠오른다


또 PLV는 메모리 절약을 위해필요 최소한 아슬아슬할 정도로 줄이고있으며

정확도 문제 때문에배경의 무버블 애셋이 떠오르는경우가 많았습니다.

이 부분은 셰이더 측에서페이크인 섀도를 베이크하거나,이미시브로 간접광을조정하는 등 해서 어우러지게 했습니다.




라이팅라이트 맵 익스포트



또 외부 DCC로라이트 맵을 보낼 수 있도록확장도 했습니다.

본래 이펙트와 배경이라이팅의 차이로 어우러지지 않는부분이 있었기 때문에,이 정보를 이용해서조정 할 생각이었는데,운용이 빠듯해서 결과적으로수작업으로 어우러지게 했습니다...




라이팅라이트 맵 익스포트

그그그 그그그 그 그그그그.라이트 맵을 익스포트해서얻은 약간의 Tips을 드리자면UE4의 라이트 맵은색과 휘도로 나눠서 8bit 텍스처로쓰고 있기 때문에실질적으로 16bitHDR정도의 정보가포함되어 있습니다.

이 때문에, 해상도 512의애셋이 있을 경우,2배인 1024해상도의라이트 맵이 필요하게 됩니다.




섀도




섀도채택기법

그그그 그그그 그 그그그그.섀도는 캐스케이드와캡슐섀도가 메인입니다.

캐스케이드는 기본 2장. (4K*2K)PerObjectShadow는 기본적으로 오프지만퀄리티가 필요한 곳이나특정 오브젝트에서만 사용하고 있습니다.

디스턴스필드,콘택트섀도는 사용하지 않습니다.처리 부하와 메모리가 부담됐기 때문입니다.




섀도캡슐섀도


캡슐섀도는사용빈도가 높았기 때문에스태틱 메시에직접 붙일 수 있도록확장하였습니다.

처음에는 캡슐섀도용별도 컴포넌트를추가하고 있었는데,컴포넌트를 늘리는 것이별로 즐겁지 않았기 때문에확장하게 되었습니다.




섀도캡슐섀도



또 캡슐섀도는레벨 별 혹은컷 신의 컷 별로세세한 조정을 하고 싶었기 때문에포스트 프로세스 볼륨에제어 파라미터를산출했습니다.




섀도그림자 해상도


그그그 그그그 그 그그그그.또 그림자의 해상도는 품질조정을자세히 하고 싶었기 때문에오브젝트 단위,라이트 단위로 설정할 수 있도록확장했습니다.




お品書き

海

空雲

地形

植物

雪

異世界

破砕


각 렌더링 패스（데칼 포그 SSR SSAO）






데칼




데칼


데칼은D버퍼를 사용하지 않습니다.(메모리와 처리부하대응을 위함)그래서 여러모로 고생했습니다.




데칼


D버퍼를 사용하지 않을 경우,데칼은 Static Lighting 성분이제대로 반영되지 않습니다.(투과하거나,그림자 속에서 사라지기도 합니다.)




데칼그그그 그그그 그 그그그그.

그래서 StaticLighting 성분을무시하고 강제로 덮어쓰기가 되는블렌드 모드를추가하였습니다.





데칼그그그 그그그 그 그그그그.

하지만 그래도 새까만 건 위화감이 있어서,적절하게 이미시브로 끌어올리기도 했습니다.

노멀을 고려해서 유사 라이팅 등도했습니다.(전부 각각 수작업으로 개별 조정했습니다...)






데칼


또 데칼의 페이드 폭에위화감이 있을 경우 조정 가능한파라미터도 확장했습니다.




데칼



데칼에서 시차를 다루기 위해탄젠트에 대한 고려를 확장하거나,ReceiveDecal이 오프로 돼 있어도캐릭터 이외는 강제적으로 칠해버리는옵션 등도 확장했습니다. (주로 이펙트용)




포그




포그


포그는 기본적으로하이트 포그뿐입니다.대기(大氣)포그는 무거워서 사용하지않습니다.

볼륨 포그는 보기에 예쁘기 때문에주요 부분에 사용했습니다.설정은 PixelSize 16 GridSize 32로억제해서 GPU예산은 1ms정도입니다.




포그그그그 그그그 그 그그그그.

하이트 포그는레벨에서 장소 마다 제어하거나컷 신에서 컷 별로제어하고 싶었기 때문에포스트 프로세스 볼륨으로각 프로퍼티를 오버라이드 할 수 있도록확장했습니다.




포그그그그 그그그 그 그그그그.

또 포그가 끼는 정도를조절하기 위한 프로퍼티도추가했습니다.

・디폴트에서 포그는리니어하게 진해지기만 하지만농도 커브에 감마를 걸거나,특정거리부터 짙어지도록조정할 수 있게 했습니다.

・횡 방향으로는 진하게 하고 싶지만,깊이 방향으로는 연하게 하고 싶거나할 경우에 조정할 수 있도록 했습니다.




포그


또 포그가 끼는 벡터를 변경하거나,특정구간만 포그가 끼는 것과 같은확장도 했습니다.




SSAO SSR




SSAO SSR


SSAO, SSR은 UE4의 표준 그대로입니다.Async 는 사용하지 않습니다.앤티엘리어스(Anti-alias)는 FXAA.컷 신중에만템포럴AA를 사용했습니다.

템포럴AA와 SSR의 조합은화면 전환 시에 지연이 눈에 띄므로,이 부분은 적절하게 컷 단위로기능을 온 오프했습니다.




お品書き

海

空雲

地形

植物

雪

異世界

破砕










포스트 프로세스는 합성 타이밍을몇 가지 추가했습니다.





OcclusionTest

ShadowDepth BassPassPrePass

RenderVelocties

PreLighting

CapsuleShadow

Light UITranslucensy

SSRReflectio

nPost

Process

SQEX After Light

특히 「SQEX After Light」의 타이밍은라이팅 패스 직후에 삽입돼 있어,캐릭터의 외모를 조정하거나프로젝트만의 독자적인 표현을 구현하기 위해확장되어 많이 사용되었습니다.





신 컬러(R10G10B10A2)

DF의존관계정보(A2)법선(R10G10B10)

메탈(R8) 스페큘러(G8) 러프니스(B8) Shading모델ID(A8)

베이스컬러(R8G8B8) AO(A8)

투명도(R8) 커스텀 데이터(서브 서피스 컬러 등)(G8B8A8)

사전에 계산된 그림자 요인(R8G8B8A8)

인다이렉트라이트정보(R16) 머티리얼에서 전달가능한

확장데이터(G16)

라이트 감쇠정보(B16)

오브젝트ID(A16)

이 포스트 프로세스 타이밍으로 독자적 표현을 하기 위해G버퍼는 한 장 늘렸으며,G버퍼의 내역은 대략 다음과 같습니다.




포스트 프로세스그그그 그그그 그 그그그그.

또 「SQEX After Light」는전용 제어 BP도 존재하며,항상 레벨에 한 개 배치하고,상황에 따라 국소적인 조정을 했습니다.

프로퍼티가 대량으로 존재하고또 외관에 직결되는 중요한 기능이기 때문에,프로퍼티의 임포트・엑스포트 기능도정비했습니다.






아웃라인의 포스트 프로세스를이 타이밍에 처리하거나,배틀중인 캐릭터의시인성을 조정하거나,컷 신 중의 연출적인추가 라이팅을저비용으로 적용하는 등,다방면에 걸쳐 프로젝트에서사용되었습니다.

GPU부하는 약 1ms입니다.




경청해 주셔서 감사합니다!

UNREA ENGINEはエピック・ゲームズ・インコーポレーテッドの商標です。ElasticsearchおよびKibanaはElasticdearch BVの商標です。MAYAはオートデスクインコーポレイテッドの商標です。その他掲載されている会社名、商品名は、各社の商標または登録商標です。

ue4의대규모배경제작사례 - 카페24 · ue4.17.2. 를사용하고있습니다....

Documents