WebGPU와 WFC로 구현한 중세풍 헥스 맵, 그 기술적 깊이를 파헤치다!
WebGPU와 Three.js를 활용하여 4,100개 이상의 헥스 타일로 구성된 중세풍 섬 맵을 절차적으로 생성
Wave Function Collapse(WFC) 알고리즘을 핵심 기술로 사용하여 타일 배치 및 제약 조건 해결
백트래킹(Backtracking), Local-WFC 등 다양한 기법을 통해 WFC의 문제점 극복
커뮤니티에서는 맵 생성 기술과 시각적 효과에 대한 높은 완성도에 감탄하며, 게임 개발 분야에서의 활용 가능성에 주목
WFC(Wave Function Collapse) 알고리즘 심층 분석
본 시스템은 WFC(Wave Function Collapse) 알고리즘을 사용하여 헥스 타일을 배치하고, 각 타일의 연결 조건을 만족시킨다. 특히, 30개의 타일 유형, 6개의 회전, 5개의 고도 레벨을 조합하여 900가지 상태를 표현한다. 맵의 크기가 커짐에 따라 발생하는 백트래킹(Backtracking) 문제를 해결하기 위해, Local-WFC 기법을 도입하여 특정 영역을 재해결하는 방식을 사용한다. 이러한 접근 방식은 맵 생성 성공률을 향상시키는 데 기여한다.
멀티 그리드(Multi-Grid) 아키텍처 및 경계 문제
저자는 맵을 19개의 헥사고날 그리드로 분할하여 멀티 그리드(Multi-Grid) 아키텍처를 구현했다. 각 그리드는 독립적으로 WFC를 수행하며, 인접 그리드의 경계 타일을 제약 조건으로 사용한다. 하지만, 이러한 경계 타일 간의 비호환성(Incompatibility)으로 인해 문제가 발생할 수 있다. 이를 해결하기 위해, Unfixing 및 Local-WFC를 활용한 복구 시스템(Recovery System)을 구축하여 경계 문제를 완화했다.
3D 고도(Elevation) 처리 및 셰이더(Shader) 구현
본 시스템은 5단계의 고도(Elevation)를 지원하며, 고도에 따라 도로, 강, 절벽 등의 연결 조건을 다르게 처리한다. 이러한 3차원 제약 조건은 2차원 맵보다 복잡한 문제를 야기한다. 셰이더(Shader)는 MeshPhysicalNodeMaterial을 사용하여 각 타일의 고도 정보를 인스턴스 색상으로 인코딩하고, 이를 기반으로 팔레트 텍스처를 혼합하여 시각 효과를 구현한다. WebGPU와 TSL을 활용하여 고품질의 시각 효과를 효율적으로 구현했다.
성능 최적화 및 렌더링 기법
저자는 4,100개 이상의 타일과 장식물을 효율적으로 렌더링하기 위해 BatchedMesh 기법을 사용했다. 각 헥스 그리드는 타일과 장식물에 대해 각각 하나의 BatchedMesh를 사용하며, 단일 드로우 콜(Draw Call)로 렌더링한다. 또한, 모든 메시는 단일 머티리얼(Material)을 공유하여 셰이더 상태 전환을 최소화했다. 이러한 최적화 기법을 통해 60fps의 성능을 유지하며, GTAO(Ambient Occlusion), DoF(Depth of Field), Vignette 등의 시각 효과를 적용했다.
