WebGPU와 WFC로 구현한 절차적 헥스 맵, 기술적 깊이를 탐구하다!

by DD
2개월 전
조회수 4

WebGPUThree.js를 활용하여 4,100개의 헥스 타일로 구성된 중세풍 섬 맵을 절차적으로 생성

WFC(Wave Function Collapse) 알고리즘을 기반으로 맵을 생성하며, 헥스 타일의 제약 조건(Constraints)으로 인한 문제 발생

백트래킹(Backtracking), 멀티 그리드(Multi-Grid), 로컬 WFC(Local-WFC)를 활용하여 WFC 알고리즘의 한계 극복

3D 지형(Elevation) 처리, 물 효과(Water Effects) 구현, 렌더링 최적화(Rendering Optimization) 등 시각적 완성도를 높이기 위한 다양한 기술 적용

WFC 알고리즘과 헥스 타일의 복잡성

본 게시물에서는 WFC(Wave Function Collapse) 알고리즘을 활용하여 헥스 맵을 생성하는 과정을 설명한다. 특히, 헥스 타일은 6개의 면을 가지므로, 기존 4개의 면을 가진 사각형 타일에 비해 50% 더 많은 제약 조건(Constraints)을 갖게 된다고 언급한다. 이러한 제약 조건으로 인해 헥스 맵 생성 시 조합적 폭발(Combinatorial Explosion)이 발생하여, 맵 생성의 난이도가 증가하며, 백트래킹(Backtracking)과 같은 추가적인 해결책이 필요함을 강조한다.

멀티 그리드(Multi-Grid) 아키텍처와 백트래킹(Backtracking) 전략

게시물에서는 대규모 맵 생성 시 WFC 알고리즘의 한계를 극복하기 위해 멀티 그리드(Multi-Grid) 방식을 채택했다고 설명한다. 19개의 헥사고날 그리드로 맵을 분할하고, 각 그리드는 독립적으로 WFC를 수행하며, 인접 그리드의 경계 타일을 제약 조건으로 활용한다. 또한, WFC의 실패를 대비하여 백트래킹(Backtracking) 기법을 적용, 최대 500번의 백트래킹 시도 후에도 해결되지 않으면 다른 해결책을 모색한다.

로컬 WFC(Local-WFC) 기반의 경계 문제 해결

저자는 멀티 그리드 환경에서 발생하는 경계 문제를 해결하기 위해 로컬 WFC(Local-WFC) 기법을 도입했다. 경계 타일 간의 충돌 발생 시, 해당 영역을 중심으로 반경 2 이내의 작은 영역에서 WFC를 재실행하여 경계 타일을 재구성한다. 최대 5번의 시도를 통해 호환 가능한 경계를 생성하며, 이 방법은 경계 문제(Boundary Problem) 해결에 효과적이었다고 언급한다. 또한, 마지막 수단으로 산 타일을 배치하여 경계선을 자연스럽게 처리하는 방법을 제시한다.

3D 지형(Elevation) 처리와 렌더링 최적화

게시물에서는 3D 지형 처리를 위해 5단계의 고도(Elevation)를 사용하며, 고도에 따라 도로, 강, 해안선 등의 연결을 처리하는 과정에서 발생하는 문제점을 설명한다. 또한, 렌더링 성능 향상을 위해 BatchedMesh를 활용하여 드로우 콜(Draw Call) 수를 줄이고, 모든 메쉬(Mesh)가 단일 머티리얼(Material)을 공유하도록 하여 셰이더(Shader) 상태 전환을 최소화하는 등 다양한 렌더링 최적화(Rendering Optimization) 기법을 적용했다고 밝힌다.

Building a Procedural Hex Map with Wave Function Collapse