웹에서 실시간 전역 조명: 서펠 기반 렌더링 심층 탐구

실시간 전역 조명(GI)을 구현하려는 노력은 오랫동안 시각적 충실도와 계산 비용 사이의 전쟁이었습니다. 경로 추적은 빛 시뮬레이션의 금본위이지만, 픽셀당 수천 개의 광선을 요구하기 때문에 특히 오픈 웹에서는 실시간 애플리케이션에 사용하기엔 너무 느립니다. 그러나 WebGPU의 등장으로 상황이 바뀌고, 이전에는 네이티브 AAA 엔진 전용이던 연산 집약적인 렌더링 파이프라인을 구축할 수 있게 되었습니다.

이 문제에 대한 유망한 접근법 중 하나는 서펠(surface elements)의 사용입니다. 서펠은 조명 계산을 화면 해상도와 분리함으로써, 개발자가 비교적 적은 수의 표면 패치를 쉐이딩하여 전역 조명을 근사할 수 있게 해주며, 이 작업을 시간에 따라 캐시하여 저사양 하드웨어에서도 부드러운 실시간 성능을 달성합니다.

서펠 이해하기

서펠은 3D 공간에 떠 있는 평평한 원판으로, 위치, 법선(방향), 반지름으로 정의됩니다. 화면의 모든 픽셀에 대해 빛을 계산하는 대신, 엔진은 이러한 개별 표면 요소에 대해 빛을 계산합니다. 주요 장점은 효율성입니다: 5만 개의 서펠을 쉐이딩하는 것이 200만 개의 픽셀을 쉐이딩하는 것보다 훨씬 저렴하지만, 장면 전체에서 빛이 어떻게 반사되는지를 설득력 있게 근사할 수 있습니다.

렌더링 파이프라인: 기하학에서 픽셀까지

서펠 기반 GI 시스템을 구현하려면 정교한 다단계 파이프라인이 필요합니다. 프로덕션 수준 구현은 이러한 요소와 그들이 전달하는 빛의 수명을 관리하기 위해 10개가 넘는 컴퓨트 패스를 포함합니다.

1. 서펠화

첫 번째 단계는 삼각형 기반 기하학을 서펠로 변환하는 것입니다. 이 과정은 G-버퍼(법선, 깊이, 알베도를 포함)를 렌더링하고 화면 공간을 분석하여 서펠이 부족하거나 과도하게 밀집된 위치를 식별합니다. 경쟁적 할당 과정을 통해 시스템은 기하학을 커버하기 위해 새로운 서펠을 생성하고, 더 이상 필요하지 않은 서펠은 파괴합니다.

2. 공간 그리드

모든 서펠을 서로 비교하는 완전 탐색 비용을 피하기 위해 카메라 중심의 계단식 3D 공간 인덱스를 사용합니다. 이 그리드는 공간을 다중 해상도 큐브 셀로 분할합니다: 카메라에 가까운 정밀한 셀은 높은 정밀도를 제공하고, 멀리 떨어진 셀은 메모리를 절약하기 위해 더 거친 셀로 구성됩니다.

이 구조를 구축하려면 여러 컴퓨트 패스가 필요합니다: 카운터 초기화, 셀당 서펠 참조 수 계산, 구간별 prefix-sum 스캔을 수행해 연속적인 쓰기 범위를 만들고, 마지막으로 서펠 인덱스를 결합 버퍼에 배치합니다. 이를 통해 엔진은 $O(1)$ 시간에 관련 서펠을 조회할 수 있습니다.

3. 적분기와 레이 트레이싱

WebGPU는 네이티브 하드웨어 레이 트레이싱을 지원하지 않기 때문에, 파이프라인은 three-mesh-bvh를 사용해 컴퓨트 셰이더로 레이 트레이싱을 에뮬레이션합니다. 적분기의 역할은 씬에 레이를 쏘아 각 서펠에 대한 복사량을 결정하는 것입니다.

컴퓨트 셰이더에서 재질을 효율적으로 처리하기 위해 시스템은 2D 배열 텍스처(diffuseArrayTex)를 사용하며, 각 레이어는 재질의 확산 색상을 나타냅니다. 레이가 기하학에 닿으면 BVH가 재질 ID를 제공하고, 셰이더는 배열에서 해당 색상을 샘플링합니다.

4. 빛 안내하기

반구를 균일하게 샘플링하는 것은 비효율적이며, 대부분의 레이가 어두운 영역이나 공백에 닿습니다. 이를 최적화하기 위해 각 서펠은 hemi-oct-square 매핑을 사용해 64개의 방향 구간을 나타내는 8x8 가중치 그리드를 유지합니다.

시간이 지나면서 서펠은 어느 방향이 밝은지 학습합니다. 적분기는 혼합 확률 밀도 함수(PDF)를 사용해 샘플링합니다:

• Guided sampling: 알려진 밝은 영역을 활용합니다.
• Cosine sampling: 반구를 탐색해 새로운 광원을 발견합니다.

5. 시간적 안정성 및 노이즈 제거

원시 샘플링은 상당한 노이즈를 발생시킵니다. 큰 지연 없이 이미지를 안정화하기 위해 파이프라인은 **Multi-Scale Mean Estimator (MSME)**를 사용합니다. 단순한 Exponential Moving Average (EMA)와 달리 MSME는 단기와 장기 평균을 모두 추적합니다. 실제 조명 변화에 빠르게 반응하면서 고분산 노이즈(불빛)를 무시해 안정적이면서도 반응성이 좋은 결과를 제공합니다.

6. 방사형 깊이로 광 누수 해결하기

서펠에서 흔히 발생하는 문제는 "광 누수"이며, 얇은 벽의 한쪽에 있는 서펠이 반대쪽 픽셀에 빛을 공유하는 현상입니다. 이를 방지하기 위해 각 서펠은 방사형 깊이 아틀라스를 갖추고 있습니다—사실상 4x4 픽셀 타일에 저장된 360도 깊이 카메라입니다.

**Moment Shadow Mapping (MSM)**을 사용해 시스템은 주변 기하학까지의 거리를 기록합니다. 픽셀이 서펠에 빛을 요청하면 서펠은 자신의 깊이 맵을 확인하고, 기하학이 경로를 가로막으면 빛을 차단해 대부분의 누수를 효과적으로 제거합니다.

7. 해결 패스

마지막 단계는 해결 패스로, 서펠에서 화면 픽셀로 복사량을 전달합니다. 각 픽셀마다 엔진은 공간 그리드에서 인접 서펠을 조회하고 다음을 기준으로 기여도를 블렌딩합니다:

• Distance: 가까운 서펠일수록 영향력이 큽니다.
• Orientation: 픽셀과 같은 방향을 향한 서펠에 가중치를 높입니다.
• Age & Confidence: 새롭고 노이즈가 많은 서펠은 점진적으로 페이드 인됩니다.
• Occlusion: 방사형 깊이 아틀라스를 확인해 서펠이 픽셀에 보이는지 확인합니다.

기술적 제약 및 트레이드오프

웹에서 이를 구축하면 고유한 도전 과제가 발생합니다. Chrome에서 눈에 띄는 제한은 컴퓨트 패스당 10개의 스토리지 버퍼라는 하드 제한으로, 개발자는 버퍼를 병합하거나 읽기-쓰기 부동소수점 스토리지 텍스처를 사용해야 합니다(이는 브라우저 간 호환성이 부족할 수 있습니다).

또한 하드웨어 가속 레이 트레이싱이 없기 때문에 시스템은 성능이 좋지만 아직 고동적 기하학이나 복잡한 반사광을 지원하지 못합니다. 현재 구현은 정적 기하학과 확산 간반사에 초점을 맞추고 있습니다.

결론

WebGPU에서 서펠 기반 GI 파이프라인을 성공적으로 구현함으로써 브라우저가 단순 래스터화에 국한되지 않음을 보여줍니다. EA SEED와 같은 AAA 연구 기술을 종합하고 영리한 공간 데이터 구조를 활용함으로써 웹 페이지와 모바일 기기에서도 물리적으로 타당한 실시간 조명을 구현할 수 있습니다. 제한점이 남아있지만, 오픈 웹에서 고충실도, 연산 중심 그래픽의 새로운 시대를 위한 기반이 마련되었습니다.