브라우저에서 오픈 월드 만들기, 9부: Transvoxel은 발판부터 시작했다
글 Oleg Sidorkin, Cinevva CTO 겸 공동 창업자
처음 오셨나요? 시리즈 가이드를 보세요. spike가 무엇인지 설명하고 모든 파트를 링크해 둡니다.
이음새는 확신이 죽으러 가는 곳이다.
두 해상도가 만나기 전까지는 모든 게 안정적으로 보일 수 있다. LOD 0 chunk가 LOD 1 chunk 옆에 놓인다. 두 mesh는 독립적으로 생성된다. 둘이 경계를 공유하는 지점에서는 저해상도 chunk의 그리드 밀도가 절반이기 때문에 정점 위치가 맞지 않는다. 그 결과로 눈에 보이는 균열, T 자 교차점, 깜빡이는 가장자리가 생긴다.
Transvoxel 알고리즘은 서로 다른 해상도의 두 chunk 사이 경계면을 따라 특수한 전이 cell을 생성해서 이 문제를 해결한다. 이 cell들은 고해상도 그리드와 저해상도 그리드에서 동시에 샘플링해서 두 표면을 꿰매 붙이는 삼각형을 만들어 낸다. 알고리즘은 일반 marching cubes 테이블과는 별개로 자체 룩업 테이블을 쓰며, 512가지 전이 cell case를 가진다.
이 시점쯤 우리는 구현을 서두르면 안 된다는 걸 알 만큼 통합으로 생긴 흉터가 충분히 있었다.
Spike 15에는 임무가 하나뿐이었다. 전체 알고리즘을 건드리기 전에 믿을 수 있는 이음새 테스트 장치를 만드는 것. 우리는 알려진 SDF 데이터를 가진 두 chunk를 서로 다른 해상도로 나란히 놓은 통제된 환경을 세팅했고, 메인 mesh, 이음새 mesh, wireframe, 법선을 각각 독립적으로 토글하는 시각화 컨트롤을 붙였다.
테스트 장치가 안정되자 Spike 16은 테이블 기반 전이 cell 생성을 단일 면에서 검증했다. 우리는 축에 정렬된 면 하나(+X 경계)를 골라서 그 면만 전이 cell 평가를 구현했고, 출력을 Transvoxel 논문의 참조 데이터와 비교했다.
우리는 일부러 한 번에 한 면씩 테스트했는데, 전이 테이블 배선에는 독립적인 실패 모드가 많기 때문이다. case 인덱스 계산은 두 그리드 양쪽에서 올바른 정점을 샘플링하는 데 달려 있다. 전이 cell 안의 정점 인덱싱은 일반 marching cubes cell과 다른 번호 매김 방식을 쓴다. 와인딩 순서는 메인 mesh와 일관돼야 하며, 그렇지 않으면 백페이스 컬링이 당신의 이음새 삼각형을 잡아먹는다. 여섯 면을 한꺼번에 테스트하면 모든 증상이 무작위로 보인다. 한 면을 철저히 테스트하면 의미 있고 디버그 가능한 실패를 얻는다.
이 단계에서 얻은 또 다른 미묘한 성과는 도구에 대한 투자였다. 우리는 가시성 토글, 이음새 전용 렌더링, 색상으로 구분한 LOD 표시기를 일찍 만들었다. 당시에는 이 컨트롤들이 부담처럼 느껴졌다. 나중에 코너 케이스가 험해졌을 때, 정확히 어떤 이음새 cell이 말썽인지 격리할 수 있었기 때문에 이 컨트롤들은 거듭거듭 본전을 뽑았다.
이 장이 끝날 때 우리는 "이음새를 끝낸" 상태가 아니었다. 우리는 이음새 버그를 두려워하는 대신 추론할 수 있는 위치에 있었다.
10부에서 진짜 롤러코스터가 시작된다. 혼합 LOD 코너, 와인딩 뒤집힘, 부분 overdraw 잔상, 그리고 알고리즘이 틀렸다고 확신했다가 사실 버그는 draw 범위가 활성 정점 수 너머를 읽고 있었던 것임을 발견하는 순간들.
이 장에서 언급한 기술
Transvoxel 알고리즘. Eric Lengyel이 설계했고(transvoxel.org), Transvoxel은 볼류메트릭 지형 LOD에서 가장 어려운 문제를 해결한다. 바로 서로 다른 해상도의 chunk 사이 이음새다. 고해상도 chunk가 저해상도 chunk 옆에 놓이면 marching cubes mesh가 경계에서 정렬되지 않아 눈에 보이는 균열이 생긴다. Transvoxel은 경계면을 따라 특수한 전이 cell을 끼워 넣어 양쪽에 맞는 추가 삼각형으로 해상도 차이를 메운다. 알고리즘은 (일반 marching cubes와 별개인) 자체 룩업 테이블을 쓰며 512가지 전이 cell case를 가지는데, 이는 73개의 등가 클래스로 줄어든다. 특허가 없으며 출시된 게임들(Space Engineers, Astroneer)에서 쓰였다. Transvoxel에 관한 지형 가이드를 참고하라.
전이 cell. 두 LOD 레벨 사이의 면에서 생성되는 특수한 cell. 한 그리드에서 8개의 모서리를 샘플링하는 일반 marching cubes cell과 달리, 전이 cell은 고해상도와 저해상도 그리드에서 동시에 샘플링한다. 고해상도 면은
LOD 전이 이음새. 위상 불일치가 시각적 아티팩트를 일으키는 두 mesh 해상도 사이의 경계. 꿰매지 않으면 LOD 0 chunk(1m 그리드)가 LOD 1 chunk(2m 그리드) 옆에 놓일 때 T 자 교차점이 생긴다. 미세한 mesh는 경계를 따라 정점을 가지지만 거친 mesh는 그걸 공유하지 않아서, 빛이 새어 들어오는 균열이 생긴다. Transvoxel, 지오모핑, 스커트 지오메트리가 이 이음새를 고치는 세 가지 접근법이다. 볼류메트릭 지형에서는 지오모핑이 heightmap에만 통하기 때문에 Transvoxel이 표준 해법이다. 볼류메트릭 지형의 LOD를 참고하라.
12부 중 9부.
이전: 8부 - 기준선을 잃지 않고 통합하기
다음: 10부 - 이음새 혼돈과 코너 보스전
시리즈 가이드: /ko/blog/2026-02-25-open-world-browser-series-guide