VRM에서 AI용 캐릭터 시트(Character Sheet)를 한 번에 추출하는 브라우저 툴 제작기

VRoid로 만든 캐릭터를 AI 이미지 생성 및 영상 생성의 '참조 이미지'로 사용하기 위해, VRM 파일로부터 특정 구도의 고해상도 PNG 파일을 추출하는 툴을 만들었습니다.

• 공개 페이지: https://kaazu.github.io/vrm-charsheet/
• 리포지토리: https://github.com/kaazu/vrm-charsheet (MIT)

제작 이유

제가 직접 만든 VTuber 캐릭터 '나나사키 시호(七咲しほ)'의 뮤직비디오를 fal.ai의 영상 생성 모델(MiniMax H3 Max 또는 Kling 등)로 만들고 있습니다. 이러한 모델들은 '캐릭터 참조 이미지'를 제공하면 외형을 유지해 주지만, 참조 이미지의 품질이 그대로 결과물에 반영됩니다.

처음에는 VRoid Studio의 추출 기능을 사용해서 정면, 측면, 후면 이미지를 준비했습니다. 그런데 다음과 같은 문제점들이 발생했습니다.

• 추출되는 이미지가 가로 235px 정도로 작고, 얼굴 부분은 약 40px에 불과함 - 얼굴 클로즈업 컷을 생성하면, 얼굴이 모델과 다르게 나옴 - Kling의 엘리먼트 기능은 이미지의 짧은 변이 300px 이상을 요구하여 애초에 받아들여지지 않음

즉, 해상도가 부족해서 AI가 얼굴의 세부 사항을 '상상으로 보정'해 버리는 것입니다.

VRoid Studio의 카메라를 수동으로 맞춰 고해상도 스크린샷을 찍는 것도 가능하지만, 6가지 구도를 매번 같은 화각으로 찍는 것은 번거롭습니다. 그래서 'VRM 파일을 불러와서 특정 구도를 지정된 크기로 PNG로 저장'하는 기능만 가진 툴을 만들었습니다.

주요 기능

• VRM 파일을 드래그 앤 드롭으로 불러오기

• 구도 프리셋 선택

• 전신 정면 / 측면 / 후면

• 상반신 정면

• 얼굴 정면 / 얼굴 사선(3/4)

• 필요에 따라 미세 조정 (방향, 내려다보는 각도, 거리, 시선의 높이, 화각) 및 표정 설정

• 출력 크기(기본 1536×2048) · 배경(투명 / 연회색 / 흰색 / 녹색) · 파일 이름 지정 후 저장

• '6 구도 일괄 저장'으로 모든 프리셋을 한 번에 추출

모든 처리는 브라우저 내에서 이루어지며, VRM은 어딘가로 전송되지 않습니다. 단일 HTML 파일이므로 다운로드하여 로컬에서 열어도 작동합니다.

실제 사용 결과

고해상도의 '얼굴 정면', '얼굴 사선'을 참조 이미지에 추가한 후 얼굴 클로즈업 컷을 다시 만들었더니, 눈 모양, 앞머리, 윤곽이 VRM의 얼굴과 상당히 비슷해졌습니다. 전신 3면도 1536×2048 크기로 제작되어 Kling의 엘리먼트 등록에도 바로 사용할 수 있습니다.

참조 이미지 조합으로는 현재로서는 다음과 같은 방식이 가장 안정적입니다.

• 시작 프레임 이미지
• 얼굴 정면 + 얼굴 사선
• 전신 정면

이렇게 4~5장의 이미지를 제공하는 것이 좋습니다 (와이드컷의 경우 얼굴 2장을 제외해도 무방함).

기술 메모

• three.js 0.160.0 + @pixiv/three-vrm 2.1.0을 사용했습니다. importmap으로 jsDelivr에서 직접 불러오기 때문에 빌드 툴이 필요 없습니다.
• VRM은 GLTFLoader.parseAsync(arrayBuffer)로 읽고, VRM 0.x는 VRMUtils.rotateVRM0()로 정면을 향하도록 보정합니다. - 구도 프리셋은 모델의 바운딩 박스에서 '시선의 높이', '거리'를 상대적으로 계산하기 때문에 키가 다른 모델이라도 대략 같은 화각이 나옵니다.
• 저장 시에는 renderer.setSize(W, H, false)로 렌더러의 크기를 지정된 사이즈로 변경하여 다시 그립니다. 그리고 toDataURL로 PNG를 만든 후 원래 크기로 되돌립니다. 표시용 크기와 독립적이므로 창 크기에 관계없이 고해상도로 추출할 수 있습니다. - 투명 배경은 WebGLRenderer({ alpha: true })와 preserveDrawingBuffer: true를 사용하여 그대로 PNG의 알파 채널에 담았습니다. - 2048px를 초과하는 사이즈는 GPU 성능에 따라 몇 초가 걸립니다.

향후 계획

• 영어 UI 전환 기능 추가
• 프리셋 저장 및 공유 (JSON)
• 포즈(VRMA)를 적용한 상태에서의 추출

또한 VRM용으로 만든 VRMA 연속 플레이어와 함께 사용하면, 영상 생성 소재 제작이 브라우저만으로 완결됩니다.

토론