가우시안 스플랫 대성당을 브라우저에서: PlayCanvas의 WebGPU 스트리밍 실험

샌프란시스코 노브힐의 명소인 그레이스 대성당이 웹 브라우저 안에서 돌아다닐 수 있는 인터랙티브 공간으로 재현됐다. PlayCanvas 팀은 빈센트 우가 3D 가우시안 스플랫(Gaussian Splat)으로 촬영한 대성당과 주변 거리 데이터를 받아, 이를 실시간으로 탐색 가능한 웹 애플리케이션으로 만들었다. 이 프로젝트는 단순한 3D 뷰어가 아니라, 수백만 개의 스플랫을 브라우저에서 매끄럽게 렌더링하기 위해 어떤 엔지니어링 결정을 내려야 하는지 보여주는 실전 사례에 가깝다.

가우시안 스플랫은 점 하나하나가 색과 크기, 방향을 가진 반투명 타원으로 표현되는 방식이라, 사진처럼 사실적인 장면을 담을 수 있지만 렌더링 비용이 만만치 않다. 외부 시점에서만 한 번에 약 350만 개의 스플랫이 그려지는데, 이들은 반투명이기 때문에 카메라에서 먼 것부터 가까운 것 순으로 매 프레임 정렬해야 화면이 올바르게 겹쳐 보인다. 카메라를 움직일 때마다 수백만 개를 실시간으로 다시 정렬해야 한다는 뜻이다.

정렬 병목을 GPU로 옮기다

핵심은 이 정렬 부담을 어디서 처리하느냐다. PlayCanvas의 1세대 렌더러는 WebGL 2 기반이었는데, WebGL 2는 정점 셰이더와 프래그먼트 셰이더만 제공한다. 스플랫을 그리는 데는 충분하지만 정렬에는 적합하지 않아, 별도의 워커가 CPU에서 정렬을 수행한 뒤 결과를 GPU로 업로드하는 구조를 썼다. 문제는 정렬과 업로드가 렌더링 속도를 따라가지 못할 때 발생한다. 카메라가 움직이면 정렬이 밀리면서 아티팩트가 눈에 띄게 드러났다.

WebGPU는 이 작업을 훨씬 효율적으로 나눌 수 있게 해준다. 컴퓨트 셰이더가 매 프레임 GPU 위에서 활성 스플랫 집합을 컬링하고 투영하고 정렬한 다음, 정점·프래그먼트 셰이더가 그 결과를 그린다. 데이터를 GPU에 계속 머물게 해 CPU와 GPU 사이의 전송 병목을 제거하는 것이 관건이다. 실제로 이 파이프라인은 워커 기반 WebGL 2 렌더러보다 극적으로 빠르다. 다만 팀은 WebGPU를 지원하지 않는 브라우저를 위해 WebGL 2 렌더러로 자동 폴백하도록 설계했고, 컷아웃·깃발 애니메이션·전환 효과 셰이더를 WGSL과 GLSL 두 벌로 각각 구현해 두 백엔드에서 동일한 결과를 보장했다. 크로스 브라우저 대응이 여전히 실무의 짐이라는 점을 잘 보여준다.

스트리밍과 디바이스별 예산

스플랫 데이터는 스트리밍 SOG 포맷으로 전달된다. SOG는 PlayCanvas가 공개한 압축 스플랫 포맷으로, 여기에 청크 단위 LOD(Level of Detail)를 확장해 엔진이 필요할 때마다 조각을 내려받는다. 외부와 내부 장면은 별도의 스플랫 집합으로 나뉘어 있고, 한 모드가 로드되면 다른 모드는 메모리에서 비워져 기기 메모리에는 항상 한 시점의 데이터만 올라간다. 외부는 400미터 이내를 덮는 스트리밍 LOD 집합과 그 너머 풍경을 담은 저해상도 정적 집합을 조합한다.

시작 성능은 '첫 픽셀까지의 시간'을 기준으로 조율됐다. 로드 시점에는 각 스트리밍 집합이 가장 거친 단일 LOD부터 시작하므로, 전체의 일부만 도착해도 로딩 화면이 걷힌다. 이후 엔진은 디바이스별 예산 안에서 점진적으로 디테일을 채우는데, 데스크톱은 350만 개, 모바일은 140만 개로 상한을 둔다. 모드 전환은 짧은 프리즈-페이드로 가려진다. 마지막 프레임을 붙잡아 페이드아웃하는 동안 다음 집합의 거친 LOD를 불러오고, 새 시점이 페이드인하며 점차 선명해지는 식이다. 발열과 배터리를 의식해 모바일 상한을 절반 이하로 낮춘 점은 실무자가 참고할 만한 균형 감각이다.

셰이더 청크로 만든 인터랙션

인터랙션 요소도 엔진의 gsplat 셰이더 청크 시스템 위에 얹혔다. 외부를 둘러보다 'Peek' 토글을 켜면 카메라에 가장 가까운 벽 일부가 잘려 내부가 들여다보이고, 잘린 가장자리에는 빛나는 테두리가 그려진다. 이 효과는 두 단계로 나뉘어 비용을 낮춘다. WebGPU에서는 컴퓨트 패스가 각 스플랫 중심을 부호 있는 거리 함수(SDF)로 컷아웃 상자와 비교해, 완전히 안쪽에 든 것은 곧바로 컬링하고 절단면 근처의 것만 다음 처리로 표시한다. 프래그먼트 단계에서는 표시된 스플랫에 대해서만 깊이로부터 월드 좌표를 복원해 픽셀 단위로 다시 판정하고, 테두리 색을 HDR 값으로 써서 블룸이 이를 잡아내게 한다. 이 청크는 외부 시점에서만 설치되므로 실내 걷기 모드에서는 비용이 전혀 들지 않는다.

같은 청크는 장면 어딘가 숨겨진 깃발도 흔들고, 원본 촬영에서 주차된 차를 분리·복제해 만든 차량 세 대가 무작위 간격으로 대성당 앞을 지나가게 한다. 이 차량들은 실내에서는 꺼져 스플랫 예산을 내부 렌더링으로 되돌린다. 카메라 이동 역시 벽·모서리·지붕을 따라 호 길이로 매개변수화해 속도를 균일하게 유지하고, 웨이포인트 그래프에 최단 경로 탐색을 적용한 뒤 3차 스플라인으로 위치와 방향, 초점 거리, 시야각을 함께 보간한다. 이 모든 것이 PlayCanvas 엔진, SuperSplat 편집 도구, 공개 SOG 포맷이라는 오픈소스 토대 위에서 구현됐다는 점은, 스플랫 기반 웹 경험을 직접 만들려는 개발자에게 재현 가능한 참고점이 된다.