브라우저에서 오픈 월드 만들기, 7부: 마칭 큐브와 첫 진짜 동굴

Oleg Sidorkin, Cinevva의 CTO 겸 공동 창업자

처음 오셨나요? 시리즈 가이드를 보세요. spike가 무엇인지 설명하고 모든 부분을 링크해 둡니다.

하이트맵은 오버행이 필요해지기 전까지는 훌륭합니다.

깎아낸 터널, 떠 있는 바위 턱, 동굴 천장을 원하는 순간, 순수 하이트필드 파이프라인은 당신을 막기 시작합니다. 하이트맵은 XZ 좌표마다 Y 값을 하나만 저장합니다. 자기 위로 접혀 돌아오는 표면은 물리적으로 표현할 수가 없습니다. 우리에게는 볼류메트릭 표현이 필요했습니다.

Spike 12는 WebGPU 컴퓨트 셰이더를 사용해 GPU에서 마칭 큐브를 구현했습니다. 이 알고리즘은 3D 그리드에서 부호 거리장(SDF)을 평가하고, 값이 0이 되는 지점의 표면에서 삼각형 메시를 추출합니다. 각 셀은 8개의 코너를 가지며, 각 코너는 표면 안쪽이거나 바깥쪽이라서 $2^{8} = 256$ 가지 부호 패턴이 나옵니다. 룩업 테이블이 각 패턴을 삼각형 집합으로 매핑합니다. 정점은 셀의 모서리에서 값이 0을 가로지르는 지점에 놓입니다. 코너 $a$ 와 $b$ 사이의 모서리에서 값이 각각 $f_{a}$ , $f_{b}$ 라면, 선형 보간으로 정점을 다음 위치에 놓습니다.

v = p_{a} + t (p_{b} - p_{a}), t = \frac{- f_{a}}{f_{b} - f_{a}}

이는 모서리를 따라 값이 0에 닿는 지점의 비율입니다. 가로지르는 모서리에서 $f_{a}$ 와 $f_{b}$ 는 부호가 반대이므로, $t$ 는 항상 $[0, 1]$ 안에 들어옵니다. 우리는 이것을 동시에 활성화된 64-큐브 청크 4개에서 돌렸고, 프레임마다 리메시하는 애니메이션 SDF 편집을 테스트했습니다.

새 탭에서 Spike 12 열기 ↗ · 소스 보기

첫 번째 수확은 컴퓨트 파이프라인 자체에 대한 자신감이었습니다. 단 한 번의 디스패치로 CPU 리드백 없이 SDF를 평가하고, 셀을 분류하고, 정점을 GPU 버퍼에 내보낼 수 있었습니다. 두 번째 수확은 "된다"가 얼마나 빨리 아티팩트 사냥으로 바뀌는지 알게 된 것입니다. 사라진 삼각형은 마칭 큐브 이론의 문제인 경우가 드물었습니다. 테이블 인덱스 불일치이거나, 활성 정점 개수를 넘어서 읽는 잘못된 드로우 범위이거나, 이웃 SDF 샘플을 쓸 수 없는 청크 경계 근처의 엣지 케이스 상호작용이었습니다.

이 spike는 우리가 구역 단위로 생각하게 만들었습니다. 카메라 가까이에서는 플레이어가 깎고, 파고, 동굴을 볼 수 있도록 볼류메트릭 자유도가 필요합니다. 카메라에서 멀리에서는 평평한 하이트맵이 더 싸고 완벽하게 충분한 클립맵 효율이 필요합니다. 이 이원성은 Spike 13 이후로 우리가 계속 다듬어온 아키텍처의 척추가 되었습니다.

내가 가장 좋아한 디버깅 순간 중 하나는 편집이 돌아가는 와중에 와이어프레임을 토글한 것이었습니다. 위상 구조가 실시간으로 만들어지고 녹아 사라지는 것을 지켜보니 품질의 트레이드오프가 곧바로 눈에 보였습니다. 정점 밀도가 충분히 높은 곳, 너무 거칠어진 곳, 그리고 결국 균열을 피하려면 LOD 전환에 Transvoxel 지원이 어디서 필요할지 정확히 볼 수 있었습니다.

8부에서는 통합 과제를 다룹니다. 원시 컴퓨트 기반 메시와 Three.js 씬 그래프 로직을 안정적인 렌더링 파이프라인 하나에 담아두는 것은 따로 떼어낸 데모가 암시한 것보다 더 어려웠습니다.

이 장에서 언급한 기술

마칭 큐브. 3D 스칼라 장에서 삼각형 메시를 추출하는 알고리즘입니다(Lorensen and Cline, 1987). 규칙적인 3D 그리드의 각 셀은 8개의 코너에서 장을 샘플링해 분류됩니다. 부호 패턴이 케이스 인덱스(0-255)를 만들고, 룩업 테이블이 각 케이스를 삼각형 집합으로 매핑합니다. 정점은 두 코너 사이를 보간해서 그리드 모서리에 놓입니다. 각 셀이 독립적으로 처리되기 때문에 이 알고리즘은 엄청나게 병렬적이고, GPU 컴퓨트에 이상적입니다. 우리의 SDF와 마칭 큐브에 관한 지형 가이드를 보세요.

부호 거리장(SDF). 3D 공간의 모든 점에 가장 가까운 표면까지의 부호 있는 거리를 저장하는 볼류메트릭 표현입니다. 양수 값은 바깥쪽, 음수 값은 안쪽이고, 0을 가로지르는 지점이 표면입니다. SDF는 임의의 3D 형태를 표현할 수 있습니다. 동굴, 아치, 오버행, 그리고 하이트맵이 표현하지 못하는 떠 있는 지오메트리까지요. 편집은 장에 대한 자연스러운 집합 대수입니다. 재료 추가(두 형태의 합집합)는 $d = min (d_{1}, d_{2})$ 이고, 제거(파내기)는 깎아내는 형태를 음수로 만든 $d = max (d_{1}, - d_{2})$ 이며, 부드러운 블렌드는 다음과 같은 소프트 최솟값을 사용합니다.

smin (d_{1}, d_{2}, k) = min (d_{1}, d_{2}) - \frac{h^{2}}{4 k}, h = max (k - | d_{1} - d_{2} |, 0)

여기서 $k$ 는 블렌드 반경을 제어합니다. $k \to 0$ 이 되면 다시 단단한 $min$ 으로 무너집니다. SDF 지형 표현을 보세요.

WebGPU 컴퓨트 셰이더. 래스터화 파이프라인에 묶이지 않고 범용 계산을 수행하는 GPU 프로그램입니다. 컴퓨트 셰이더는 병렬로 실행되는 스레드 워크그룹을 디스패치합니다. 마칭 큐브에서는 각 스레드가 그리드 셀 하나를 처리합니다. SDF를 샘플링하고, 셀을 분류하고, 삼각화를 룩업하고, 모서리 정점을 보간하고, 아토믹 카운터를 사용해 메시 버퍼에 추가합니다. 출력 버퍼가 렌더링용 정점 데이터로 직접 쓰이기 때문에 CPU 리드백이 필요 없습니다. Will Usher의 webgpu-marching-cubes는 브라우저에서 실시간 256^3 그리드 처리를 보여줍니다. 우리의 WebGPU 기반 LOD에 관한 지형 가이드를 보세요.

하이트맵 + SDF 하이브리드 아키텍처. 브라우저 지형의 실용적인 접근법입니다. 하이트맵은 세계 전체를 덮고(싸고 컴팩트함), SDF 볼륨은 동굴, 오버행, 또는 창작자가 깎아낸 특징이 필요한 청크에만 존재합니다(청크의 5-10%). 카메라 가까이에서는 볼류메트릭 자유도가 깎기와 동굴을 가능하게 합니다. 멀리에서는 하이트맵이 효율적인 평평한 지형을 제공합니다. 하이브리드 지형 표현을 보세요.

12편 중 7편.
이전: 6부 - 클립맵이 줄거리를 바꿨다
다음: 8부 - 기준선을 잃지 않고 통합하기
시리즈 가이드: /ko/blog/2026-02-25-open-world-browser-series-guide

브라우저에서 오픈 월드 만들기, 7부: 마칭 큐브와 첫 진짜 동굴 ​

이 장에서 언급한 기술 ​

브라우저에서 오픈 월드 만들기, 7부: 마칭 큐브와 첫 진짜 동굴

이 장에서 언급한 기술