유니티(Unity) 셰이더 그래프(Shader Graph)를 활용한 툰 셰이딩(Toon Shading) 외곽선 구현 기법
최근 서브컬처 및 캐주얼 3D 게임 시장에서 만화나 아니메의 한 장면을 그대로 옮겨놓은 듯한 NPR(Non-Photorealistic Rendering, 비실사 렌더링) 스타일이 핵심적인 비주얼 경쟁력으로 자리 잡았습니다. 현실적인 빛의 물리 법칙을 따르는 PBR(물리 기반 렌더링)과 달리, 툰 셰이딩(Toon / Cel Shading)은 빛과 그림자의 경계선을 명확한 밴딩(Banding)으로 분할하고 캐릭터의 형태를 또렷하게 잡아주는 외곽선(Outline)을 결합하여 2D 드로잉 느낌을 극대화합니다. 유니티의 셰이더 그래프(Shader Graph)와 URP(Universal Render Pipeline)를 활용하면 복잡한 HLSL 코딩 없이도 고품질 툰 셰이더를 시각적으로 구축할 수 있습니다. 본 포스팅에서는 단계별 음영 분할부터 외곽선 구현 3대 기법, 그리고 실무 아티팩트 해결 노하우까지 상세히 다룹니다.
1. 툰 셰이딩의 기본 원리: 램프(Ramp)와 스텝(Step) 함수를 통한 명암 단계화
전통적인 램버트(Lambert) 셰이딩은 표면의 법선 벡터(Normal)와 광원 방향 벡터(Light Direction)의 내적(Dot Product, $N \cdot L$)을 계산하여 $0.0 \sim 1.0$ 사이의 부드러운 그라데이션 명암을 생성합니다. 툰 셰이딩은 이 연속적인 명암 값을 불연속적인 단계(Quantization)로 꺾어주는 것이 핵심입니다.
1.1 셰이더 그래프 핵심 노드 구성
- Half-Lambert 연산: $N \cdot L$ 결과에
* 0.5 + 0.5를 적용하여 어두운 영역의 범위를 자연스럽게 넓힙니다. - Step 또는 Smoothstep 노드: 임계값(Threshold, 예:
0.4)을 기준으로 $0$ 또는 $1$로 급격히 분할하여 셀(Cel) 그림자 경계선을 형성합니다. (Smoothstep을 사용하면 앤티앨리어싱이 가미된 미세하게 부드러운 카툰 경계선을 구현할 수 있습니다.) - 1D 램프 텍스처(Ramp Texture) 샘플링: 가로 1픽셀 또는 256픽셀짜리 그라데이션 텍스처의 U 좌표에 $N \cdot L$ 값을 매핑하여, 원화가가 지정한 풍부한 2단/3단 음영 색상(예: 피부색 → 주황빛 음영 → 푸른빛 안쪽 음영)을 손쉽게 표현합니다.
- 스타일라이즈드 스펙큘러: 뷰 벡터(View)와 하프 벡터(Half Vector)의 내적 값을 Step 노드로 날카롭게 잘라내어 동공이나 보석 표면의 반짝이는 하이라이트를 구현합니다.
2. 외곽선(Outline) 구현을 위한 3대 렌더링 기법 비교
외곽선은 툰 셰이딩 캐릭터의 형태감을 정의하는 가장 중요한 요소입니다. 게임의 장르와 플랫폼 사양에 따라 적합한 외곽선 기법을 선택해야 합니다.
| 구현 기법 | 장점 및 특징 | 단점 및 권장 사용처 |
|---|---|---|
| 역법선 확장 (Inverted Hull) |
버텍스를 노멀 방향으로 살짝 확장한 뒤 뒷면(Backface)만 렌더링. 가장 깔끔하고 아티스틱한 제어 가능, 부위별 선 굵기 조절 용이. | 드로우콜 1회 추가(2-Pass), 하드 엣지에서 선이 찢어지는 현상 발생 가능. (캐릭터 전용 표준) |
| 포스트 프로세싱 엣지 검출 (Sobel Filter) |
카메라 뎁스(Depth)와 노멀 버퍼의 급격한 변화를 감지하여 화면 전체에 외곽선 드로잉. 메쉬 버텍스 수와 무관하게 고정 비용. | 해상도에 따른 성능 부하(Fill-rate), 캐릭터 내부 주름선 디테일 제어의 한계. (배경 및 오브젝트) |
| 프레넬(Fresnel) 림 셰이딩 | 시선 방향과 직교하는 가장자리에만 색상을 덧입히는 단일 패스(1-Pass) 기법. 최고의 모바일 경량성. | 실제 외곽선이 아닌 발광 림라이트 형태이므로 만화적 먹선(흑색 외곽선) 표현 불가. (방어막, 실루엣 이펙트) |
3. 셰이더 그래프로 역법선 확장(Inverted Hull) 외곽선 구현하기
3.1 버텍스 변위(Vertex Displacement) 노드 세팅
- Normal Vector 노드: Object Space 또는 View Space의 표면 법선 벡터를 가져옵니다.
- 외곽선 두께(Outline Width) 파라미터 곱연산: Float 프로퍼티로 선 굵기(예:
0.003)를 노멀 벡터와 곱합니다. - 카메라 거리 보정 (원근 스케일링): 카메라가 멀어지면 외곽선이 너무 얇아져 사라지거나, 가까워지면 너무 두꺼워지는 것을 방지하기 위해
Camera Depth / Distance를 노멀 변위량에 곱하여 거리 비례 일정한 픽셀 두께를 유지하도록 설계합니다. - Position 노드와 덧셈(Add): 원본 버텍스 Position에 변위량을 더한 후 Master Stack의 Vertex Position 슬롯에 연결합니다.
3.2 URP Renderer Feature를 활용한 2-Pass 구성
URP의 기본 셰이더 그래프는 단일 패스(Single Pass)만을 지원하므로, 캐릭터 본체와 외곽선을 분리 렌더링하기 위해 URP Forward Renderer Data에 Render Objects 피처를 등록해야 합니다.
- Pass 1 (캐릭터 본체): 기본 Toon Lit 셰이더 그래프 적용 (Cull Back, ZWrite On, Depth Test LessEqual).
- Pass 2 (Render Objects - 외곽선):
- Filter: 캐릭터 레이어(예:
Character_Outline) 지정 - Override Material: 외곽선 전용 Unlit 셰이더(검정색 또는 어두운 틴트 컬러) 할당
- Cull Mode:
Front(앞면을 깎아내고 확장된 뒷면 메쉬만 렌더링) - Depth: Write Depth On, Test Less
- Filter: 캐릭터 레이어(예:
4. 실무 아티팩트 트러블슈팅: 찢어지는 외곽선(Vertex Split Gap) 해결법
4.1 원인: 스무딩 그룹(Hard Edge) 및 UV Seam으로 인한 노멀 분리
3D 모델링에서 의상 경계나 각진 모서리는 하드 엣지(Hard Edge)로 처리되어 동일한 정점 위치에 여러 개의 분리된 노멀(Split Normals)이 존재합니다. 이 상태에서 노멀 방향으로 버텍스를 밀어내면 각 정점이 서로 다른 방향으로 확장되면서 외곽선이 끊어지고 모서리가 찢어지는 틈(Gap)이 발생합니다.
4.2 완벽한 해결책: 베이크드 스무스 노멀 (Smoothed Normals in UV2 / Vertex Color)
- 스무스 노멀 베이킹: 3ds Max나 Blender, 또는 Unity 에디터 스크립트를 통해 모델링의 모든 하드 엣지를 강제로 1개의 스무딩 그룹으로 계산한 평균 노멀(Smoothed Normal)을 UV2 채널이나 버텍스 컬러(Vertex Color RGB)에 저장합니다.
- 셰이더 그래프 연동: 외곽선 버텍스 변위 계산 시 기본 Normal 노드 대신 UV2 (또는 Vertex Color) 데이터를 불러와 확장 방향으로 사용합니다.
- 결과: 하드 엣지나 UV 심(Seam) 부위에서도 외곽선이 찢어짐 없이 100% 매끄럽게 연결되는 최상급 카툰 외곽선을 완성할 수 있습니다.
5. 결론 및 툰 셰이더 제작 실무 체크리스트
성공적인 툰 렌더링은 뛰어난 셰이더 수식뿐만 아니라 모델링 토폴로지와 노멀 데이터의 긴밀한 파이프라인 연계에서 완성됩니다. 툰 셰이더를 인게임에 적용하기 전 아래 5가지 체크리스트를 점검하시기 바랍니다.
- 그림자 계단 현상 방지: Step 노드 대신
Smoothstep(threshold - 0.02, threshold + 0.02, dotNL)을 적용하여 계단 현상(Aliasing)을 방지했는가? - 외곽선 굵기 원근 보정: 카메라 거리에 따라 외곽선이 지나치게 뭉개지거나 소실되지 않도록 거리 보정 상수를 적용했는가?
- 스무스 노멀 베이킹 적용: 하드 엣지 및 모서리 구간의 찢어짐을 방지하기 위해 UV2에 베이크된 노멀을 사용했는가?
- 버텍스 컬러를 통한 선 두께 마스킹: 눈가, 입술 등 외곽선이 나타나지 않아야 하는 부위는 버텍스 컬러 Alpha(0.0)로 마스킹 처리했는가?
- 모바일 렌더링 비용 최적화: 외곽선 렌더링에 필요한 추가 드로우콜과 지오메트리 버텍스 부하가 타깃 디바이스 사양 내에 부합하는가?
댓글 쓰기