WebGL 섀도우 매핑: 실시간 렌더링을 위한 종합 가이드

3D 컴퓨터 그래픽스 세계에서 그림자만큼 현실감과 몰입감에 크게 기여하는 요소는 거의 없습니다. 그림자는 객체 간의 공간적 관계, 광원의 위치, 씬의 전반적인 기하학적 구조에 대한 중요한 시각적 단서를 제공합니다. 그림자가 없다면 3D 세계는 평면적이고, 단절되고, 인위적으로 느껴질 수 있습니다. WebGL로 구동되는 웹 기반 3D 애플리케이션에서 고품질의 실시간 그림자를 구현하는 것은 전문가 수준의 경험을 보여주는 특징입니다. 이 가이드는 이를 달성하기 위한 가장 근본적이고 널리 사용되는 기법인 섀도우 매핑에 대해 심층적으로 다룹니다.

숙련된 그래픽스 프로그래머이든 3차원의 세계로 막 입문한 웹 개발자이든, 이 글은 여러분이 WebGL 프로젝트에서 실시간 그림자를 이해하고, 구현하며, 문제를 해결하는 데 필요한 지식을 제공할 것입니다. 우리는 핵심 이론부터 실제 구현 세부 사항까지 여정을 떠나며, 일반적인 함정과 최신 그래픽스 엔진에서 사용되는 고급 기법들을 탐구할 것입니다.

1장: 섀도우 매핑의 기본 원리

핵심적으로, 섀도우 매핑은 "이 지점이 광원에서 보이나요?"라는 간단한 질문을 통해 씬의 한 지점이 그림자 안에 있는지 판단하는 영리하고 우아한 기법입니다. 만약 대답이 '아니오'라면, 무언가가 빛을 막고 있다는 뜻이며, 그 지점은 그림자 안에 있어야 합니다. 이 질문에 프로그래밍 방식으로 답하기 위해, 우리는 2-패스 렌더링 접근 방식을 사용합니다.

섀도우 매핑이란 무엇인가? 핵심 개념

전체 기법은 씬을 두 번, 각각 다른 시점에서 렌더링하는 것을 중심으로 진행됩니다:

• 1단계: 뎁스 패스 (광원의 시점). 먼저, 광원의 정확한 위치와 방향에서 전체 씬을 렌더링합니다. 하지만 이 패스에서는 색상이나 텍스처는 신경 쓰지 않습니다. 우리가 필요한 유일한 정보는 깊이(depth)입니다. 렌더링된 모든 객체에 대해 광원으로부터의 거리를 기록합니다. 이 깊이 값들의 집합은 섀도우 맵 또는 뎁스 맵이라고 불리는 특별한 텍스처에 저장됩니다. 이 맵의 각 픽셀은 특정 방향에서 광원의 시점으로 봤을 때 가장 가까운 객체까지의 거리를 나타냅니다.
• 2단계: 씬 패스 (카메라의 시점). 다음으로, 주 카메라의 시점에서 평소처럼 씬을 렌더링합니다. 하지만 그려지는 모든 단일 픽셀에 대해 추가적인 계산을 수행합니다. 해당 픽셀의 3D 공간상 위치를 결정한 다음, "이 지점은 광원으로부터 얼마나 떨어져 있는가?"를 묻습니다. 그런 다음 이 거리를 우리 섀도우 맵(1단계에서 생성)의 해당 위치에 저장된 값과 비교합니다.

논리는 간단합니다:

• 픽셀의 현재 광원으로부터의 거리가 섀도우 맵에 저장된 거리보다 더 크다면, 그것은 같은 시선상에 광원에 더 가까운 다른 객체가 있다는 것을 의미합니다. 따라서 현재 픽셀은 그림자 안에 있습니다.
• 픽셀의 거리가 섀도우 맵의 거리보다 작거나 같다면, 그것은 아무것도 가로막고 있지 않다는 것을 의미하며, 픽셀은 완전히 빛을 받습니다.

씬 설정하기

WebGL에서 섀도우 매핑을 구현하려면 몇 가지 핵심 구성 요소가 필요합니다:

• 광원: 직사광(태양과 같은), 점광원(전구와 같은), 또는 스포트라이트가 될 수 있습니다. 광원의 종류에 따라 뎁스 패스 동안 사용되는 투영 행렬의 종류가 결정됩니다.
• 프레임버퍼 객체(FBO): WebGL은 보통 화면의 기본 프레임버퍼에 렌더링합니다. 우리의 섀도우 맵을 만들기 위해서는 화면 밖의 렌더 타겟이 필요합니다. FBO를 사용하면 화면 대신 텍스처에 렌더링할 수 있습니다. 우리의 FBO는 뎁스 텍스처 첨부 파일로 구성될 것입니다.
• 두 세트의 셰이더: 뎁스 패스를 위한 셰이더 프로그램(매우 간단함)과 최종 씬 패스를 위한 셰이더 프로그램(그림자 계산 로직을 포함)이 필요합니다.
• 행렬: 카메라를 위한 표준 모델, 뷰, 투영 행렬이 필요합니다. 결정적으로, 광원을 위한 뷰 및 투영 행렬도 필요하며, 종종 단일 "라이트 공간 행렬"로 결합됩니다.

2장: 2-패스 렌더링 파이프라인 상세

두 렌더링 패스를 행렬과 셰이더의 역할에 초점을 맞춰 단계별로 분석해 보겠습니다.

1단계: 뎁스 패스 (광원의 시점)

이 패스의 목표는 뎁스 텍스처를 채우는 것입니다. 작동 방식은 다음과 같습니다:

1. FBO 바인딩: 그리기 전에 WebGL에게 캔버스 대신 사용자 지정 FBO에 렌더링하도록 지시합니다.
2. 뷰포트 설정: 뷰포트 크기를 섀도우 맵 텍스처의 크기(예: 1024x1024 픽셀)와 일치시킵니다.
3. 뎁스 버퍼 초기화: 렌더링 전에 FBO의 뎁스 버퍼가 초기화되었는지 확인합니다.
4. 광원 행렬 생성:
   • 광원 뷰 행렬: 이 행렬은 월드를 광원의 시점으로 변환합니다. 직사광의 경우, 일반적으로 `lookAt` 함수로 생성되며, "눈"은 광원의 위치이고 "타겟"은 광원이 가리키는 방향입니다.
   • 광원 투영 행렬: 평행 광선을 가진 직사광의 경우 직교 투영이 사용됩니다. 점광원이나 스포트라이트의 경우 원근 투영이 사용됩니다. 이 행렬은 그림자를 드리울 공간의 볼륨(상자 또는 프러스텀)을 정의합니다.
5. 뎁스 셰이더 프로그램 사용: 이것은 최소한의 셰이더입니다. 버텍스 셰이더의 유일한 임무는 버텍스 위치에 광원의 뷰 및 투영 행렬을 곱하는 것입니다. 프래그먼트 셰이더는 훨씬 더 간단합니다: 프래그먼트의 깊이 값(z-좌표)을 뎁스 텍스처에 쓰기만 합니다. 최신 WebGL에서는 FBO가 뎁스 버퍼를 자동으로 캡처하도록 구성할 수 있으므로 사용자 지정 프래그먼트 셰이더가 필요 없는 경우도 많습니다.
6. 씬 렌더링: 씬의 모든 그림자를 드리우는 객체를 그립니다. 이제 FBO에는 완성된 섀도우 맵이 포함됩니다.

2단계: 씬 패스 (카메라의 시점)

이제 방금 만든 섀도우 맵을 사용하여 그림자를 결정하고 최종 이미지를 렌더링합니다.

1. FBO 언바인딩: 기본 캔버스 프레임버퍼로 렌더링하도록 다시 전환합니다.
2. 뷰포트 설정: 뷰포트를 다시 캔버스 크기로 설정합니다.
3. 화면 초기화: 캔버스의 색상 및 뎁스 버퍼를 초기화합니다.
4. 씬 셰이더 프로그램 사용: 마법이 일어나는 곳입니다. 이 셰이더는 더 복잡합니다.
   • 버텍스 셰이더: 이 셰이더는 두 가지 작업을 수행해야 합니다. 첫째, 평소처럼 카메라의 모델, 뷰, 투영 행렬을 사용하여 최종 버텍스 위치를 계산합니다. 둘째, 1단계의 라이트 공간 행렬을 사용하여 광원의 시점에서 버텍스의 위치를 또한 계산해야 합니다. 이 두 번째 좌표는 varying으로 프래그먼트 셰이더에 전달됩니다.
   • 프래그먼트 셰이더: 이것이 그림자 로직의 핵심입니다. 각 프래그먼트에 대해:
     1. 버텍스 셰이더로부터 보간된 라이트 공간의 위치를 받습니다.
     2. 이 좌표에 대해 원근 나누기(x, y, z를 w로 나눔)를 수행합니다. 이것은 좌표를 -1에서 1 범위의 정규화된 장치 좌표(NDC)로 변환합니다.
     3. NDC를 텍스처 좌표(0에서 1 범위)로 변환하여 섀도우 맵을 샘플링할 수 있도록 합니다. 이것은 간단한 스케일 및 바이어스 연산입니다: `texCoord = ndc * 0.5 + 0.5;`.
     4. 이 텍스처 좌표를 사용하여 1단계에서 생성된 섀도우 맵 텍스처를 샘플링합니다. 이것은 `depthFromShadowMap`을 제공합니다.
     5. 광원의 시점에서 본 프래그먼트의 현재 깊이는 변환된 라이트 공간 좌표의 z-구성 요소입니다. 이것을 `currentDepth`라고 부릅시다.
     6. 깊이 비교: `currentDepth > depthFromShadowMap`이면 프래그먼트는 그림자 안에 있습니다. "섀도우 애크니(shadow acne)"라는 아티팩트를 피하기 위해 이 검사에 작은 바이어스(bias)를 추가해야 합니다. 이에 대해서는 다음에 논의하겠습니다.
     7. 비교를 바탕으로 그림자 계수(예: 빛을 받으면 1.0, 그림자 지면 0.3)를 결정합니다.
     8. 이 그림자 계수를 최종 색상 계산에 적용합니다(예: 앰비언트 및 디퓨즈 조명 구성 요소에 그림자 계수를 곱함).
5. 씬 렌더링: 씬의 모든 객체를 그립니다.

3장: 일반적인 문제점과 해결책

기본적인 섀도우 매핑을 구현하면 몇 가지 일반적인 시각적 아티팩트가 금방 드러납니다. 이를 이해하고 수정하는 것은 고품질 결과를 얻는 데 매우 중요합니다.

섀도우 애크니 (자기 그림자 아티팩트)

문제점: 완전히 빛을 받아야 할 표면에 이상하고 잘못된 어두운 선이나 모아레(Moiré) 현상과 유사한 패턴이 보일 수 있습니다. 이를 "섀도우 애크니"라고 합니다. 이는 섀도우 맵에 저장된 깊이 값과 씬 패스 중에 계산된 깊이 값이 동일한 표면에 대한 것이기 때문에 발생합니다. 부동 소수점 부정확성과 섀도우 맵의 제한된 해상도로 인해, 작은 오차로 인해 프래그먼트가 자기 자신보다 뒤에 있다고 잘못 판단하여 자기 그림자를 유발할 수 있습니다.

해결책: 뎁스 바이어스(Depth Bias). 가장 간단한 해결책은 비교 전에 `currentDepth`에 작은 바이어스를 도입하는 것입니다. 프래그먼트가 실제보다 광원에 약간 더 가깝게 보이게 함으로써, 우리는 그것을 자신의 그림자 밖으로 "밀어냅니다".

float shadow = currentDepth > depthFromShadowMap + bias ? 0.3 : 1.0;

올바른 바이어스 값을 찾는 것은 섬세한 균형 잡기입니다. 너무 작으면 애크니가 남고, 너무 크면 다음 문제가 발생합니다.

피터 패닝 (Peter Panning)

문제점: 하늘을 날 수 있고 그림자를 잃어버린 캐릭터의 이름을 딴 이 아티팩트는 객체와 그 그림자 사이에 보이는 간격으로 나타납니다. 이것은 객체가 떠 있거나 있어야 할 표면에서 분리된 것처럼 보이게 합니다. 이는 너무 큰 뎁스 바이어스를 사용한 직접적인 결과입니다.

해결책: 기울기-스케일 뎁스 바이어스(Slope-Scale Depth Bias). 상수 바이어스보다 더 견고한 해결책은 바이어스를 광원에 대한 표면의 가파른 정도에 따라 달라지게 하는 것입니다. 더 가파른 폴리곤은 애크니에 더 취약하며 더 큰 바이어스가 필요합니다. 더 평평한 폴리곤은 더 작은 바이어스가 필요합니다. WebGL을 포함한 대부분의 그래픽스 API는 뎁스 패스 중에 이런 종류의 바이어스를 자동으로 적용하는 기능을 제공하며, 이는 일반적으로 프래그먼트 셰이더에서 수동으로 바이어스를 적용하는 것보다 선호됩니다.

퍼스펙티브 앨리어싱 (계단 현상)

문제점: 그림자의 가장자리가 깍두기 같고, 들쭉날쭉하며, 픽셀화되어 보입니다. 이것은 앨리어싱의 한 형태입니다. 섀도우 맵의 해상도가 유한하기 때문에 발생합니다. 섀도우 맵의 단일 픽셀(또는 텍셀)이 최종 씬의 표면에서 넓은 영역을 덮을 수 있으며, 특히 카메라에 가깝거나 비스듬한 각도에서 본 표면의 경우 더욱 그렇습니다. 이러한 해상도의 불일치가 특징적인 깍두기 모양을 유발합니다.

해결책: 섀도우 맵 해상도를 높이는 것(예: 1024x1024에서 4096x4096으로)이 도움이 될 수 있지만, 상당한 메모리 및 성능 비용이 따르며 근본적인 문제를 완전히 해결하지는 못합니다. 진정한 해결책은 더 고급 기법에 있습니다.

4장: 고급 섀도우 매핑 기법

기본적인 섀도우 매핑은 기초를 제공하지만, 전문적인 애플리케이션은 특히 앨리어싱과 같은 한계를 극복하기 위해 더 정교한 알고리즘을 사용합니다.

퍼센티지-클로저 필터링 (PCF)

PCF는 그림자 가장자리를 부드럽게 하고 앨리어싱을 줄이는 데 가장 일반적으로 사용되는 기법입니다. 섀도우 맵에서 단일 샘플을 가져와 이진(그림자 안 또는 밖) 결정을 내리는 대신, PCF는 대상 좌표 주변 영역에서 여러 샘플을 가져옵니다.

개념: 각 프래그먼트에 대해, 우리는 섀도우 맵을 한 번만 샘플링하는 것이 아니라, 프래그먼트의 투영된 텍스처 좌표 주위의 격자 패턴(예: 3x3 또는 5x5)으로 여러 번 샘플링합니다. 이들 각 샘플에 대해 깊이 비교를 수행합니다. 최종 그림자 값은 이 모든 비교의 평균입니다. 예를 들어, 9개 샘플 중 4개가 그림자 안에 있다면, 프래그먼트는 4/9만큼 그림자가 져서 부드러운 반그림자(그림자의 부드러운 가장자리)를 만듭니다.

구현: 이것은 전적으로 프래그먼트 셰이더 내에서 수행됩니다. 작은 커널을 반복하면서 각 오프셋에서 섀도우 맵을 샘플링하고 결과를 누적하는 루프를 포함합니다. WebGL 2는 비교와 필터링을 더 효율적으로 수행할 수 있는 하드웨어 지원(`texture`와 `sampler2DShadow` 사용)을 제공합니다.

장점: 딱딱하고 앨리어싱된 가장자리를 부드럽고 매끄러운 가장자리로 대체하여 그림자 품질을 극적으로 향상시킵니다.

비용: 프래그먼트당 취하는 샘플 수에 따라 성능이 저하됩니다.

계단식 섀도우 맵 (CSM)

CSM은 매우 큰 씬에서 단일 직사광(태양과 같은)의 그림자를 렌더링하기 위한 업계 표준 솔루션입니다. 이것은 퍼스펙티브 앨리어싱 문제를 직접적으로 해결합니다.

개념: 핵심 아이디어는 카메라에 가까운 객체가 멀리 있는 객체보다 훨씬 높은 그림자 해상도를 필요로 한다는 것입니다. CSM은 카메라의 뷰 프러스텀(view frustum)을 깊이에 따라 여러 구역, 즉 "캐스케이드(cascade)"로 나눕니다. 그런 다음 각 캐스케이드에 대해 별도의 고품질 섀도우 맵이 렌더링됩니다. 카메라에 가장 가까운 캐스케이드는 작은 월드 공간 영역을 커버하므로 매우 효과적인 고해상도를 가집니다. 더 멀리 있는 캐스케이드는 동일한 텍스처 크기로 점차 더 넓은 영역을 커버하며, 이는 플레이어에게 덜 보이기 때문에 수용 가능합니다.

구현: 이것은 상당히 더 복잡합니다.

1. CPU에서 카메라 프러스텀을 2-4개의 캐스케이드로 나눕니다.
2. 각 캐스케이드에 대해, 해당 프러스텀 섹션을 완벽하게 감싸는 광원을 위한 딱 맞는 직교 투영 행렬을 계산합니다.
3. 렌더링 루프에서, 각 캐스케이드마다 한 번씩 뎁스 패스를 여러 번 수행하여 다른 섀도우 맵(또는 텍스처 아틀라스의 한 영역)에 렌더링합니다.
4. 최종 씬 패스 프래그먼트 셰이더에서, 카메라로부터의 거리를 기반으로 현재 프래그먼트가 속한 캐스케이드를 결정합니다.
5. 적절한 캐스케이드의 섀도우 맵을 샘플링하여 그림자를 계산합니다.

장점: 광대한 거리에 걸쳐 일관되게 고해상도 그림자를 제공하여 야외 환경에 완벽합니다.

분산 섀도우 맵 (VSM)

VSM은 부드러운 그림자를 만드는 또 다른 기법이지만, PCF와는 다른 접근 방식을 취합니다.

개념: 섀도우 맵에 깊이만 저장하는 대신, VSM은 두 가지 값, 즉 깊이(1차 모멘트)와 깊이의 제곱(2차 모멘트)을 저장합니다. 이 두 값을 통해 깊이 분포의 분산을 계산할 수 있습니다. 체비쇼프 부등식이라는 수학적 도구를 사용하여 프래그먼트가 그림자 안에 있을 확률을 추정할 수 있습니다. 핵심 장점은 VSM 텍스처가 표준 뎁스 맵에서는 수학적으로 유효하지 않은 표준 하드웨어 가속 선형 필터링 및 밉매핑을 사용하여 블러 처리될 수 있다는 것입니다. 이를 통해 고정된 성능 비용으로 매우 크고 부드러우며 매끄러운 그림자 반그림자를 만들 수 있습니다.

단점: VSM의 주요 약점은 통계적 근사가 무너질 수 있는 겹치는 오클루더가 있는 상황에서 빛이 객체를 뚫고 나오는 것처럼 보이는 "빛샘(light bleeding) 현상"입니다.

5장: 실용적인 구현 팁 및 성능

섀도우 맵 해상도 선택

섀도우 맵의 해상도는 품질과 성능 간의 직접적인 트레이드오프입니다. 더 큰 텍스처는 더 선명한 그림자를 제공하지만 더 많은 비디오 메모리를 소비하고 렌더링 및 샘플링하는 데 더 오래 걸립니다. 일반적인 크기는 다음과 같습니다:

• 1024x1024: 많은 애플리케이션에 좋은 기준선입니다.
• 2048x2048: 데스크톱 애플리케이션에서 눈에 띄는 품질 향상을 제공합니다.
• 4096x4096: 고품질이며, 종종 주요 에셋이나 강력한 컬링 기능이 있는 엔진에서 사용됩니다.

메모리 사용량은 제곱으로 증가한다는 것을 기억하십시오; 4096x4096 텍스처는 1024x1024 텍스처보다 16배 더 많은 메모리를 사용합니다.

광원의 프러스텀 최적화

섀도우 맵의 모든 픽셀을 최대한 활용하려면, 광원의 투영 볼륨(직교 상자 또는 원근 프러스텀)이 그림자가 필요한 씬 요소에 가능한 한 딱 맞게 설정되는 것이 중요합니다. 직사광의 경우, 이는 카메라 프러스텀의 보이는 부분만 감싸도록 직교 투영을 맞추는 것을 의미합니다. 섀도우 맵에서 낭비되는 공간은 낭비되는 해상도입니다.

WebGL 확장 프로그램 및 버전

WebGL 1 vs. WebGL 2: WebGL 1에서도 섀도우 매핑이 가능하지만, WebGL 2에서 훨씬 쉽고 효율적입니다. WebGL 1은 뎁스 텍스처를 만들기 위해 `WEBGL_depth_texture` 확장 프로그램이 필요합니다. WebGL 2에는 이 기능이 내장되어 있습니다. 또한 WebGL 2는 셰이더에서 수동 PCF 루프보다 상당한 성능 향상을 제공하는 하드웨어 가속 PCF를 수행할 수 있는 섀도우 샘플러(`sampler2DShadow`)에 대한 액세스를 제공합니다.

그림자 디버깅

그림자는 디버깅하기가 악명 높게 어려울 수 있습니다. 가장 유용한 단일 기법은 섀도우 맵을 시각화하는 것입니다. 애플리케이션을 일시적으로 수정하여 특정 광원의 뎁스 텍스처를 화면의 사각형에 직접 렌더링하십시오. 이를 통해 광원이 "보는" 것을 정확히 볼 수 있습니다. 이것은 광원의 행렬, 프러스텀 컬링 또는 뎁스 패스 중 객체 렌더링의 문제를 즉시 드러낼 수 있습니다.

결론

실시간 섀도우 매핑은 현대 3D 그래픽스의 초석으로, 평평하고 생명 없는 씬을 믿을 수 있고 역동적인 세계로 변화시킵니다. 광원의 시점에서 렌더링한다는 개념은 간단하지만, 고품질의 아티팩트 없는 결과를 얻으려면 2-패스 파이프라인부터 뎁스 바이어스와 앨리어싱의 미묘한 차이까지 기본 메커니즘에 대한 깊은 이해가 필요합니다.

기본적인 구현에서 시작하여 섀도우 애크니 및 계단 현상과 같은 일반적인 아티팩트를 점진적으로 해결할 수 있습니다. 거기서부터 부드러운 그림자를 위한 PCF나 대규모 환경을 위한 계단식 섀도우 맵과 같은 고급 기법으로 시각적 효과를 한 단계 끌어올릴 수 있습니다. 그림자 렌더링으로의 여정은 컴퓨터 그래픽스를 매우 매력적으로 만드는 예술과 과학의 조화를 완벽하게 보여주는 예입니다. 이러한 기법들을 실험하고, 그 한계를 뛰어넘어, 여러분의 WebGL 프로젝트에 새로운 차원의 현실감을 불어넣기를 권장합니다.