2019년 3월 8일
Howest 학생이 UE4로 만든 플레이 가능한 3D 만화 Blacksad 파헤치기
DAE 프로그램에 참여하는 동안 저는 일러스트레이션부터 섬세한 배경 및 캐릭터에 이르기까지 다양한 프로젝트 작업을 진행했습니다. 제 작업물 대부분은 아트스테이션(Artstation) 포트폴리오: https://www.artstation.com/aipapi에서 확인하실 수 있습니다.
이 블로그에서 저는 셰이딩, 지오메트리, 컴포지션, 라이팅, 무드 등의 기술을 활용해 2D 만화 소설을 인터랙티브한 3D 경험으로 바꾸어 전달하는 방법을 설명하겠습니다. 그중에서도 만화의 설정 및 분위기를 재창조하는 방법을 집중적으로 설명하겠습니다. 보편적으로 사용되는 이펙트를 구성하기만 하면 이를 다양한 환경에 적용할 수 있었기 때문입니다.
여기서는 제 졸업 프로젝트로서 언리얼 엔진을 활용해 짧지만 몰입이 가능하도록 제작된 게임 "블랙새드(Blacksad)"를 예로 들어 설명하겠습니다. 즐겁게 읽어 주셨으면 좋겠습니다!
첫 번째 단계
첫 번째 단계는 3D로 재탄생시킬 만화 소설을 선정하는 일이었습니다. 저는 후안 디아스 카날레스(Juan Diaz Canales, 작가) 및 후안호 가르니도(Juanjo Guarnido, 아티스트)의 "블랙새드"를 선택했습니다. 많은 캐릭터가 등장하는 작품이기 때문입니다. 라이팅부터 설정까지 작품의 스타일이 너무 매력적이었기 때문에 이 작품을 선택하지 않을 수 없었습니다. 일단 작품을 선택한 뒤에는 스타일 및 세부 사항을 이해할 수 있도록 작품을 철저히 분석해야 했습니다. 제가 특히 알고 싶었던 것은 다음과 같습니다.- 어떤 소재가 표현되었는가?
- 선화 작업은 어떻게 진행하였는가?
- 작품 속 오브젝트 및 캐릭터는 어떻게 그려졌는가?
- 라이팅은 어떤가?
- 일반적인 분위기는 어떤가?
- 주로 사용된 색상은 무엇인가?
- 각 장면의 포커스는 어디 있는가?
- 스케일 차이는 어떻게 표현되었는가?
일반 분석
환경 1 분석
환경 2 분석
환경 3 분석
위의 이미지에서 보시면 아시겠지만, 일반적인 세부 사항은 다음과 같습니다.
- 눈에 띄는 검은 윤곽선
- 전체적인 그레인 효과
- 캔버스 텍스처 배경
- 수채화 효과/얼룩
- 따뜻한 색감 및 엷은 푸른색
- 유사한 색상들
- 방금 칠한 것 같은 그림자
- 스케치 라인
재구성할 장면을 선택할 때는 열려 있으면서도 이야기를 전달하는 장면에 주목했습니다. 완벽한 장면을 찾기 위해 스스로 질문한 내용은 다음과 같습니다.
- 무슨 일이 벌어졌는가?
- 봤을 때 흥미로운 장면인가?
- 현재 보이는 것보다 더 많은 것을 보여줄 수 있는가?
- 재구성 시 선택 가능한 점은 무엇인가?
오브젝트
프로젝트를 시작할 때 처음으로 주목한 것은 오브젝트였습니다. 오브젝트는 모든 장면의 바탕이 되기 때문에 오브젝트에서 시작하는 것이 좋았습니다.제가 선택한 장면들은 묘사가 자세하면서도 오브젝트가 많았고, 대부분 복사와 붙여넣기로 해결할 수 있다고 해도 여전히 각 장면마다 많은 오브젝트가 있었습니다. 필요한 오브젝트는 약 30-40여 개로 대부분은 재사용이 가능했습니다. 시작 단계에서는 먼저 해야 할 일과 필요한 모델을 결정하는 것이 제일 중요했습니다. 각 장면을 분석하는 데 시간이 걸릴 수도 있지만 일단 장면을 이해하고 나면 빠른 결과를 얻을 수 있습니다.
예를 들어, 위의 이미지를 보시면 재구성해야 할 오브젝트가 너무 많아서 복잡하다고 생각할지도 모릅니다. 하지만, 이 장면을 간단히 나누고 복사와 붙여넣기로 해결할 수 있는 것을 찾으면 그 뒤는 훨씬 빠르게 작업할 수 있습니다.
또한 오브젝트 크기의 차이 및 스타일의 차이를 분석할 필요도 있습니다. 스타일 가이드를 보시면 오브젝트에 스타일을 적용한 것이 아니라 그림자를 조금 강조했을 뿐이라는 것을 알 수 있습니다. 예를 들어, 의자의 다리는 의자의 몸통보다 조금 짧고 일부 오브젝트(책꽂이 등)에는 곡선이 필요가 없는데도 곡선이 적용되기도 했습니다. 전체적으로 각 오브젝트는 약간의 스타일이 적용됐을 뿐 비교적 현실의 오브젝트와 유사했습니다.
처음 프로젝트를 시작할 때는 그저 환경을 재구성할 생각이었습니다. 그러나 제가 생각한 것보다 작업 속도가 빨랐기 때문에 좀 더 많은 환경을 생성해 보았고 결국 짧은 몰입형 게임을 제작하게 되었습니다. 더 많은 환경을 만들기 위해서는 더 많은 오브젝트가 필요합니다. 일단 모든 오브젝트가 준비되면 장면을 구성할 수 있죠.
구성
총 6주의 기간에서 처음 2주간은 모든 형태와 비율을 파악해 어색하게 보이지 않도록 하는 데 집중했습니다. 처음 작업한 환경인 사무실(위 그림)을 구성할 때 초반에는 상당히 어려웠습니다. 새로운 장면을 만들 때는 정확한 공간 크기를 계산해야 하므로 늘 어렵습니다. 이 과정에서 실수할 경우 해당 장면이 전부 어색해 보일 것입니다.기본적인 치수 재기가 끝나면 모든 세부 사항이 반영된 장면을 그려낼 수 있습니다. 그러나 이 단계에서도 여전히 엔진 자체의 공간 및 오브젝트 비율을 조정하게 될 것입니다.
환경 1
첫 환경이었기 때문에 모든 것을 제대로 구성하기까지 좀 더 오랜 시간이 걸렸습니다. 구성이란 BSP 셰이프, 기본 라이팅, 주요 오브젝트, 적절한 구성 및 비율 조사 등 대략의 계획을 말합니다. 이 환경은 또한 다른 환경의 바탕이 되기 때문에 이 환경을 제대로 만드는 것이 중요했습니다.
환경 2 & 3
두 번째와 세 번째 환경은 첫 번째 환경을 바탕으로 제작했기 때문에 훨씬 빠르게 작업했습니다. 사실 많은 요소를 재사용했습니다. 오브젝트와 공간의 레이아웃을 재조정하면 전혀 다른 환경도 간단히 생성할 수 있습니다.
연결 장치
여러 환경이 있었기 때문에 다른 공간으로 전환하기 위한 연결 장치도 만들어야 했습니다. 참고 자료에서 볼 수 있듯 첫 장면(사무실)이 아파트에 있었기 때문에 복도를 통해 공간을 연결해야겠다는 생각이 떠올랐습니다. 이때 각 장면의 분위기와 어울리도록 낡은 아파트에서 볼 수 있는 복도 스타일을 채택했습니다. 각 장면을 전환할 때마다 아파트의 각 공간으로 이동하는 느낌을 주면서 각 이야기를 연결할 수 있도록 했죠.
최종 결과
이렇게 공간마다 각자의 이야기와 분위기를 전달하게 되었습니다.
스타일(셰이더 및 머티리얼)
주요 아웃라인 셰이더
셰이더 작업은 까다로웠습니다. 이 프로젝트를 위해 각 장면에서 공통되는 것이 필요했습니다. 다행히 만화 소설의 이미지 대부분에는 공통적인 "느낌"이 있습니다. 결국은 쉽게 조정이 가능한 적절한 그래픽 스타일을 얻기 위해 다양한 셰이더를 사용해야 할 것입니다. 무거운 셰이더 하나를 사용하는 대신 여러 셰이더를 사용해야 하죠. 그림을 그릴 때와 똑같습니다. 원하는 결과를 얻기 위해 레이어를 여러 개 중첩하며 조금씩 작업하죠.결국 다음과 같이 구성됩니다.
- 주요 아웃라인 셰이더
- 그림 스타일을 얻기 위한 이미지 오버레이(각 화면 제일 마지막에 배치되는 텍스처를 말합니다)
- 사용자 정의 실시간 섀도
각 장면의 대략적인 스케치 작업을 마친 뒤 적절한 결과를 얻기 위한 아웃라인 셰이더 작업을 시작했습니다. 모든 게 부드럽게 움직였지만 결국 문제가 발생해 중단되고 말았죠. 오브젝트의 윤곽선이 보이긴 했지만 실루엣에 그쳤고 오브젝트 내부의 세부 사항을 표시하는 내부의 상세 선은 보이지 않았습니다. 즉 오브젝트를 겹칠 경우 작은 오브젝트의 윤곽선이 보이지 않는다는 뜻이었습니다. 예를 들어 의자 밑에 큰 카펫을 둘 경우 카펫의 윤곽선만 보이는 식이었죠.
첫 번째 초안
BSP 벽의 윤곽선만 보이고 오브젝트의 윤곽선이 무시된 게 보입니다.
두 번째 초안
모든 윤곽선의 상태가 좋아졌습니다. 이 문제의 해결 방법을 설명하겠습니다.
이 문제를 해결하기 위해 수정할 것은 한 가지였습니다.
지금 보시는 것은 아웃라인 셰이더를 생성하는 데 가장 중요했던 포스트 프로세스 머티리얼입니다. 카메라와 가까운 오브젝트의 윤곽선을 생성하기 위한 머티리얼 내부의 거리 마스크(붉은 사각형) 때문에 머티리얼이 해체됐습니다. 이 부분을 제거하자 모든 문제가 해결됐습니다.
윤곽선을 얻기 위해서는 윤곽선을 그리기 위한 각 장면의 뎁스와 오브젝트 실루엣의 벡터를 찾아야 합니다.
이에 대한 자세한 정보는 다음에서 찾을 수 있습니다.
UE4 튜토리얼 - 툰 셰이더(Toon Shader) - 2018년 6월 4일 UE4로 오브젝트 아웃라인 그리기(How to Outline Objects - UE4') - 2017년 10월 22일
아웃라인 제거
채색된 느낌이 전달됩니다.
아웃라인 추가
모든 오브젝트가 훨씬 자연스럽게 조화됩니다.
이렇게 장면을 더욱 잘 전달하고 생동감 있는 강력한 보조 셰이더를 얻을 수 있었습니다. 위의 이미지들은 셰이더의 목적과 프로젝트에서 셰이더의 중요성을 보여 줍니다.
셰이더가 없을 땐 이미지가 그림 같고(기본으로 삼기엔 좋습니다) 장면에 포함된 모든 오브젝트가 흐릿합니다. 장면을 파악하기 어렵죠. 셰이더를 추가하면 장면이 더욱 자세히 표현되고 장면 파악이 쉬워집니다.
상호 작용이 가능한 오브젝트의 아웃라인 셰이더
프로젝트가 작은 게임이 되었기 때문에 플레이어가 스토리에 몰입할 수 있는 디테일을 더욱 추가해야 했습니다. 상호 작용이 가능한 환경, 오디오, VFX, 애니메이션, 스토리 요소 등이 필요했죠.플레이어는 각 장면에서 상호 작용이 가능한 특정 오브젝트를 클릭할 수 있고, 이때 오브젝트는 천천히 카메라로 다가옵니다. 플레이어는 오브젝트를 회전시키며 더욱 자세히 살펴볼 수 있습니다. 지금 보시는 오브젝트들은 윤곽선이 있습니다. 클릭하면 카메라로 다가오고 다시 버튼을 누를 때까지 계속 회전시킬 수 있죠.
이 작업에 대한 자세한 방법은 제가 설명하지 않아도 다음 튜토리얼에 자세히 설명되어 있습니다.
포스트 프로세스를 통한 아웃라인 효과 생성하기(How to create an outline effect through Post Process)
http://www.michalorzelek.com/blog/tutorial-creating-outline-effect-around-objects/
언리얼 엔진4에서 오브젝트 줌 및 회전시키기(Unreal Engine 4 – Zoom and Rotate Object)
https://answers.unrealengine.com/questions/543371/rotating-an-object-relative-to-the-first-person-ca.html
사용자 정의 섀도
사용자 정의 섀도 셰이더는 크게 눈에 띄지 않지만 강력합니다. 그게 없었다면 각 장면은 훨씬 더 평범했을 것입니다. 사용자 정의 섀도 셰이더는 균형 잡힌 방법으로 각 장면을 보완합니다. 사용자 정의 섀도 셰이더는 빛에 닿은 오브젝트의 그림자를 사용자 정의한 마스크로 변화시킨 뒤 거칠고 시각적으로 매력적인 그림자를 더해줍니다. 또한 장면에 좀 더 극적인 앰비언트 오클루전(AO)을 생성하고 범위를 넓히며 오브젝트 주변에 앰비언트 오클루전을 적용합니다. 마지막으로 사용자 정의 그림자는 빛과 캐릭터 위치에 따라 크기가 커지거나 줄어들면서 각 장면과 무버블 라이트/오브젝트에 생명력을 불어넣습니다.포스트 프로세스 머티리얼은 놀라울 정도로 간편합니다.
다음 그림(아래 GIF에 이어지는 그림 1)에서 빛이 닿는 곳에 생성되는 균일하지 않은 그림자 및 오브젝트 주변의 AO를 주목해 주시기 바랍니다. 각 장면에서 이동하다 보면 그림자가 마치 물처럼 합쳐지는 것도 볼 수 있을 것입니다. 재미있게 들리겠지만 이런 효과를 목표한 것은 아닙니다. 우연한 실수로 발생한 효과였지만 각 장면에 독특함을 더해 주었죠.
이미지 오버레이
각 장면을 그림 같이 보이면서도 더욱 거친 효과를 얻기 위해 섬세한 이미지 오버레이를 더할 필요가 있었습니다. 이렇게 원하는 결과를 얻기 위해 머티리얼, 포스트 프로세싱, 섀도, 라이팅을 사용했습니다.
지금 보시는 단순한 거친 이미지를 화면 위에 말 그대로 덮어씌웠습니다. 그러나 이미지 하나를 배치한다고 해서 원하는 결과를 얻을 수는 없습니다. 섬세하게 작업하지 않으면 화면 위에 이미지를 덮어씌운 것이 노골적으로 드러날 것입니다. 이 때 먼지 마스크(Dirt Mask)를 함께 사용하면 좋습니다.
이미지 오버레이를 사용하면 전체 장면이 좀 더 거칠게 보입니다. 다음 이미지에서 벽이나 특정 오브젝트를 잘 보시면 그 효과를 눈치채실 것입니다.
앞서 말한 것처럼 이 작고 미세한 변화들이 서로 잘 어우러지면서 강력한 최종 결과를 생성했습니다. (데모 영상 보기)
머티리얼
이곳에 사용된 머티리얼은 단순합니다. 각 오브젝트는 마스터 머티리얼의 인스턴스를 포함합니다. 이런 인스턴스는 단일 색상으로 구성되었기 때문에 필요한 경우 타일형 텍스처로 조정할 수도 있습니다. 각 오브젝트에 이런 방식을 적용한 것은 손으로 직접 그린 텍스처를 적용하면 완성까지 너무나 오랜 시간이 걸리기 때문입니다. (오브젝트가 많기 때문에 개별 텍스처를 적용하는 것은 효율적이지 않습니다.) 물론 손으로 직접 그리면 더욱 구체적인 결과를 얻을 수 있지만 색과 포스트 프로세싱을 사용하면 더욱 효과적으로 빨리 결과물을 볼 수 있습니다.주 머티리얼
머티리얼의 유무에 따른 차이 (색상)
라이팅 및 포스트 프로세싱
기본적인 디렉셔널 라이트부터 작고 섬세한 조명(램프, 초 등)까지 장면에 사용된 모든 조명을 적절하게 구성하는 것이 가장 어려운 일이었습니다.참고 자료를 다시 보시면 환경의 기본 톤은 어둡고 미스터리하며 뿌연 연기가 낀 느낌에 조명의 콘트래스트도 강하다는 것을 볼 수 있습니다. 첫 번째 환경은 플레이어를 초대하는 느낌이기 때문에 더욱 미스터리한 분위기를 풍기면서도 빛바랜 따스한 톤을 사용했습니다.
역시 빨리 작업할 수 없었죠.
흥미로운 장면을 만들기 위해 선명한 주황색으로 제작한 빛줄기(GodRay) 머티리얼을 생성하여 포인트를 주었습니다. 이 주황색 빛을 받는 보조 조명(램프, 초 등)이 함께 사용되자 장면이 시각적으로 더욱 아름답게 보였습니다.
빛줄기는 메시(원뿔형)와 패닝(한 방향으로 움직이는 이미지)으로 구성되었습니다. 또한 사용자 정의 실시간 섀도에 반응하여 움직이기도 합니다.
각 공간은 장면의 분위기를 전환하는 특정 포스트 프로세스 볼륨을 수신합니다. 이 말은 플레이어가 공간에 입장했을 때 특정 범위에 따라 조명과 색상이 변할 수 있다는 뜻입니다. 이 범위에 입장하면 환경이 변할 것입니다.
모든 것이 실시간으로 반영될 수 있도록 주요 조명 및 보조 조명에도 무버블 라이트를 사용했습니다.
아래 이미지를 보시면 라이팅과 포스트 프로세싱을 더하기만 해도 프로젝트가 훨씬 나은 결과를 보여준다는 것을 확인할 수 있습니다.
몰입
사운드
대부분 오디오는 FreeSounds.org에서 다운받아 사용했습니다. 각 장면마다 다음과 같은 "개성 있는" 분위기를 만들기 위해 많은 사운드를 구성해야 했습니다.환경 1(사무실): 침침함, 어두움, 미스터리함
환경 2(블랙새드의 아파트 살인 장면): 밝음, 불안하게 만듦, 불길함
환경 3(아이복 스타톡Ivoc Statoc의 사무실): 오해하게 만듦, 걱정스러움, 어두움
각 장면의 오디오는 만화에 대한 제 해석을 바탕으로 선택했습니다.
분위기를 내기 위해 오디오 큐 작업이 필요합니다. 공간에 배치된 콜리전 상자로 입장하면 특정 사운드를 트리거합니다. 일부 사운드는 특정 거리에서만 플레이됩니다. 예를 들어 창문과 가까울수록 거리의 소리를 더 크게 들을 수 있습니다.
플레이어가 노란 상자 안으로 입장하면 특정 사운드를 트리거합니다. 플레이어는 다른 종류의 상호 작용(램프 켜기)도 할 수 있습니다.
직접 체험하려면 전체 데모 영상을 보거나 게임을 플레이해 보시기 바랍니다. (제 포트폴리오에서 확인할 수 있습니다!)
포트폴리오: https://www.artstation.com/artwork/Bm1yQ8
영상: https://www.youtube.com/watch?v=_VZfcK9Rp1A
스토리
스토리는 환경을 보완하는 추가 요소였습니다. 저는 플레이어가 환경에 몰입하여 스토리를 궁금해할 수 있도록 그래픽 노블의 텍스트를 각 장면에 넣었습니다. (만화책에서 보는 것과 유사한) 대화 상자는 특정 공간의 추가 정보를 제공합니다. 이런 대화 상자를 읽은 플레이어는 계속해서 증거를 찾고, 환경을 더 탐색하며, 각 공간에서 무슨 일이 일어났는지 알고 싶어집니다.이것 역시 오디오 큐와 같은 방식을 사용했습니다. 각 장면에 배치된 박스 트리거는 마치 만화의 한 장면을 연출하듯 대화 상자를 띄웁니다. (다음 이미지에서 확인할 수 있습니다.)
VFX
각 장면에 사용된 VFX는 부담스러운 수준은 아닙니다. VFX는 주로 연기(담배, 안개, 증기 등)나 불 및 일부 사소한 것에만 적용되었습니다.투명하고 안개 같은 효과를 내기 위해 연기는 빛줄기 머티리얼을 사용한 구름 모양 메시로 특별한 스타일을 적용했습니다. 또한 파티클 시스템과 함께 사용했죠.
(각 장면의 복도 등) 멀리서 봤을 때 안개처럼 보이는 연기 역시 플립북 이미지(단일 이미지로 만든 애니메이션)를 사용한 파티클 시스템을 활용했습니다.
이 장면에 사용된 불 역시 움직이는 것처럼 보이기 위해 패닝 노이즈 텍스처(디스토션)를 적용하여 머티리얼로 변형시킨 특정 이미지에 불과합니다. 다음 블루프린트를 확인해 주시기 바랍니다.
결론
포스트 프로세싱 셰이더, 이미지 오버레이와 라이팅만 활용해도 원하는 스타일의 환경을 훨씬 빠르게 만들 수 있습니다. 물론 셰이더만으로 작업했기 때문에 참고한 이미지를 완벽한 상태로 구현할 수 없을지도 모릅니다. 더욱 완벽에 가까운 결과를 얻기 위해 그래픽 노블 아티스트처럼 손으로 그린 장면이 필요하겠지만 이렇게 작업할 경우 훨씬 많은 시간이 걸립니다.하지만 셰이더를 활용해 일반적인 효과를 얻는 것이 목적이라면 대략 3배는 빠르게 작업할 수 있습니다. 제가 졸업 작품을 통해 증명한 것처럼 만화 소설의 느낌이 나는 작은 게임은 짧은 기간에도 제작할 수 있습니다. (저는 6주 걸렸습니다) 이런 효과는 각 환경에 따라 쉽게 조정도 가능합니다. 이 방식을 사용하면 마스크된 머티리얼의 이미지만 변경해도 다양한 결과물을 얻을 수 있습니다.
무엇보다 시간을 들여 프로젝트를 철저히 분석해야 한다고 조언하고 싶습니다. 그림을 그리듯 레이어를 구성하고 큰 구성 요소보다 서로 보완하는 작은 조각(셰이더, 라이팅, 색상, VFX, 먼지, 게임플레이, 상호 작용 등)을 생성하십시오. 제가 UE4로 3D 그래픽 노블을 제작하려고 했던 것처럼 여러분도 상상했던 것을 조금씩 만들어 나갈 수 있을 것입니다.
저는 이 프로젝트를 하는 동안 너무나도 즐거운 시간을 보냈습니다. 여러분도 이 포스팅을 읽는 동안 유익한 정보를 얻으셨으면 좋겠습니다.
더 많은 작업에 대해 알고 싶으시거나 저에게 메시지를 보내시려면 다음 링크를 확인해 주시기 바랍니다.
ArtStation
그럼 행운을 빌겠습니다!