Three.js 응용 : Splat 데이터 제작 및 시각화
- Splat 데이터의 본질: 실세계 물체를 촬영한 사진으로 생성되며, 일반적인 폴리곤 메시가 아닌 무수히 많은 포인트로 구성된 3D 가우시안 스프레팅 기반의 포인트 클라우드 데이터입니다. 📸
- 주요 활용 분야: 메타버스, 디지털 트윈 등에서 사실적이고 세밀한 3D 모델을 빠르고 정교하게 제작하는 데 각광받고 있습니다. 🌐
- 데이터의 구성 요소: 각 포인트는 좌표, 크기, 방향, 색상, 투명도와 같은 속성으로 정의되어 세부적인 텍스처 표현이 가능합니다. ✨
- 장점: 일반 카메라로 촬영한 사진만으로도 빠르고 정교한 모델 제작이 가능하며, 각 포인트의 색상으로 세밀한 텍스처를 표현할 수 있습니다. 🚀
- 단점: 정적인 포인트 데이터로 구성되어 모델 각 부분과의 상호작용이나 애니메이션 적용이 어렵습니다. 🚫
- 제작 과정 4단계:
- 동영상 촬영: 대상을 360도 회전하며 위, 정면, 밑을 기준으로 여러 번 촬영하고 카메라와 물체 간 거리를 일정하게 유지합니다. 📹
- 이미지 추출: 촬영한 동영상의 각 프레임을 FFmpeg와 같은 도구를 사용하여 이미지로 추출합니다. 🖼️
- 스플랫 파일 생성: 추출된 이미지를 Postshot과 같은 프로그램을 이용해 .ply 형식의 스플랫 파일을 생성합니다 (GPU 리소스 요구). 💻
- 데이터 정제 및 변환: SuperSplat과 같은 웹 기반 도구를 사용하여 불필요한 포인트를 제거하고 .splat 파일로 변환하여 용량을 최적화합니다. 🧹
- Three.js 시각화: Three.js는 스플랫 데이터 로딩을 기본 지원하지 않으므로,
three-splat-controls와 같은 외부 패키지를 활용하여 스플랫 파일을 3D 장면으로 불러와 시각화합니다. 💡
- 모델 조정: 로드된 스플랫 모델의 방향이나 크기가 잘못된 경우, Three.js 코드 내에서 스케일 및 변환을 통해 조정할 수 있습니다. 📐
데브허브 | DEVHUB | Three.js 응용 : Splat 데이터 제작 및 시각화