WebGPU로 브라우저에서 실시간 글로벌 일루미네이션 구현하기 — Surfel 기반 파이프라인

WebGPU로 브라우저에서 실시간 글로벌 일루미네이션을 구현한 이야기

• Surfel(Surface Element)이라는 3D 공간의 납작한 디스크를 이용해 웹 브라우저에서 실시간 글로벌 일루미네이션(GI)을 구현한 프로젝트임. 위치·법선·반지름으로 정의되는 surfel로 조명 계산을 스크린 해상도에서 분리해, 5만 개의 surfel만 셰이딩해도 200만 픽셀의 GI를 처리할 수 있다는 게 핵심

• EA SEED가 SIGGRAPH 21에서 발표한 surfel 기반 GI 기법에서 영감을 받았고, SIGGRAPH 2025 밴쿠버에서 본 "SurfelPlus" 포스터의 "저사양 GPU에서도 풍부한 동적 간접 조명을 실시간으로" 라는 문구가 "저사양 GPU ≈ 웹"이라는 발상으로 이어진 거임

파이프라인: 프레임당 13개 이상의 컴퓨트 패스

1. Surfelization — 지오메트리를 surfel로 변환

• G-buffer(깊이, 법선, 알베도)를 렌더링한 뒤, 빠진 곳에 surfel을 스폰하고, 기존 surfel과 비교해서 원자적 병렬 경쟁을 거쳐 승자만 살아남는 방식. 프로덕션 수준에서는 공간 데이터 구조 유지·라이프사이클 관리 등 10개 이상의 컴퓨트 패스가 필요함

2. 그리드 — 공간 가속 구조

• Kajiya 렌더러에서 영감받은 카메라 중심 캐스케이드 3D 공간 인덱스. 가까운 surfel은 정밀한 셀, 먼 surfel은 큰 셀로 관리하는 멀티-레졸루션 구조임
• 빌드 과정: 셀 카운터 초기화 → 원자적 증가로 셀별 surfel 수 카운트 → prefix-sum 스캔 → atomic decrement 트릭으로 슬로팅. 결과적으로 O(1)로 셀의 surfel 인덱스에 접근 가능
• 이거 없으면 픽셀마다 512개 surfel을 전부 비교해야 해서 사실상 불가능

3. 레이 트레이싱 — 하드웨어 RT 없이

• WebGPU에는 하드웨어 레이 트레이싱 지원이 없음. 대신 three-mesh-bvh 라이브러리를 사용해 CPU에서 BVH(Bounding Volume Hierarchy)를 빌드하고 GPU 컴퓨트 셰이더에서 쿼리하는 방식으로 에뮬레이션
• 머티리얼 샘플링은 2D 배열 텍스처에 모든 디퓨즈 텍스처를 레이어로 쌓고, 삼각형마다 matId를 저장해서 히트 시 (uv, matId)로 샘플링하는 해킹적 접근

4. 가이딩 — 빛이 오는 방향 학습

• 각 surfel이 반구 위에 8×8(64 bin) 가중치 그리드를 유지함. 레이가 밝은 방향을 발견하면 해당 bin의 가중치를 올리고, 시간이 지나면 밝은 방향으로 레이를 더 많이 쏘는 구조
• 탐색(exploration)과 활용(exploitation) 균형을 위해 가이딩 확률과 코사인 반구 샘플링을 혼합하고, 혼합 확률밀도함수(mixPdf)로 편향 없는 추정을 유지함
• 새로 태어난 surfel은 탐색을 많이 하고, 성숙한 surfel은 활용을 많이 하는 설계가 귀여움

5. 시간적 안정성 — MSME

• 단순 지수 이동 평균(EMA)은 반응이 빠르면 노이즈가 심하고, 안정적이면 느림. MSME(Multi-Scale Mean Estimator)는 장기/단기 두 개의 평균을 추적해, 실제 변화에는 빠르게 반응하되 노이즈에는 과잉반응하지 않음
• EA SEED의 PICA PICA 파이프라인(Ray Tracing Gems 25장)에서 소개된 알고리즘

6. 빛 누수 해결 — Radial Depth Atlas

• Surfel이 벽 가장자리에 있으면 반대편으로 빛이 새는 문제가 있음. 각 surfel에 360도 깊이 카메라(4×4 픽셀 타일)를 달아서 주변 지오메트리까지의 거리를 기록하고, Moment Shadow Mapping(MSM)으로 부드러운 가시성 함수를 재구성해 벽 뒤로 빛이 새는 걸 차단

7. Resolve — surfel에서 픽셀로

• 모든 픽셀에 대해 G-buffer 깊이로 월드 좌표를 계산하고, 그리드에서 주변 surfel을 찾아서 거리·방향·나이·오클루전 가중치를 적용해 최종 색상을 결정

결과와 한계

• 한계: Chrome의 스토리지 버퍼 상한이 컴퓨트 패스당 10개라 read-write float 스토리지 텍스처로 우회하는 등 바인딩 한계와 싸워야 했음. Firefox/Safari는 더 많은 바인딩을 지원하지만 float 스토리지 텍스처를 못 씀
• 하드웨어 RT가 없어서 다수 광원, 동적 지오메트리 지원이 어려움. 현재는 단일 디렉셔널 라이트 + 환경 맵의 정적 지오메트리 디퓨즈 반사만 지원
• 스페큘러/글로시 반사, 투명도, AO, 이미시브 없음. 그래도 브라우저에서 물리 기반 빛 반사와 시간적 안정성이 돌아가는 것 자체가 "미래에 와 있는" 느낌이라고