•
이미지 출처
– Three.js로 보는 절차적 월드 생성의 미학
요즘 “절차적 생성(Procedural Generation)” 이야기를 꺼내면 거의 빠지지 않고 등장하는 알고리즘이 있습니다.
바로 Wave Function Collapse(WFC).
이름만 들으면 양자역학 냄새가 물씬 나지만,
실제로는 “제약 조건 기반 타일 배치 알고리즘”에 가깝습니다.
이번 글에서는
•
WFC가 어떤 사고방식으로 동작하는지
•
왜 맵 생성에 잘 어울리는지
•
그리고 이걸 Three.js에서 3D 맵으로 시각화하면 얼마나 재밌어지는지
이 세 가지를 중심으로 이야기해보겠습니다.
1. 파동함수 붕괴? 진짜 물리학이냐고요?
먼저 이름부터 정리하고 가죠.
Wave Function Collapse (WFC)
→ 양자역학의 개념에서 이름을 빌려온 패턴 생성 알고리즘
물리학에서의 파동함수 붕괴는
“여러 가능성이 중첩된 상태 → 관측 순간 하나로 결정”되는 현상입니다.
WFC도 똑같습니다.
•
한 칸(Cell)은 처음엔 여러 타일이 들어갈 수 있는 상태
•
제약 조건이 적용되면서 가능성이 점점 줄어들고
•
결국 하나의 타일로 확정(Collapse) 됩니다
즉,
“아직 정해지지 않은 세계가, 규칙에 의해 하나의 세계로 수렴하는 과정”
이게 WFC의 핵심 아이디어입니다.
2. 왜 맵 생성에 찰떡일까?
WFC가 맵 생성에 잘 맞는 이유는 단순합니다.
2.1 랜덤인데, 무질서하지 않다
일반적인 랜덤 생성의 문제:
•
벽 옆에 갑자기 문
•
길이 끊김
•
구조적으로 말이 안 되는 배치
WFC는 다릅니다.
•
타일마다 이웃 가능 규칙(adjacency rules) 이 있고
•
규칙을 어기면 해당 배치는 애초에 불가능
그래서 결과물이 항상 “그럴듯합니다”.
2.2 디자이너 친화적이다
WFC의 진짜 장점은 이거예요.
•
알고리즘은 단순
•
월드의 성격은 타일 정의가 결정
타일만 잘 만들면:
•
던전
•
도시
•
건물 내부
•
산업 시설
•
사이버펑크 거리
전부 같은 알고리즘으로 생성됩니다.
3. WFC 알고리즘, 개발자 시점에서 한 번에 이해하기
개발자 관점에서 WFC를 요약하면 이렇습니다.
핵심 개념 3가지
1.
Cell
•
맵의 한 칸
•
가능한 타일 목록을 가지고 있음
2.
Entropy (엔트로피)
•
“이 칸에 들어갈 수 있는 경우의 수”
•
적을수록 우선 처리 대상
3.
Constraint Propagation
•
한 칸이 확정되면
•
이웃 칸들의 가능한 타일이 줄어듦
알고리즘 흐름 (의사 코드)
while (미확정 셀이 존재) {
cell = 가장 엔트로피가 낮은 셀 선택
tile = 가능한 타일 중 하나 선택
cell을 tile로 확정
이웃 셀에 제약 전파
}
TypeScript
복사
이 단순한 루프가
“그럴듯한 세계”를 만들어냅니다.
4. Three.js와 만났을 때 진짜 재미가 시작된다
WFC 결과를 2D 배열로만 보면 솔직히 심심합니다.
하지만 이걸 Three.js로 가져오는 순간 상황이 달라집니다.
4.1 타일 → 3D 메시로 매핑하기
각 타일을 이렇게 정의할 수 있습니다.
typeTile = {
id:string
mesh:THREE.Object3D
adjacency: {
north:string[]
south:string[]
east:string[]
west:string[]
}
}
TypeScript
복사
그리고 WFC 결과 그리드를 순회하면서:
grid.forEach((cell, x, z) => {
const tile = tiles[cell.tileId]
const mesh = tile.mesh.clone()
mesh.position.set(x * size,0, z * size)
scene.add(mesh)
})
TypeScript
복사
이 순간,
텍스트 기반 알고리즘이 공간이 됩니다.
4.2 WFC + Three.js = 디버깅이 쉬워진다
의외의 장점 하나.
•
제약이 잘못되면
•
맵이 이상해지고
•
3D 공간에서 바로 티가 난다
“아, 이 타일 북쪽 규칙 잘못 넣었구나”
→ 눈으로 바로 확인 가능
이건 콘솔 로그 100줄보다 훨씬 강력합니다.
5. 실시간 생성 & 시각화도 가능하다
Three.js를 쓰면
WFC를 프레임 단위로 시각화하는 것도 가능합니다.
•
한 칸씩 Collapse
•
엔트로피 색상 표시
•
확정되는 과정 애니메이션
이렇게요:
•
확정 전: 반투명
•
엔트로피 높음: 파란색
•
엔트로피 낮음: 빨간색
•
확정: 고정 컬러
결과적으로,
“맵이 만들어지는 과정 자체가 콘텐츠”
가 됩니다.
6. WFC는 마법이 아니다 (그래서 더 좋다)
중요한 얘기 하나.
WFC는:
•
만능 알고리즘 
•
AI
•
자동 디자인
대신,
•
규칙을 잘 정의하면
•
항상 말이 되는 결과를 만들어주는
•
아주 정직한 알고리즘입니다
결과물의 퀄리티는 100%
타일 설계 + 규칙 정의에 달려 있습니다.7. 마무리: Three.js + WFC, 이 조합은 간단하게 하는 수준으로 계속 쓸 만하다
정리해보면:
•
WFC는 “결정되지 않은 상태에서 시작하는 생성 알고리즘”
•
맵 생성에 최적화된 제약 기반 방식
•
Three.js와 결합하면:
◦
디버깅이 쉬워지고
◦
시각적 임팩트가 커지고
◦
실시간 생성까지 가능
게임, 시뮬레이션, 디지털 트윈, 보안 관제 맵, 건축 시각화까지
“구조가 중요한 3D 공간”이라면 간단하게 응용 가능합니다.
안녕하세요
•
관련 기술 문의와 R&D 공동 연구 사업 관련 문의는 “glory@keti.re.kr”로 연락 부탁드립니다.
Hello
•
For technical and business inquiries, please contact me at “glory@keti.re.kr”