재미있어 보이는 머신러닝 툴킷을 발견했다

요즘은 하도 버추얼 유튜버라는게 많아서 버추얼 유튜버가 되기위한 도구들이 많이 개발되었는데 (주로 일본에서) 이 버추얼 유튜버라는게 워낙 준비비용이 많이 들다보니 어떻게든 저렴하게 만들고자 많은 것들이 개발되었습니다.

 

그중 하나가 바로 웹캠으로 모션을 인식하는 것.

 

보통은 모션캡처 장비를 이용하거나 더 저렴하게 이용하고자 키넥트 여러개와 조합하거나 아니면 가속도센서를 부착한 팔과 머리만을 IK로 구현하거나 하는 방식이 주를 이루었는데 구글에서 Mediapipe라는 것을 공개하면서 2D 이미지만으로 사람의 모션을 그대로 인식하는 것이 만들어지게 되었습니다.

 

그런데... 본래 Mediapipe는 사람의 모션, 손의 제스처, 얼굴표정이 따로따로인데

https://github.com/yeemachine/kalidokit

GitHub - yeemachine/kalidokit: Blendshape and kinematics solver for Mediapipe/Tensorflow.js face, eyes, pose, and hand tracking

이 툴킷은 그걸 한번에 모두 쓸수 있게 만든 툴킷입니다.

그것도 자바스크립트로 만들어서 그냥 웹브라우저에서 돌아갑니다.

 

자세히 보면 Mediapipe뿐만 아니라 tfjs도 사용합니다. 얼굴 표정은 Blendshape형태로 쓸수있게 - 눈을 감았다 떴다 여부와 입모양 아에이오우 정도)로 간략하게 인식하고 손가락은 따로 인식해서 각 손가락의 관절이 돌아간 각도를 리턴합니다.

 

일단 장점이라면 사용하기 편하다는것이랑 JS형태이므로 웹브라우저로 그냥 처리가 가능하다는점.

그리고 웹브라우저를 쓰는게 마음에 안 들면 JSON형태이니 그걸 그대로 뿌려버리면 된다는 것.

 

대충 예제코드를 살펴보면

import * as Kalidokit from 'kalidokit' import '@mediapipe/holistic/holistic'; import '@mediapipe/camera_utils/camera_utils'; let holistic = new Holistic({locateFile: (file) => {     return `https://cdn.jsdelivr.net/npm/@mediapipe/holistic@0.4.1633559476/${file}`; }}); holistic.onResults(results=>{     // do something with prediction results     // landmark names may change depending on TFJS/Mediapipe model version     let facelm = results.faceLandmarks;     let poselm = results.poseLandmarks;     let poselm3D = results.ea;     let rightHandlm = results.rightHandLandmarks;     let leftHandlm = results.leftHandLandmarks;     let faceRig = Kalidokit.Face.solve(facelm,{runtime:'mediapipe',video:HTMLVideoElement})     let poseRig = Kalidokit.Pose.solve(poselm3d,poselm,{runtime:'mediapipe',video:HTMLVideoElement})     let rightHandRig = Kalidokit.Hand.solve(rightHandlm,"Right")     let leftHandRig = Kalidokit.Hand.solve(leftHandlm,"Left")     }; }); // use Mediapipe's webcam utils to send video to holistic every frame const camera = new Camera(HTMLVideoElement, {   onFrame: async () => {     await holistic.send({image: HTMLVideoElement});   },   width: 640,   height: 480 }); camera.start();

여기서 faceRig ,poseRig, rightHandRig, leftHandRig는 각각 JSON형태로 되어있는 객체이며

{     eye: {l: 1,r: 1},     mouth: {         x: 0,         y: 0,         shape: {A:0, E:0, I:0, O:0, U:0}     },     head: {         x: 0,         y: 0,         z: 0,         width: 0.3,         height: 0.6,         position: {x: 0.5, y: 0.5, z: 0}     },     brow: 0,     pupil: {x: 0, y: 0} }

{     RightUpperArm: {x: 0, y: 0, z: -1.25},     LeftUpperArm: {x: 0, y: 0, z: 1.25},     RightLowerArm: {x: 0, y: 0, z: 0},     LeftLowerArm: {x: 0, y: 0, z: 0},     LeftUpperLeg: {x: 0, y: 0, z: 0},     RightUpperLeg: {x: 0, y: 0, z: 0},     RightLowerLeg: {x: 0, y: 0, z: 0},     LeftLowerLeg: {x: 0, y: 0, z: 0},     LeftHand: {x: 0, y: 0, z: 0},     RightHand: {x: 0, y: 0, z: 0},     Spine: {x: 0, y: 0, z: 0},     Hips: {         worldPosition: {x: 0, y: 0, z: 0},         position: {x: 0, y: 0, z: 0},         rotation: {x: 0, y: 0, z: 0},     } }

{     RightWrist: {x: -0.13, y: -0.07, z: -1.04},     RightRingProximal: {x: 0, y: 0, z: -0.13},     RightRingIntermediate: {x: 0, y: 0, z: -0.4},     RightRingDistal: {x: 0, y: 0, z: -0.04},     RightIndexProximal: {x: 0, y: 0, z: -0.24},     RightIndexIntermediate: {x: 0, y: 0, z: -0.25},     RightIndexDistal: {x: 0, y: 0, z: -0.06},     RightMiddleProximal: {x: 0, y: 0, z: -0.09},     RightMiddleIntermediate: {x: 0, y: 0, z: -0.44},     RightMiddleDistal: {x: 0, y: 0, z: -0.06},     RightThumbProximal: {x: -0.23, y: -0.33, z: -0.12},     RightThumbIntermediate: {x: -0.2, y: -0.19, z: -0.01},     RightThumbDistal: {x: -0.2, y: 0.002, z: 0.15},     RightLittleProximal: {x: 0, y: 0, z: -0.09},     RightLittleIntermediate: {x: 0, y: 0, z: -0.22},     RightLittleDistal: {x: 0, y: 0, z: -0.1} }

이런 구조이니 다른 프로그램에서 JSON을 파싱해서 쓰면 되는 것이지요. 자바스크립트로 만들면 JSON파싱하고 자시고도 필요없지만 특정 프로그램을 위해 Unity에서 사용한다거나 다른 프로그램에서 쓰겠다면 JSON파싱을 해주면 읽어낼수 있습니다. 저기있는 x,y,z가 LocalEulerRotation의 RADIAN이라는 것만 안 잊어버려도 충분히 쓸 수 있습니다.

 

Unity에선 그냥 Quarterninon으로 써주는게 가장 최적의 시나리오지만 일단 느리긴 하지만 Euler각도도 쓸 수는 있으니 이런 방식도 나쁘지는 않은 듯 합니다. Unity가 아닌 godot엔진을 쓴다고 해도 Python은 Json파서가 기본적으로 갖추어져 있으니 더더욱 편리하게 쓸 수 있을 겁니다. 혹은 blender도 쓸 수 있고요.