이미 행해진 재료로, 특히 신규성은 없습니다만

모처럼 만들었으므로 일단 기사로 합니다.
clmtrackr 라고 하는, JS 로 얼굴 인식해 주는 라이브러리를 사용해 Live2D 의 WebGL 판으로 Canvas 에 묘화 한다고 하는 것.

아티팩트: htps : // 왜곡에 꼭. 어리석은 p. 이 m

Chrome이라면 PC 또는 Android에서 작동했습니다.

소스 코드: htps : // 기주 b. 코 m / Kimmu / 헛소리

세세한 것은 README 에 쓰여 있습니다만, Live2D 의 이용 약관의 관계로 Live2D 관련의 파일을 gitignore 하고 있기 때문에, git clone 하고 곧바로 움직이게 되어 있지 않습니다.

낭비 (?) React 라든지 사용하고 있기 때문에, 한눈에 봐 알기 쉬운 느낌은 아닙니다. 코드를 보면 참고 자료에도 붙이고 있다 여기 를 알기 쉬울 것입니다.

모형은 6개에서 선택할 수 있게 되어 있기 때문에 적당하게 놀아 주시면.
왼쪽 상단의 메뉴적인 것이 방해가 되면 화면의 아무것도 없는 곳을 클릭하면 사라집니다.

불행히도

무거운

clmtrackr의 얼굴 인식 부분이 병목 느낌.

clmtrackr에서 얻은 정보를 Live2D 용 매개 변수로 변환하기 위해 Web worker를 사용해 보았습니다.

안드로이드/크롬도 작동하지만 꽤 느립니다

눈부신 윙크하지 마라.

clmtrackr이 깜박임을 인식하지 못합니다.

깜박이면 눈의 위치가 아래로 어긋나는 인식을 하고 있으므로, 그것을 이용하여 깜박임의 판정을 하려고 노력해 보았지만, 오검지도 많아 잘 되지 않았으므로, 결국 눈은 열리지 않고.

미소녀에게 윙크시키고 싶었습니다. .

참고 자료

Live2D 공식

WebGL 튜토리얼 : htp : // / s. cybe r의 ds. jp / 곰팡이 sm2 / sdk_ 쓰리 아 l / p t t rm-setchin g / u bgl / mp ぇ

다양한 파라미터 설명 : htp : // / s. cybe r의 ds. jp / 곰팡이 sm2 / 모데 r / 파라 r / s 단지 rd 파라 rs

clmtrackr

API가 간단하기 때문에 README 읽으면 대략 알 수 있습니다.

선인의 성과

htps // t 등 p. 가끔 ch. rg/bぉg/2015/12/이_아 m_아_기 rl/

여기에 링크를 붙이고 있다 gist 가 많이 참고가 되었습니다.