SOTAESAN ATLAS

Markdown 원본 다운로드

3D 공간 스파이크 결과 보고서: 엔진 비교와 선택

작성일: 2026-10-04 · 테스트 기간: 2026-10-02~04 · 대상: 이 저장소의 로컬 스파이크

발표 자료: HTML · PDF 10장. HTML은 방향키로 페이지를 넘길 수 있으며, 전체 보기와 인쇄도 지원한다.

1. 검토 결과 요약

이번 테스트에서는 PlayCanvas + Ammo를 우선 후보로 추천한다. 같은 Sunnyvale 원본을 데스크톱에서 열었을 때 앱이 준비될 때까지 걸린 시간이 가장 짧았고, iPhone 11에서도 대형 원본의 준비 완료를 두 차례 확인했다. 핵심 기능은 세 구성 모두 구현하고 확인했으므로, 기능 지원 여부보다 로딩 성능의 차이가 선택에 더 큰 영향을 준다. 이번 스파이크 범위에서의 추천이며, 최종 엔진 선택이나 전체 서비스의 성능을 보장하는 결론은 아니다.

비교 항목 테스트 결과 선택 시 고려할 점
데스크톱 원본 로딩 캐시 초기화(cold) 중앙값 BVH 2.784초 / Rapier 3.009초 / Ammo 1.560초 현재 구성에서는 PlayCanvas가 유리
iPhone 대형 원본 Ammo 준비 완료 2회, BVH 준비 완료 안 됨, Rapier 별도 테스트 안 함 모바일에서도 원본을 열어야 한다면 PlayCanvas를 선택할 근거가 더 많음
시대 전환·분할 로딩·설명·오류 복구 데스크톱 세 구성 모두 통과 이 기능의 지원 여부로 엔진을 제외할 이유는 없음
축소·분할한 모바일 장면 세 구성 모두 준비·이동·데이터 해제·다시 로딩 통과 Three.js도 장면 데이터를 조정하면 모바일에서 사용할 수 있음
벽 비침 두 렌더러 모두 벽 뒤의 시험용 표시가 보임 엔진을 바꾸는 것만으로 해결된다고 보기 어려움
제작·운영 비용 변경 작업은 정리했으나 작업 시간과 요금은 측정하지 않음 비용 순위나 총사업비를 산출할 수 없음

Three.js + Spark + BVH도 대안으로 남겨둘 수 있다. 축소본을 여는 데 성공했어도 iPhone에서 대형 SH3 원본을 열지 못한 문제는 남아 있다. 기존 Three.js 시스템과의 연동이 중요하고 모바일용 데이터의 축소나 SH 조정이 가능하다면 선택이 달라질 수 있다. 다만 연동의 이점과 실제 작업 비용은 이번 테스트에서 측정하지 않았다.

Rapier를 기본 구성으로 바꿔야 할 근거는 아직 부족하다. 일부 Node 테스트에서는 벽이나 계단의 처리 비용이 낮았지만, 다른 구간과 준비 비용에서는 그렇지 않았다. 현재 Rapier 구성에는 가림 처리와 디버깅에 쓰는 BVH도 남아 있어 물리 라이브러리만 따로 비교한 결과는 아니다.

2. 비교 대상과 테스트 환경

항목 구성·조건
Three.js BVH Three.js 0.186.1 + Spark 2.2.0 + three-mesh-bvh 0.9.15
Three.js Rapier 위 렌더링 구성 + Rapier3D compat 0.21.0, BVH도 유지
PlayCanvas Ammo PlayCanvas Engine 2.22.6 + Ammo, Engine을 코드로 사용하고 호스팅 Editor는 사용하지 않음
데스크톱 Apple M4 Pro, 브라우저 창을 띄운 Chromium 154(headed), ANGLE Metal 하드웨어 GPU, 앱 하나·테스트 탭 하나
로딩·안정성 테스트 화면 1200×863 CSS px, 기기 DPR 2, 앱 DPR 상한 1.5, 탭이 화면에 보이고 포커스가 있는지 확인
iPhone 실제 iPhone 11, 기기에서 조회한 iOS 27.0.1 / 24A446, Safari, Apple GPU
iPhone 초기 비교 화면 375×616 CSS px, DPR 2, 앱 상한 1.5, 화면에는 표시되지만 hasFocus=false
Sunnyvale 원본 3,999,361점, SH3 SOG 58,072,500바이트, 원본 충돌 데이터 337,680삼각형
Hall 공통 장면 현재 900,000점 / 과거 701,370점, 수동으로 만든 충돌용 프록시 24삼각형

장면이나 빌드 버전, 통계 집계 범위가 다른 결과는 합산하지 않았다. 로딩 시간은 앱에 준비 완료 표시가 나올 때까지 측정했으며, GPU가 첫 화면을 그리는 시점과는 다르다. 모바일의 합성 TouchEvent 테스트는 앱의 입력 처리를 확인한 것으로, 실제 손가락 조작의 사용성을 검증한 결과는 아니다. 모든 수치는 이번 로컬 테스트 환경에서 측정한 값이다.

3. 데스크톱 로딩 시간과 전송량

Sunnyvale 원본으로 캐시 초기화(cold)와 캐시 유지(warm) 조건에서 구성별로 각각 3회, 총 18회 측정했다. 아래 표는 각 3회의 중앙값이다. cold에서는 HTTP 브라우저 캐시만 초기화했다. 프로세스·OS·DNS·GPU 캐시는 초기화하지 않았다. 요청을 가로채지 않았으며, 페이지와 워커(worker)의 HTTP 요청을 함께 집계했다.

지표 Three.js BVH Three.js Rapier PlayCanvas Ammo
캐시 초기화 후 준비 시간(cold, ms) 2,784.2 3,008.5 1,559.9
캐시 초기화 후 준비 시간 범위(ms) 2,600.6~2,888.4 2,883.5~3,235.3 1,497.2~1,569.5
캐시 유지 시 준비 시간(warm, ms) 1,742.0 2,021.4 766.9
캐시 초기화 후 HTTP 전송량(MB) 65.34 66.98 65.58
캐시 유지 시 HTTP 전송량(바이트) 1,120 1,299 1,374

MB는 1,000,000바이트 기준이다. localhost의 preview 빌드에서 측정했으므로 원격 CDN이나 모바일 회선의 로딩 시간을 예측하는 데 사용할 수 없다. 현재 구현 전체를 비교한 결과이며, 렌더러나 물리 라이브러리 하나의 영향만 분리한 값도 아니다.

Hall에서 시대를 연속 20왕복 전환했다. 각 방향의 첫 표본을 제외한 19회 중앙값은 다음과 같다. 클릭 요청부터 switchDone까지 측정했으며, GPU가 첫 화면을 표시할 때까지의 시간은 아니다.

전환 방향 BVH Rapier Ammo
과거로(ms) 166.3 166.6 99.1
현재로(ms) 194.0 192.7 114.3

근거: 로딩·메모리 비교, 로딩 원본 JSON, 시대 전환 원본 JSON.

4. 메모리, 이동 성능, 안정성

메모리 측정 범위

Sunnyvale을 캐시 유지(warm) 상태에서 3회 실행한 결과의 중앙값이다. 안정화 시간을 두고 GC를 실행한 뒤 측정했으며, 메인 스레드와 워커를 나눠 기록했다.

측정값(MB) BVH Rapier Ammo
메인 JS 힙 usedSize 7.43 12.34 8.46
메인 backingStorageSize 269.19 279.71 79.40
워커 JS 힙 합계 1.46 1.46 0.30
워커 수 3 3 1
워커 backing storage 각 약 0.053 각 약 0.053 84.19

공유 버퍼가 중복으로 집계될 수 있으므로 backing storage를 합산한 값을 실제 RAM 사용량으로 볼 수 없다. GPU/VRAM, 전체 프로세스 RAM, iPhone 메모리도 측정하지 않아 전체 메모리 사용량의 우열은 판단을 보류한다.

이동 처리 비용과 프레임 간격

데스크톱 브라우저에서 정지 상태와 외벽을 향해 전진하는 상태를 각각 30초씩 3회 측정했다. 세 구성의 총 실행 횟수는 18회다. 계측한 처리 시간의 p95를 반복별로 구한 뒤 중앙값을 계산하면 0.1~0.6ms 범위였다. Three.js는 앱의 보행 step, PlayCanvas는 엔진의 rigidbody system을 측정한다. 측정 범위와 벽에 닿는 위치가 달라 물리 엔진의 순위를 매길 수는 없다.

같은 테스트에서 측정한 전체 프레임 간격은 아래와 같다. 30초 구간마다 구한 p95의 3회 중앙값이며, 렌더링·물리·앱 실행이 모두 포함된다.

데스크톱 Sunnyvale 프레임 간격 p95(ms) BVH Rapier Ammo
시작점에서 정지 50.5 50.3 33.8
외벽을 향해 전진 49.3 116.7 33.7

이번 조건에서는 PlayCanvas의 프레임 간격이 더 일정했다. 카메라와 접촉 위치, 처리 범위가 같지 않고 CPU와 GPU의 실행 시간을 나눠 분석하지 않아 차이의 원인은 확인하지 못했다. 작은 Hall 장면의 안정성 테스트 수치와는 따로 해석해야 한다.

별도 Node 60Hz 테스트의 p95 중앙값은 BVH/Rapier 각각 시작점(spawn) 0.0072/0.0393ms, 외벽 0.2963/0.1876ms, 계단 0.3140/0.1121ms였다. 구간에 따라 더 빠른 구성이 달랐다. 렌더링과 네트워크를 제외한 계산 테스트이므로 모바일 성능을 예측하는 데 사용할 수 없다.

추가로 현관 마루의 바닥을 보정한 뒤에는 세 구성 모두 왕복 이동, 정지, 난간 충돌 테스트를 통과했다. 원본 충돌 데이터에서 비어 있던 부분을 작은 공통 바닥으로 채운 결과다. Rapier의 계단 이동 차이는 남아 있으며, 분할·시대 장면에서 Rapier와 iPhone을 다시 검증한 결과는 아니다. 이전 문서에 기록한 벤치 왕복 이동 실패와 이 추가 테스트의 결과를 구분해야 한다.

약 10분간의 안정성 테스트

Hall에서 구성별로 1회씩, 20×30초 구간 동안 시대 전환과 패널·충돌 표시 조작을 테스트했다. 세 구성 모두 앱 예외, unhandled rejection, 앱 진단 오류, WebGL context lost가 확인되지 않았다. 프레임 간격 p95는 세 구성 모두 17.4ms였다. PlayCanvas에는 favicon 404 메시지가 별도로 있어 콘솔 메시지가 전혀 없었다고 볼 수는 없다.

이 결과는 작은 Hall 장면에 한정된다. Sunnyvale 대형 원본이나 모바일의 장시간 안정성, 강제로 WebGL 컨텍스트를 잃은 뒤의 복구, 메모리 누수 여부는 검증하지 않았다.

근거: 이동 처리 비용, Node 원본, 현관 바닥 보정, 안정성 비교, 안정성 원본.

5. iPhone 테스트 결과

대형 원본과 비교용 데이터

구성·데이터 결과 해석 시 주의할 점
PlayCanvas Ammo / Sunnyvale 원본 SH3 두 차례 준비 완료 실제 iPhone에서 원본 로딩에 성공했으나 같은 조건으로 반복 측정한 시간 비교는 아님
Three.js BVH / 같은 원본 SH3 준비 완료 안 됨 추가 진단에서 다운로드는 2.250초에 끝났으나 73.030초까지 디코딩·준비 완료를 확인하지 못함
Three.js Rapier / 같은 대형 원본 별도 테스트 안 함 BVH의 실패를 Rapier에서 측정한 실패로 기록하지 않음
Three.js BVH / 같은 점 수 SH0 준비 47.320초, 디코딩 43.412초 고차 SH를 제거한 비교용 데이터는 성공했으나 원본 SH3 문제는 남아 있음
축소 900,000점 SH0 분할 / 세 구성 준비·이동·데이터 해제·다시 로딩 통과 품질과 입력 조건이 다른 기능 테스트

PlayCanvas의 두 실행에서 앱 준비 완료 표시는 약 14.97초와 19.11초에 나왔다. 캐시와 실행 조건을 맞춘 반복 비교가 아니므로 BVH의 비교용 데이터와 몇 배 빠른지 계산하지 않는다. 첫 실행의 탐색 프레임 기록에는 약 1.57초 지연도 있었다. 로딩 성공만으로 탐색이 부드럽다고 판단할 수는 없다.

대형 원본이 열리지 않은 원인은 아직 확인하지 못했다. 고차 SH 처리와 메모리 할당이 조사 대상이지만, 메모리 부족(OOM)이나 특정 SDK의 결함으로 단정할 수는 없다. 다운로드가 끝났어도 데이터 디코딩과 앱 준비까지 끝난 것은 아니다. 추가 테스트에서 900,000점 단일 축소본의 준비 완료를 확인한 시각은 48.501초였지만, 정확히 그때 준비됐다는 뜻은 아니므로 로딩 시간으로 사용하지 않는다.

작은 Hall 장면에서 정지 상태의 프레임 간격

지표 BVH Rapier Ammo
30초×3회 통합 p95(ms) 65 78 52
프레임 수 1,509 1,540 2,242

온도·배터리·실행 순서·캐시를 통제하지 않았고 hasFocus=false였다. 이번 조건에서는 PlayCanvas의 정지 상태 프레임 간격이 짧았다. 초기 이동 테스트는 바닥 밖으로 떨어지거나 구성별 복구 방식이 달라 정상 보행 성능 비교에서 제외했다. 이후 데스크톱에서 확인한 복구 기능의 결과를 iPhone 성능 재측정 결과와 섞지 않는다.

근거: 모바일 비교, 원본, 로딩 기록, 디코딩 비교 테스트, 비교 테스트 원본.

6. 핵심 기능과 장면 분할 로딩

확인 항목 BVH Rapier Ammo 테스트 조건
시대별 화면·충돌 데이터 교체, 겹칠 때 안전한 위치로 이동 통과 통과 통과 데스크톱, 시대별로 설정한 가상 벽
전환 실패 → 이전 시대 복구 → 재시도 통과 통과 통과 데스크톱에서 의도적으로 오류 발생
구역별 상세 화면·충돌 데이터 함께 로딩·해제·다시 로딩 통과 통과 통과 Sunnyvale 축소 SH0, 데스크톱·iPhone
시대별 설명, 전환 시 이전 패널 정리 통과 통과 통과 Sunnyvale 추가 데스크톱 테스트
Sunnyvale 분할 로딩 + 시대 전환 + 설명 연동 통과 통과 통과 추가 데스크톱 테스트, iPhone 재검증은 아님

Sunnyvale을 900,000점 SH0로 다시 인코딩한 뒤 X축 방향으로 6개 구역으로 나눴다. 원본 3,999,361점 SH3와는 시각 품질이 다르다.

과거 장면은 현재 촬영한 SOG에서 가상 벽과 설명을 바꿔 테스트했다. 실제 과거 건물이나 시대별 바닥, 역사 자료를 제작하고 검증한 결과는 아니다.

근거: 핵심 기능, 화면·충돌 데이터 함께 분할하기, 9개 원본 기록 (원본 저장소 파일), Sunnyvale 시대 전환·설명 연동.

7. 벽 비침: 두 렌더러에서 확인한 품질 문제

두 앱에서 카메라 위치와 방향을 같게 맞췄을 때, 원본 SOG의 벽 뒤에 둔 불투명 주황색 표시가 벽을 통해 보였다. 선택한 픽셀의 시선 방향에서 충돌 벽까지의 거리는 1.644~1.809m로, 카메라의 근거리 표시 한계(near)인 0.05m보다 충분히 멀었다. 이 조건에서 나타난 현상을 단순히 카메라 근접 영역이 잘린 결과로 설명하기는 어렵다.

사용자가 처음 본 빨간 박스와 위치 JSON은 남아 있지 않다. 당시 화면을 정확히 재현했는지, 어두운 형태가 실제 가구인지 판단하지 않는다. 두 앱에서 같은 현상이 보였다는 사실만으로 SOG 원본의 문제인지, 특정 렌더러의 문제인지 단정할 수도 없다.

벽 일부에 불투명 GLB 면을 덧댄 테스트에서는 고정된 4시점×2엔진의 시험용 표시 영역 차이가 0이었다. 해당 영역을 가릴 수 있음을 확인한 것이다. 이어 이동·시대 전환·근접 시점의 화면 76장을 저장했다. 벽 가까이에서 아래를 보면 보정 면의 범위와 질감 경계가 드러났고, 표시로 향하는 시선이 보정 면의 위쪽을 벗어났다. 부분 보정은 가능했지만 완성된 보정 데이터로 보기는 어렵다.

벽을 제대로 가리는지는 두 렌더러 모두 확인해야 할 품질 문제다. 엔진 선택과 별도로 촬영 데이터와 보정 면을 제작하고 검수해야 한다. 이번 보고서에서는 여기까지 확인한 결과로 판단하며, 추가 보정을 완료 조건으로 삼지 않는다.

근거: 벽 비침 조사, 고정 시점 원본 (원본 저장소 파일), 이동·시대 전환·근접 시점 기록, 이미지 갤러리.

8. 제작·변경 작업과 비용

작업 확인한 구현 방식 아직 측정하지 않은 비용
장면 데이터 교체 SOG/GLB + 매니페스트·해시·좌표·충돌 데이터 정합 검사 촬영·정합·품질 검수 시간
구역 분할·LOD 공통 Python 생성기 + 엔진별 생성·해제 경계 검수, 다른 장소에도 적용할 수 있도록 확장, 변경분만 제작
시대·설명 작성 작성용 JSON → 공통 생성·검사 → 두 엔진에 적용 실제 역사 자료·건물·충돌 데이터 제작 시간
이동·벽 보정 공통 충돌·화면 데이터 + 각 이동 제어기 검증 실제 치수 확인·모바일 검수 시간
배포 양쪽 빌드 결과에 공용 데이터 전체 복사 저장·전송 요금과 서비스 이용량

Sunnyvale 데이터 18개를 생성하는 데 걸린 80.325초는 프로그램의 변환 시간이다. 사람이 제작하거나 검수한 시간이 아니다. 실행 중 필요한 데이터만 불러오면 요청량은 줄지만, 현재 배포 방식에서 저장 용량까지 줄어드는 것은 아니다. 이번 구현에서는 PlayCanvas Editor를 사용하지 않으므로 Editor 사용료를 필수 비용으로 포함하지 않는다.

근거: 제작·변경 작업과 의존성.

9. 엔진 선택에 반영할 사항

  1. 대형 원본을 모바일에서도 열고 초기 로딩 시간을 줄이는 것이 중요하다면 PlayCanvas + Ammo를 우선 검토한다. 이번 테스트에서 가장 직접적으로 확인한 장점이다.
  2. 기존 Three.js 시스템과의 연동이 중요하고 데이터 축소나 SH 조정이 가능하다면 Three.js + BVH를 대안으로 검토한다. 원본 SH3의 모바일 로딩 문제와 시각 품질 변화도 함께 고려해야 한다.
  3. 현재 결과만으로 Rapier를 기본 구성으로 채택하지는 않는다. 특정 이동 기능이 필요할 때 검토할 후보로 남겨둔다.
  4. 벽 비침, 실제 시대별 데이터, 모바일 사용성, 제작 시간은 공통으로 남은 검토 항목이다. 스파이크에서 모든 문제를 수정하지 않아도 후보 선택은 가능하다.

이 자료는 후보를 고르는 데 사용한다. 전체 RAM·GPU 메모리, 실제 손가락 조작, Android, 대형 장면의 모바일 장시간 안정성, 전체 제작·운영비는 아직 판단할 수 없다. 해당 항목을 검증 완료로 표시하거나 가중 점수로 환산하지 않는다.

10. 근거 자료와 빌드 버전

아래 짧은 식별자는 모두 local-4d5905679d2e- 뒤의 값이다. 빌드 버전이 다른 수치를 같은 빌드에서 측정한 결과처럼 합산하지 않았다.

테스트 기록 주요 빌드 식별자 근거 자료
10-02 원본 로딩·메모리 5135b39646a7 18회 로딩, Hall 연속 전환
10-02 안정성·초기 iPhone 6df18be3ac38 Hall 약 10분, 정지 상태 프레임·대형 원본 기록
10-02 오류 대응·디코딩 비교 882e63d01db8 데스크톱 복구 기능, iPhone SH 비교
10-03 화면·충돌 데이터 함께 분할 ee9a19b94a78 데스크톱·iPhone 9개 기록
10-03 Sunnyvale 시대 전환·설명 연동 89a5df9eff9e 추가 데스크톱 기능 테스트, 이전 처리 비용 표본과 구분
10-03~04 벽 조사·부분 보정 각 원본 JSON 참조 카메라와 world 응답을 바꾼 화면 테스트, 로딩 성능 표본에서 제외

이 보고서와 발표 자료는 기존 테스트 기록을 정리한 것이다. 작성 과정에서 앱 소스를 수정하거나 성능을 다시 측정하지 않았다.