ai 딸각 - 웹 버튜버 시스템

luna 성능 테스트 하려고 + kinect 버리고 웹캠만으로 얼마나 구현이 가능할까 해서 시도

결론 : luna는 드러워서 안써!

three.js / three-vrm / tensorflow.js 를 이용해서 작성을 했다고 한다.

 

mediapipe 라는걸 써서 눈 / 입술 / 손 / 포즈를 추적하는 듯.

three-vrm 에서 머리카락에 대한 흔들림 정도는 재현해 주고 옷에 대한 클로스 애니메이션 정도는 제한적으로 지원하는 듯

용도	라이브러리	역할
몸 추적	@tensorflow-models/pose-detection 2.1.3, @mediapipe/pose	기본은 BlazePose Lite로 관절의 3D 방향을 추정합니다. 초기화에 실패하면 PoseNet으로 2D 관절을 추적합니다.
얼굴 추적	@tensorflow-models/face-landmarks-detection 1.0.6, @mediapipe/face_mesh	눈과 입술 좌표를 얻어 좌우 윙크와 입 벌림을 각각 계산합니다.
손 추적	@tensorflow-models/hand-pose-detection 2.0.1, @mediapipe/hands	손마다 21개 관절을 추적해 손가락 굽힘과 손목 회전을 계산합니다.
추론 실행	TensorFlow.js core, converter, backend-webgl 4.22.0	PoseNet 모델을 불러오고 브라우저의 WebGL에서 실행합니다.
3D 뷰어	three 0.170.0, OrbitControls	아바타를 그리고 마우스로 시점을 회전·확대·이동합니다.
VRM 처리	@pixiv/three-vrm 3.4.2	miko.vrm을 읽고 관절, 표정, 머리카락 SpringBone을 갱신합니다.
빌드	vite 6.0.5	브라우저에서 실행할 앱을 빌드합니다.

 

그리고 vrm 에는 계층이 있어서 fk 정보는 충분하지만 constraint 까지는 없는지 손가락이 막 반대로 굽혀지고 난리가 나긴 한다.

또한 mediapipe/pose는 깊이 까지는 정확하진 없다고 해야햐나.. ik 등으로 팔 관절을 어느정도 유추하게 구현하려고 했지만

그정도 까지 잘 구현되진 않아 보이는 듯.

VRM에는 손가락 본의 계층과 기본 자세가 있어서 FK에 쓸 수 있습니다. 손가락을 어느 축으로 얼마나 굽힐지까지 모델에 공통으로 지정되어 있지는 않습니다.

 

 

3d 모델링 때문에 크롬에서 gpu를 쓰는것 같긴한데..

이게 mediapipe 쪽 tensorflow.js 돌린다고 쓰는건 아니겠...지?

cpu 자체는 제법 양호한 편.

 

아빠 : 이정도면 해볼수 있겠어? 컨텐츠 머할거야?

딸 : 볼 터치

아빠 : (이를 악물고) 너가 직접 모델링 배워봐