Babylon.js 기반의 WebMMD 모델 뷰어를 추가했습니다
model: YYB Hatsune Miku_10th
DollRoom의 또 다른 MMD 스튜디오로서 "Studio Babylon"을 추가 구현했습니다.
이번 글에서는 이 "Studio Babylon"에 대해 소개하려고 합니다.
Babylon이란?
스튜디오 이름에 붙은 Babylon은 Babylon.js를 의미하며, 이는 웹 브라우저에서 3D 모델 등을 표시하고 조작할 수 있는 기술의 이름입니다.
기술적인 부분은 여기서 다루지 않지만, 관심이 있으신 분들은 공식 웹사이트를 참고해 주세요.
지금까지의 스튜디오는 Three.js라는 또 다른 웹 브라우저 상에서 3D를 다루는 기술을 사용하여 개발되었습니다.
그러나 용량이 큰 MMD 모델 파일을 다룰 때 오래된 아이폰에서 충돌하는 현상이 발생하여, 임시 해결책으로 텍스처 이미지 파일의 해상도를 낮추거나 모프 데이터를 줄여 가볍게 만들었습니다.
하지만, 영구적인 해결책을 찾고 있던 중 이번에 Babylon.js를 알게 되었습니다.
Babylon.js는 용량이 큰 파일도 빠르게 표시할 수 있으며, 위와 같은 대책 없이도 오래된 아이폰에서 문제없이 로드되었습니다.
이것이 제가 원하던 Web MMD 모델 뷰어에 딱 맞는다고 느껴 이번에 새로운 스튜디오를 추가하게 되었습니다.
스튜디오 Babylon에서 할 수 있는 것
현재로서는 베타 테스트 버전으로 구현되었기 때문에, 기존 스튜디오에 비해 할 수 있는 것이 제한적입니다.
또한, 제대로 동작하지 않는 경우가 많을 수도 있습니다.
그러나 조금씩 개선해나가면서 기능을 추가해 나갈 예정이니, 여유롭게 기다려 주시면 감사하겠습니다.
모델 업로드
PC에서 모델을 업로드할 때는 PMX 파일과 텍스처 파일이 포함된 폴더를 그대로 업로드하시면 됩니다.
스마트폰에서 모델을 업로드하려면 약간의 추가 작업이 필요합니다. 절차는 다음과 같습니다.
- PC에서 PMX 파일이 포함된 폴더를 업로드합니다.
- BPMX 파일을 다운로드합니다.
- 다운로드한 BPMX 파일을 스마트폰으로 전송합니다.
- 스마트폰에서 BPMX 파일을 업로드합니다.
BPMX 파일은 Babylon PMX라는, Babylon에서의 조작에 최적화된 특수한 PMX 파일로 이해하시면 됩니다.
PMX to BPMX Converter라는 공식 컨버터도 준비되어 있으니, 이 도구를 사용해 BPMX 파일을 생성하셔도 문제없습니다.
모델 표시
이전 스튜디오와 마찬가지로, 한 번 업로드된 모델은 목록에서 선택할 수 있습니다.
마음에 드는 모델을 목록에서 선택하여 스튜디오에 표시할 수 있습니다.
모션 설정
이전 스튜디오에서 업로드된 VMD 파일은 공유됩니다.
이전 스튜디오와 동일한 절차로 모델에 모션을 적용할 수 있습니다.
모션 적용 후에는 재생 및 정지 컨트롤러가 화면 하단에 표시됩니다.
카메라에 모션 설정
모션 적용 대상을 "카메라"로 설정하면 카메라용 VMD를 적용할 수 있습니다.
적용 방법은 모델에 적용할 때와 동일합니다.
포즈 설정
이전 스튜디오와 VPD 파일의 업로드 상태가 공유됩니다.
이전 스튜디오와 마찬가지로 동일한 조작으로 모델에 포즈를 적용할 수 있습니다.
스튜디오에 오디오 추가
MP3 형식의 파일을 업로드하여 스튜디오에 오디오를 적용할 수 있습니다.
한 번 업로드한 MP3 파일은 브라우저에 저장되며, 이후에는 다시 업로드할 필요 없이 목록에서 선택할 수 있습니다.
모프 조작
이전 스튜디오와 마찬가지로, 슬라이더를 사용하여 모프를 조작할 수 있습니다.
재질 투명도 조작
이전 스튜디오와 마찬가지로, 슬라이더를 사용하여 재질의 투명도를 조작할 수 있습니다.
스튜디오 물리 엔진의 활성화 및 비활성화
물리 엔진은 기본적으로 활성화되어 있지만, 필요 없는 경우 비활성화할 수 있습니다.
현재는 베타 테스트 중입니다
많은 기능이 테스트 단계에 있으며, 제대로 동작하지 않는 경우가 많을 것입니다.
앞으로 시간이 될 때마다 개발을 계속 진행하고, DollRoom을 자주 업데이트할 계획입니다!