3. [Pljec 1] Automative Animation #3. 도시 야경

Pljec 1. Automative Animation 제작 요소 계획

공간 구성		자동차 구성
공간 구성	1. 창고가 있는 숲 속	자동차 모델 선택
	2. 산과 강이 있는 도로 지형
	3. 도심 속 공간	자동차 리깅
실내 공간	창고의 실내 공간

---

공간 구성 #3. 도시 야경

 

1. 환경 제작 계획

GAEA Heightmap 제작	도시 구현 Marketplace : City Sample Buildings
Landscape Heightmap 제작	야경 표현 Env. Light Mixer 라이트에 대한 이해 도로 가로등 표현
바다 제작 Water Plugin Water Body Ocean	도로 표현 Spline

 

---

2. GAEA를 사용해서 Height 맵 제작

1) GAEA란?

• 노드를 이용하는 터레인 제작 프로그램
• Height맵을 png로 추출해 언리얼 엔진에 적용 가능

출처 : GAEA 유튜브

2) GAEA를 사용해 Heightmap 제작

• 노드를 사용해 바다 위에 떠있는 섬을 만듦

 

 

• Output → Asset → Export하고 project 메뉴에서 Build Settings and Regions에 들어가 다음과 같이 설정
• GAEA는 Export 노드도 따로 만들어줘야 함
• png64까지는 말고 png16도 괜찮음

 

 

• Heightmap 추출 완료

Heightmap이란?
지형을 위에서 바라본 상태에서 지형의 높이 값을 저장한 텍스쳐
지형의 높이를 나타내는 y값을 이미지 파일의 명암값(0~255)으로 표현하는 것

 

2) 언리얼 엔진에 Height 맵 적용하기

• Landscape Mode에서 Import from File → Heightmap File에서 아까의 Heightmap File에서 불러오고 Import하기

 

 

• Import하면 가라앉아 있기 때문에 Landscape 끌어올리기(Left / Right 뷰를 활용)

왜 축이 떠있는가?
GAEA에서 높이 값을 2500m로 설정했기 때문에 

 

 

• Add로 바다를 추가해 관련한 레이어(WaterBodyOcean / WaterZone / Landscape_WaterBurshManager)의 Location을 모두 0으로 설정하고 Landscape를 아래로 내림

 

 

• 원래의 지형을 제대로 보이게 하려면 기존의 Landscape Layer는 두기
• Outliner의 WaterBodyOcean 상세 정보창에서 Terrain → Water Hieghtmap Settings → blend Mode → Alpha blend에서 Max로 최대한 땅을 드러내도록 함
• Landscape Layer를 눌러 위로 땅을 올려주기
• Spline 영역은 해변가를 의미하기 때문에 좁혀주고 안쪽으로 이동해주면 가장자리 해변의 평평한 부분이 사라짐

 

 

• Sculpt 모드에서 레이어를 하나 추가하고 땅 위를 평평하게 다져줌

 

 

• #1의 공간에서의 장면과 이어지는 도로를 붙일 땅 길을 만들기 위해 Flatten으로 러프하게 길 생성(그냥 작업하면 바다 아래 도로가 생겨버림)

 

 

• 도로로 만들 Spline을 위한 레이어를 만들고 해당 레이어 우클릭 후 Reserved for Splines로 만듦. 이 레이어를 선택한 상태에서 Ctrl을 누르고 클릭해서 컨트롤 포인트를 계속 추가하며 길을 잇기

 

 

• 하기의 길이 직선에서 꺾이는 부분의 포인트를 선택하고 스케일 아이콘을 선택 후 날개를 줄임. 그럼 길을 만들면서 변형되었던 파란색 화살표로 표기한 부분이 직선으로 바뀜

 

 

• 도로 Spline에 메쉬를 적용하기
• Segrments에 적용할 것이기에 좌측 패널의 Select All에 Segments를 선택하고 우측의 Landscape Splin meshes의 Spline Meshes에서 Array element +를 하고 그곳에 도로 메쉬를 넣기
• 도로가 쭉 이어지게 보이도록 Forward Axis Y로 조정해 좌측에서 우측의 모습으로 변경

 

 

• 플레이를 해보니 도로가 너무 넓음
• 폭을 조정해주기 위해서 Control Point를 모두 선택 후 우측의 Landscape Spline 패널의 Half-Width를 500으로 변경하며 크기를 조정

 

---

 

3. CitySampleBuilding Asset으로 도시 경관 만들기

1) 에셋 사용하기

• Marketplace에서 CitySampleBuilding Asset을 다운로드
• Reference로 된 파일 사용

 

 

• 몇 가지의 특정 빌딩 모델을 선택하면 꼭짓점에 초록색 테두리가 생기고 레이어 두 개가 잡힘
• 이 건물은 Packed Level Actor의 레이어 두 개를 만들고 그룹을 한 상태(자세한 내용은 언리얼 이론 '액터 그룹화' 참고)

 

2) 건물 배치하기

• 다음의 경로로 CitySampleBuilding의 건물 에셋 찾기

All → Content → CitySampleBuildings → Building → Library → Kit_Ref_Bldg → LevelInstance

 

 

• 한 건물 에셋이지만 나뉘어 있는 경우가 있음. 파일 두 개를 같이 눌러 뷰포트에 끌어와 불러오고 두 파일 폴더를 만들어 그룹

 

 

건물 에셋의 Emissive 줄이기

• Directional Light의 시간대를 어둡게 한 뒤 건물을 봤을 때, 건물 창문에서 발광하는 Emissive의 강도가 셈
• 건물 에셋의 BPP 파일 편집창으로 이동

 

 

• 창문 하나 선택 후, 발광하는 머티리얼을 클릭하고 연결된 머티리얼을 계속 누르면 원본으로 도달함

Material Instance의 원본은 Master Material
연결된 Material의 원본은 Parent

 

 

• Emissive 컬러의 정도를 줄이기 위해 해당 해당 부분에 정도를 조절해주는 노드를 추가해야 함
• 정도를 키우고 줄이려면 곱하기(Multiply), 값은 0.001 적용

 

 

3) 가로등 배치하기

가로등 Export 및 머티리얼 적용

• 무료로 다운 받은 외부 소스를 사용할 것. 하지만 다운 받은 fbx 파일을 Export를 했을 때, 머티리얼과 텍스쳐가 제대로 들어오지 않는 경우가 있음
• 보통은 외부 소스의 blend 파일로 블렌더에서 조정을 한 후, 우리가 정리해야 사용해야 함
• 확인을 위해 Models 폴더 내에 RoadLamp 파일을 만든 후 안에 다운받은 가로등의 fbx 파일 드래그

머리티얼이 제대로 Export 되지 않은 경우

 

• 이 파일은 가로등의 형태가 두가지로, 전체 메쉬를 뷰포트로 꺼내보면 구분됨
• 머티리얼, 텍스쳐가 Export 되지 않았음을 확인

 

 

 

• Static Mesh 편집창으로 들어가 머티리얼을 완전히 바꾸고 저장을 하면, 그 Static Mesh를 꺼내올 때마다 수정된 머티리얼로 적용된 메쉬가 불러와짐(꺼내쓰기 편함)
• Quxel Bridge에서 머티리얼을 다운로드 후 적용

 

 

• 아웃라이너가 복잡해지게 Group을 하지 않고 PackedLevelActor로 하나의 메쉬로 묶어주기
• 완료 후 LV로 변환되는데, 그 파일은 지우고 PackedLevelActor하면서 생성된 BPP파일로 드래그해서 다시 가져오기

 

 

가로등 빛 표현하기(광원과 광선 적용)

• 만든 가로등의 BPP파일 편집창으로 들어가 전등 부분을 선택하고 해당 머티리얼의 편집창으로 들어감
• 컬러는 RGBA 모두 1로 하고 Emissive 적용 후 Apply
• 광원(전등 빛) 뿐 아니라 광선을 함께 적용해 주변 밝아지도록 표현해야 하기 때문에 광선도 함께 사용

광원 적용

 

 

• 광선을 위해 Rect Light 사용하기
• 이미 PackedLevelActor 된 가로등에 Rect Light를 추가하려면 편집창에 들어가 안에서 add로 추가하면 됨
• 하기 사진과 같이 Edit으로 들어가 지정하는 경우, 효과가 적용은 안되지만 어떻게 보이는지 확인은 가능

 

 

• 전등에 적용한 Rect Light의 가로/세로 길이를 Source Width/Height로 맞춰줌
• 디테일을 위해 각도도 맞춤

 

 

• Barn Door Angle(40도), Attenuation Radius(1350)으로 값 설정
• Barn Door Anlgle은 날개의 각도, Attenuation Radius는 퍼지는 빛의 정도

 

 

• Edit으로 설정했다면 지정한 값을 기억한 후, Exit하여 편집창에 들어와 똑같은 값을 지정하고 Compile → 저장

 

 

4) 외부 에셋 터널 배치하기

• 터널 외부 에셋의 blend 파일을 블렌더로 불러와 다음과 같이 설정해 fbx Export

 

 

• 언리얼로 돌아와 Models 폴더 내 Tunnel 파일을 만들고, 터널 fbx를 끌고와 Import All
• Mesh, Texture, Material 파일이 들어온 걸 확인

 

 

• 터널의 상태를 확인하기 위해 새 레벨을 만들고 Static Mesh만 뷰포트에 불러오기. 겉 박스는 지우기

 

 

• 면이 뒤집혀 투명하게 보이는 것을 확인. 머티리얼을 바꾸기 위해 해당 Actor를 선택
• 적용된 머티리얼을 보완하기 위해 사용된 머티리얼의 편집창으로 이동해서 Two Sided를 활성화하고 Apply, 저장

Two Sided 
바깥 및 안쪽, 양면이 모두 구현

 

 

• 터널 레이어 모두 선택해 PackedLevelActor화 하고, 기존 레이어 삭제해준뒤 다시 BPP_Tunnel을 꺼냄

 

 

• 도로의 폭을 터널의 폭으로 맞추기 위해 도로 Spline을 수정할 것
• Landscape Mode로 이동해 Control Point 전체 선택하고, Half-width를 460정도로 설정
• 터널에 포함된 기존 도로는 BPP_Tunnel의 Edit 창에 들어가 없애주기

 

 

• 터널 배치 후, 스냅 기능을 사용해서 도로에 이전에 머티리얼과 광원/광선을 적용한 가로등 에셋을 배치

 

5) 교차로 수정하기

• 이차로였던 도로에 하나의 직선거리 추가를 위해 두 컨트롤 포인트를 Ctrl로 이어줌
• 높이를 맞추고, 컨트롤 포인트를 조정해가며 단차 맞추기

 

 

• 우측의 사진과 같이 교차로가 하나로 이어져야 하는데, 현재의 교차로는 겹쳐져보여 어색함
• 맨 아래 이미지에 표기한 부분에는 도로 텍스쳐가 보이지 않아야 함
• 이와 같은 텍스쳐 중복 문제는 텍스쳐 2개 사용으로 해결해야 함

 

 

• 기존의 도로 텍스쳐를 수정해 노란 선이 보이지 않고, 한 쪽에만 흰 선이 보이는 텍스쳐를 만들 것임
• 기존 Base Texture에서 우클릭 → Show in Explorer를 눌러 창을 열면 파일들이 .uasset 확장자임

 

 

• 이미지로 편집할 수 있는 파일의 확장자가 필요하기 때문에 도로 Base Texture를 EXR파일로 Export
• 포토샵에서 열어 편집한 뒤 같은 EXR파일로 Export하면 베스트지만, 상황이 여의치 않으면 Photopea 무료 툴에서 편집 후 PNG 저장(색감이 바뀐다는 문제가 있음)

Photopea에서 편집

 

 

• 수정된 Texture 파일을 도로 머티리얼이 있는 폴더에 넣고, 새로 머티리얼을 만들어 텍스쳐를 적용(수정한 Base, 기존의 Normal과 ORDp)
• Specular은 0으로 하고, 나머지는 노드에 맞게 와이어를 이어줌

 

 

• 겹치는 교차로 부분의 Segment를 눌러 Material Overrides로 머티리얼 중복 시키기
• 좌우 반대로 적용되는데, scale의 X 값에 -를 붙이면 반대가 됨

 

 

• 컬러가 다르고, 단차가 살짝 생기는 문제가 발생

색이 왜 다르게 표현되는가?
EXR에서 PNG로 바뀌면서 색이 같이 변하기 때문에 같은 확장자인 것이 좋음. PNG로 적용하면 이미지 퀄리티가 떨어짐

 

 

• 컬러를 맞추기 위해서 Photopea에서 기존 원본 텍스쳐를 불러와 그대로 PNG로 Export
• 원본 도로 Material에 확장자를 변경한 Base Texture 적용

 

 

• 도로의 단차가 생기는 이유는 도로의 사이드가 직각으로 이뤄졌기 때문
• 약간 깎여있으면 단차가 줄어드는 효과가 있기 때문에 이러한 특징을 가진 Mesh를 불러와 제작한 Material을 적용

 

 

• 도로의 모든 Spline을 선택하고 기존의 메쉬를 수정한 Mesh로 바꾸고, 아래에 파묻히거나 수정이 필요한 부분은 Control Point나 Sculpt로 조정
• Overrides된 부분은 바뀌지 않고, 적용했던 그대로 남아있음