[TACampus] 1주차 과제 - 카툰 렌더링

최근 모바일 게임 시장은 블루 아카이브, 승리의 여신 니케, 원신과 같은 서브컬처 장르의 게임들이 시장을 주도하고 있고, 국내 게임사들도 앞다투어 카툰풍 게임 개발에 뛰어들고 있습니다. 컴투스의 카툰풍 액션 게임을 비롯해 Project MAIDEN, 크레센트 등 다양한 프로젝트들이 진행 중인 상황입니다.

저는 나혼자만 레벨업 게임을 즐겁게 플레이한 경험이 있어, 서브컬처 장르의 게임 개발에 필요한 카툰 렌더링 기술에 대한 궁금증이 있었습니다. 마침 TACampus 1주차 과제로 주어진 "평소에 궁금했던 용어에 대해 찾아보고 정리하기"에 대한 과제를 수행할 기회가 생겨, 카툰 렌더링에 대해서 리서치를 진행하게 되었습니다.

카툰 렌더링은 3D 모델을 2D 만화처럼 보이게 만드는 기술로, 여러 복잡한 렌더링 기법들이 유기적으로 결합된 결과물입니다.

NPR의 한 분야로서의 카툰 렌더링

카툰 렌더링은 비사실적 렌더링(Non-Photorealistic Rendering, NPR) 기술의 한 분야입니다. 전통적인 PBR(Physically Based Rendering)이 현실 세계의 물리적 특성을 정확히 시뮬레이션하는 것과는 정반대의 접근 방식을 취합니다. 목표는 사실성이 아니라 스타일화된 시각적 표현입니다.

카툰 렌더링을 구성하는 핵심 요소들을 살펴보면, 먼저 외곽선(Outline)이 있습니다. 이는 오브젝트의 실루엣을 강조하여 2D적 특성을 부여하는 역할을 합니다. 

다음으로 단계별 음영(Band Shading)이 있는데, 이는 연속적인 톤 대신 제한된 수의 이산적 톤을 사용하여 만화적 표현을 구현합니다.

마지막으로 림 라이팅(Rim Lighting)을 통해 오브젝트와 배경 간의 시각적 분리를 강화합니다.

밴드 쉐이딩의 기술적 구현

카툰 렌더링의 핵심은 밴드 쉐이딩입니다. 이를 이해하려면 먼저 기본적인 조명 모델부터 살펴봐야 합니다.

램버트 디퓨즈 모델은 표면의 법선 벡터 N과 광원 방향 벡터 L의 내적(dot product)을 사용하여 디퓨즈 반사를 계산합니다. 수식으로 표현하면 diffuse = max(0, dot(N, L))입니다. 하지만  램버트 모델은 물체에 직접 들어오는 빛인 직접광(Direct Light)만을 고려하며, 벽을 치고 돌아 들어오는 빛과 같은 간접광(Indirect Light)을 고려하지 않아 현실 세계의 명암과는 괴리가 있습니다.

하프 램버트 모델은 램버트 모델보다 전체적으로 밝게 표현되어 사용자에게 더 사실적으로 느껴지게 합니다. , 기본 공식은 half_lambert = dot(N, L) * 0.5 + 0.5입니다. 이렇게 하면 결과값이 [-1, 1] 범위에서 [0, 1] 범위로 변환되어 전체적으로 더 밝은 결과를 얻을 수 있습니다.

카툰 렌더링에서 명암을 조정하고 색을 입히는 방법으로 무채색 그레디언트에 특정 rgb 색 벡터를 곱하여 물체의 기본 쉐이딩을 완성할 수 있습니다.

Lerp(Linear Interpolation) 함수는 색상 그라데이션 생성에 필수적입니다. lerp(a, b, t) = a + t * (b - a) 공식을 사용하여 두 값 사이의 선형 보간을 수행합니다. 이를 활용해 단색 음영에 컬러를 적용할 수 있습니다

Step 함수와 SmoothStep 함수는 임계값 기반의 음영 제어에 유용합니다. Step 함수 step(edge, x)는 x가 edge보다 크거나 같으면 1, 작으면 0을 반환합니다. SmoothStep은 이를 부드럽게 만든 버전으로, 경계에서 자연스러운 전환을 제공합니다.

더 나아가 램프 텍스처(Ramp Texture) 기법을 사용하면 아티스트가 직접 제작한 그라데이션을 적용할 수 있습니다. 이는 수학적 함수로는 표현하기 어려운 복잡한 톤 변화를 구현할 수 있게 해줍니다.

카툰 렌더링에서의 빛의 반사영역 표현

정반사는 빛이 물체 표면에서 흡수되지 않고 특정 방향으로 튕겨져 나가는 현상을 의미합니다. 정반사된 빛을 우리가 직접 바라볼 때 눈부심(하이라이트) 현상이 발생합니다.

정반사는 관찰자의 시선 방향과 관련이 있습니다. 반사된 빛의 방향과 관찰자(게임에서는 카메라)의 시선 방향이 일치할 때 눈부심이 가장 강하게 느껴집니다. 이는 관찰자 시선과 무관하게 일정한 결과를 보여주는 램버트(Lambert) 모델과는 다른 특징입니다. 따라서 정반사를 구현하려면 관찰자의 시선 정보가 추가로 필요합니다.

정반사의 세기나 형태는 표면의 매끄러움 (Roughness, 러프니스)에 따라 달라집니다. 컴퓨터 그래픽스에서는 이를 미세 표면 이론이라고 합니다.

매끄러운 표면 (낮은 러프니스): 빛을 집중해서 반사하여 작고 쨍한 하이라이트를 만듭니다. 거울처럼 또렷한 상을 맺습니다.

거친 표면 (높은 러프니스): 빛을 사방으로 퍼트려 크고 부드러운 하이라이트를 만듭니다. 반사된 상이 흐릿해집니다.

반사된 빛이 퍼지는 모양을 스페큘러 로브(Specular Lobe)라고 합니다. 러프니스에 따라 이 로브의 모양(길쭉하거나 둥글게 부푼 형태)이 달라집니다.

퐁 스페큘러 모델은 가장 초기에 등장한 정반사 모델 중 하나입니다.

 물체의 법선 벡터(N)와 광원 벡터(L)를 사용하여 반사 벡터(R)를 구합니다.계산된 반사 벡터(R)와 관찰자 시선 벡터(V)의 내적(R . V) 값을 기본 명암으로 사용합니다. 이 내적 결과에 거듭 제곱(Exponentiation)을 적용하여 러프니스 효과를 표현합니다.

내적 결과(0~1)를 여러 번 곱하면 할수록 흰색 영역이 집중되어(그래프가 오른쪽에서 급격히 휘어짐) 쨍한 하이라이트가 만들어지며, 이는 표면이 매끄러운(낮은 러프니스/높은 광택도) 상태를 시뮬레이션합니다. 거듭 제곱 횟수를 광택도(Shininess)라고 합니다.

한계점: R 벡터와 V 벡터 사이의 각도가 90도를 넘어가면 내적 값이 음수가 되어 0으로 처리됩니다. 하지만 실제 거친 표면에서는 빛이 90도를 넘어가는 영역으로도 퍼질 수 있는데, 퐁 모델은 이를 표현하지 못합니다.

블린-퐁 모델은 이를 개선한 것으로, 하프 벡터를 사용합니다.

하프 벡터는 광원 벡터(L)와 카메라(시선) 벡터(V)의 중간 방향을 가리키는 단위 벡터입니다. 하프 벡터(H)와 법선 벡터(N)의 내적(H . N)을 사용하여 기본 명암을 계산합니다.

이 내적 결과에 거듭 제곱을 적용하여 러프니스(광택도)를 표현하는 것은 퐁 모델과 동일합니다.

장점: 하프 벡터(H)는 항상 법선 벡터(N)와 90도 이하의 각을 이루기 때문에, 퐁 모델의 90도 넘는 각도에서의 문제(값이 0이 되는 문제)가 해결됩니다. 블린-퐁 모델은 퐁 모델보다 더 넓은 영역을 표현하여 보다 사실적인 스페큘러를 만듭니다.

GGX 모델: 2007년에 등장한 최신 모델로, 특히 거친 표면 표현에서 블린-퐁보다 더 현실적인 결과를 제공하며 현재 대부분의 게임 엔진에서 사용됩니다. (블린-퐁보다 물리 기반 렌더링에 가깝습니다.)

외곽선 렌더링의 두 가지 접근법

외곽선은 카툰 렌더링의 시각적 정체성을 결정하는 중요한 요소입니다. 구현 방법은 크게 두 가지로 나뉩니다.

첫번째 구현 방법은 물체를 두 번 그리는 방식 (Draw Object Twice)으로 메시(Mesh) 자체를 두 번 그려서 외곽선을 만듭니다.

이 방법의 핵심은 **백페이스 컬링(Back-face Culling)**이라는 효율적인 렌더링 기법을 역으로 응용하는 것입니다.

백페이스 컬링: 게임에서 메시를 구성하는 삼각형에는 앞면과 뒷면이 있습니다. 카메라 방향을 마주 보는 면이 앞면(내적 결과 음수), 카메라와 같은 방향을 보는 면이 뒷면(내적 결과 양수)입니다. 불투명한 물체의 경우 뒷면은 보이지 않으므로, 게임에서는 연산량을 줄이기 위해 뒷면을 그리지 않는 기법을 사용하며 이를 백페이스 컬링이라고 합니다.•

외곽선 구현 원리

의도적으로 뒷면만 한 번 더 그립니다 (앞면 그리기 생략, 내적 결과만 반대로 뒤집어 뒷면 그리기 지시) 뒷면을 그릴 때, 메시의 정점들을 각 정점의 법선(Normal) 방향으로 크기를 조금 늘려줍니다. 이렇게 하면 뒷면이 앞면보다 커집니다. 늘어난 뒷면 전체를 검정색으로 칠합니다. 원래의 앞면 메시를 그리면, 앞면이 늘어난 뒷면의 대부분을 가리게 되고, 앞면이 가리지 못하는 뒷면의 일부만 보이게 되는데, 이것이 바로 외곽선이 됩니다.

외곽선 굵기 문제 해결

위 방법으로 그린 외곽선은 카메라와 물체의 거리에 따라 굵기가 달라지는 문제점이 있습니다. 정점은 항상 지정된 크기만큼만 늘어나는데, 가까이 갈수록 늘어난 길이가 상대적으로 굵게 보이기 때문입니다. 

해결 방법으로 원근 투시 기법을 활용하여 카메라와 물체의 거리에 따라 정점을 늘리는 크기를 조절하는 방법이 있습니다. 원근 투영 행렬(Perspective Projection Matrix)을 사용하여 각 정점의 Depth을 얻어옵니다. 이 깊이값에 따라 외곽선에 사용할 늘어나는 크기를 조절하면, 카메라 거리에 상관없이 일정한 굵기의 외곽선을 만들 수 있습니다

물체를 두 번 그리는 방식의 장단점

장점: 메시 구조가 단순할수록 빠르고, 정확한 외곽선 표현이 가능하며, 다양한 효과를 줄 수 있습니다.

단점: 메시가 복잡하거나 수가 많아지면 처리 속도가 느려질 수 있습니다

두번째 구현 방법으로 포스트 프로세싱 접근법이 있습니다.

이 방법은 렌더링 완료 후 이미지 기반으로 외곽선을 탐지합니다. 주로 소벨 필터(Sobel Filter)나 로버츠 교차 기울기(Roberts Cross-Gradient) 같은 엣지 디텍션 알고리즘을 사용합니다.

포스트 프로세싱 방법의 장점은 지오메트리 복잡도와 무관한 일정한 성능을 제공한다는 것입니다. 단점은 원하지 않는 곳에 외곽선이 나타날 수 있고, 세밀한 제어가 어렵다는 점입니다.

참고 자료

이득우님의 Youtube

https://www.youtube.com/watch?v=6qCYaGne8H8&list=PLMcHQUYJZc73kt997o4aKCPa1bMrNm3PU&index=7

https://www.youtube.com/watch?v=mOcm5p1Bu08&list=PLMcHQUYJZc73kt997o4aKCPa1bMrNm3PU&index=6

https://www.youtube.com/watch?v=RWP-0Dbf1Go&list=PLMcHQUYJZc73kt997o4aKCPa1bMrNm3PU&index=5

https://www.youtube.com/watch?v=s9-7fwTdZuQ&list=PLMcHQUYJZc73kt997o4aKCPa1bMrNm3PU&index=4

붕괴3 방식의 카툰 렌더링 구현하기

https://m.blog.naver.com/mnpshino/221541025516

나무위키 

https://namu.wiki/w/%EC%B9%B4%ED%88%B0%20%EB%A0%8C%EB%8D%94%EB%A7%81

길티 기어 카툰 렌더링

https://m.ruliweb.com/community/board/300779/read/40925921?