3D 판과 주사위: 점수는 물리가 정하지 않습니다

결과 사전 결정 규칙과 3D 물리 시뮬레이션의 조화

웹 브라우저에서 3D 주사위 게임을 개발할 때 개발자가 맞닥뜨리는 가장 큰 딜레마는 '게임 규칙의 절대적 권위'와 '시각적 물리 엔진의 불확실성' 사이의 충돌입니다. 주사위를 물리 엔진에만 100퍼센트 맡겨 굴리게 되면, 부동소수점 오차나 브라우저 사양 차이, 기기 간 틱레이트 불일치로 인해 주사위가 컵 모서리에 비스듬히 걸쳐 멈추거나 어떤 숫자가 윗면인지 판정할 수 없는 교착 상태가 일어날 수 있어요. pqp의 3D 주사위 렌더링 모듈은 이 문제를 매우 혁신적인 방식으로 해결했습니다.

pqp의 핵심 설계 사상은 '결과 사전 결정 권위(Authoritative Pre-determination)' 원칙입니다. 사용자가 주사위 굴리기 버튼을 누르는 찰나의 순간, 게임 규칙 모듈이 암호학적으로 안전한 난수를 바탕으로 이번 턴의 공인 주사위 눈금 5개를 먼저 확정합니다. 예를 들어 5개의 주사위가 [6, 6, 6, 6, 6]이라는 야추 족보로 결정되었다고 해볼게요.

그다음 화면에서는 Three.js(WebGPU 및 WebGL2 폴백)와 Rapier3D WASM 물리 엔진이 가동되어 주사위 컵이 흔들리고 주사위들이 탁자 위로 힘차게 쏟아지는 화려한 3D 시뮬레이션을 펼칩니다. 주사위들은 테이블 바닥과 서로 부딪치며 회전 관성과 반발 계수에 따라 자연스러운 물리 궤적을 그리며 흩어져요. 시각적으로는 완벽한 물리 법칙을 따르면서도, 시스템 내부적으로는 사전 결정된 주사위 눈금이 한 치의 오차도 없이 보장되는 이중 구조입니다.

성능 면에서도 차세대 그래픽 표준인 Three.js WebGPU 렌더러를 기본으로 채택하고, 지원하지 않는 구형 브라우저에서는 WebGL2로 자동 전환되는 안전한 폴백 파이프라인을 구축하여 모바일 기기에서도 초당 60프레임을 흔들림 없이 유지합니다.

다음 표는 3D 주사위 렌더링 및 물리 파이프라인의 구성 요소와 책임을 정리한 아키텍처 개요입니다.

이 파이프라인 덕분에 시각적 몰입감과 보드게임 규칙의 공정성을 동시에 달성할 수 있습니다.

24개 정육면체 회전 대칭군과 면 재라벨링

사전 결정된 주사위 눈금과 자유로운 물리 낙하를 매끄럽게 연결하기 위해 초보 개발자들은 주사위가 멈추는 순간 목표 숫자가 위로 오도록 강체의 회전 각도를 억지로 돌려버리는 '애니메이션 스냅(snap)' 방식을 쓰곤 합니다. 하지만 주사위가 바닥에 얌전히 안착했다가 마지막 프레임에서 뚝 끊기며 회전하는 현상은 플레이어에게 조작된 느낌을 주고 몰입감을 완전히 깨뜨려 버려요. pqp는 정육면체의 '24가지 회전 대칭군(Rotational Symmetries, Oh 부분군)'을 활용한 수학적 면 재라벨링 알고리즘으로 이 난제를 해결했습니다.

첫 번째 예시로 사전 확정된 주사위 숫자가 '6'인데, 물리 시뮬레이션 결과 바닥에 정지했을 때 윗면을 향한 물리적 눈금이 '2'로 안착하는 상황을 살펴보겠습니다. 주사위 모듈은 주사위가 컵에서 튀어나오기 직전 짧은 물리 사전 시뮬레이션을 거쳐 최종 안착 시 하늘을 향할 윗면이 2번 면이 될 것임을 미리 파악해요. 이때 주사위의 3D 공간상 물리적 위치나 각도는 단 0.001도도 억지로 비틀지 않습니다.

대신 24가지 정육면체 회전 대칭군 변환 테이블에서 2번 면이 6번 면과 일치하도록 대응하는 대칭 인덱스를 즉각 찾아냅니다. 그리고 주사위 6개 면 머티리얼에 새로 생성한 눈금 텍스처를 던지기 애니메이션이 시작되기 전에 미리 재할당해 두어요. 따라서 주사위가 컵에서 쏟아져 나와 현실적인 감속과 바운스를 거쳐 테이블 위에 멈췄을 때, 어색한 꺾임이나 시각적 왜곡 없이 완벽한 '6'의 눈금으로 당당하게 안착하게 됩니다.

두 번째 예시로 5개의 주사위가 동시에 굴러떨어져 [1, 2, 3, 4, 5] 라지 스트레이트를 만드는 복합 상황을 들여다보겠습니다. 5개의 다이스는 서로 충돌하며 각자 임의의 면(예: 3, 5, 1, 6, 2)으로 정지하지만, 5개 주사위 각각에 독립된 24대칭 재라벨링 매핑이 동시에 적용되어 1번부터 5번까지의 눈금이 자연스러운 안착 포즈 그대로 윗면에 표시됩니다. 어색한 인위적 꺾임 없이 물리 시뮬레이션의 우아함과 규칙의 정확성을 완벽하게 양립시킨 기술적 정수입니다.

웹 브라우저 3D 물리 개발의 함정과 최적화

웹에서 WebAssembly 기반 물리 엔진을 구동할 때 주의할 점은 CPU 부하와 가비지 컬렉션의 최소화입니다. 매 프레임마다 주사위 강체의 위치와 회전 정보를 얻기 위해 새로운 3차원 위치 벡터나 회전 쿼터니언 객체를 매번 새로 생성하면, 초당 수천 개의 임시 객체가 메모리에 쌓여 주기적인 화면 끊김 현상(프레임 드랍)을 유발합니다.

pqp의 3D 엔진은 렌더 루프 외부에서 미리 인스턴스화된 캐시 벡터와 쿼터니언을 재사용(mutation)하여 GC 오버헤드를 0에 수렴하도록 통제했습니다. 또한 주사위 5개의 선속도 제곱(0.02)과 각속도 제곱(0.05)이 일정 기준 이하로 떨어져 정지 상태가 0.15초 이상 유지되면, 시뮬레이션 루프를 조기에 탈출하고 물리 월드 메모리를 즉시 해제하여 불필요한 연산 낭비를 차단해요.

또 다른 위험은 주사위가 탁자 밖으로 튕겨 나가거나 주사위 컵 벽면을 뚫고 지나가는 터널링(tunneling) 현상입니다. 주사위 투척 초기 속도가 너무 빠르면 1프레임 사이에 벽을 관통해 버릴 수 있어요. pqp는 주사위 충돌체에 연속 충돌 감지(CCD, Continuous Collision Detection)를 활성화하고, 충분한 높이(12단위)의 외벽과 천장 콜라이더를 촘촘히 둘러 벽 관통 사고를 원천 차단했습니다.

pqp 3D 야추에서 물리 궤적 체험하기

pqp 야추 다이스 3D 모드를 실행하고 주사위 굴리기 버튼을 여러 차례 눌러보세요. 주사위들이 컵에서 튀어나와 녹색 테이블 위를 구르고 튀는 물리적 궤적을 유심히 관찰하는 연습입니다.

주사위가 완전히 멈추는 마지막 순간에 카메라 앵글을 돌려보세요. 바닥에 닿은 면과 하늘을 향한 윗면이 정육면체의 마주 보는 눈금의 합(1과 6, 2와 5, 3과 4) 법칙을 완벽히 지키면서도 어떠한 미세한 튐이나 각도 뒤틀림 없이 자연스럽게 안착해 있는 모습을 확인할 수 있습니다.

고급 3D 그래픽 기술과 엄밀한 수학적 대칭군 알고리즘이 결합되어 웹 브라우저 안에서 손끝으로 만져지는 듯한 실감 나는 손맛을 전달하는 개발 디테일을 직접 체험해 보세요.

확인한 자료와 정정 문의

이 글은 아래 구현과 예시를 기준으로 썼습니다. 도구의 모형과 실제 게임의 최신 규칙이 다른 경우에는 게임 공지를 먼저 확인해주세요. 잘못된 설명은 운영자에게 알려주세요.

• pqp 3D 보드판 및 주사위 렌더링 파이프라인 구현
• 물리 엔진 기반 주사위 낙하와 충돌 시뮬레이션
• 정육면체 24가지 회전 대칭군과 면 텍스처 재라벨링 알고리즘
• pqp 요트의 규칙 판정과 눈금 사전 결정 로직