
아슬아슬하게 세이프. 방금 사용 불가능해진 fable5로 시도한 WebGL2와 Gemini Live API
요약
Fable 5와 Gemini Live API를 활용하여 WebGL2 파티클 기반의 인터랙티브 아바타를 구현한 사례입니다. 도트 그래픽을 파티클로 변환하고 음성 크기에 따라 입 모양이 움직이도록 설계하여 생동감 있는 반응을 구현했습니다.
핵심 포인트
- ChatGPT를 이용해 사진을 도트 그래픽으로 변환하여 캐릭터 느낌 구현
- WebGL2 파티클 시스템을 활용해 애니메이션 없이 부드러운 입 움직임 구현
- Gemini Live API와 음성 볼륨을 연동하여 실시간 인터랙션 완성
- Push to Talk 방식을 적용하여 대화의 템포와 안정성 확보
Fable 5의 도움을 듬뿍 받아, 제 사진을 WebGL2 파티클 (particle)로 만들어서 마우스로 건드리면 살랑살랑 흩어졌다가 다시 원래대로 돌아오는 것 같은 것을 만들며 놀고 있었습니다.
마침 조금 전에 다른 건으로 Gemini의 Live API를 만져보고 있었기에, 이것을 합체시키고 싶다는 생각에 실행에 옮겼습니다.
클릭해서 말을 걸면, 파티클로 된 제가 입을 뻐끔거리며 대답합니다. 제가 말하는 동안에는 귀에 손을 대고 듣는 포즈를 취합니다.
크게 3가지입니다.
- 원래 사진을 ChatGPT의 image 2로 도트 그래픽 (dot art)으로 변환
- 그 도트 그래픽을 fable5에게 부탁하여 WebGL2로 파티클화
- Gemini Live API를 연결하여 발화에 맞춰 입을 움직임
사진 그대로라면 너무 생생했기에, 먼저 ChatGPT의 image 2로 도트 그래픽으로 변환했습니다. 적당히 데포르메 (deform) 되어, 입자로 만들었을 때의 캐릭터 느낌이 살아났습니다.
도트 그래픽의 1픽셀을 하나의 입자로 하고, 각 입자가 '자신의 위치'를 기억하고 있어서, 움직여도 내버려 두면 스프링처럼 돌아오는 구조입니다.
이 점이 이번에 효과적이었는데, 입을 움직이는 것도 '입 주변 입자의 위치를 살짝 옮기는 것'뿐입니다. 옮기면 입자가 알아서 따라오고, 다시 돌려놓으면 알아서 원래 입 모양으로 돌아오기 때문에, 애니메이션을 작성하지 않고도 부드럽게 움직입니다. 깊이감도 있어서, 입을 벌리면 약간 입체적으로 움직이는 것처럼 보입니다.
입 모양(口パク)은 돌아오는 음성의 '음량'으로 움직이고 있습니다. 소리가 크면 입을 벌린다, 그뿐입니다. 조잡하지만, 오히려 도트 그래픽 캐릭터 느낌에 딱 적당한 정도였습니다.
입력은 Push to Talk 방식으로 했습니다. *상시 마이크 ON 상태라면 주변 소음이나 혼잣말에 반응하여 템포가 깨졌기에, 누르고 있는 동안만 듣는 방식으로 변경했습니다. 이로써 '말하기 → 기다리기 → 대답'의 캐치볼이 성립되었습니다.
제가 말하는 동안에는 분신이 귀에 손을 대고 듣는 포즈를 취합니다. 귀를 댄 이미지를 만들어서 그것과 교체하는 이미지입니다.
조금 전에 만져보던 Live API와, Fable 5로 만든 파티클 분신이 이렇게 합체되었습니다. 개인적으로는 상당히 만족스럽습니다.
다음에는 RAG를 연결하여 회사에 관한 것을 대답할 수 있도록 만들 예정입니다.
……라고 쓰고 있는 도중에, Fable 5가 미국 정부의 명령으로 공개 중단되었다는 뉴스가 날아들었습니다. 서비스 시작 후 단 3일 만에. 아쉽습니다. opus로 열심히 해보겠습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기