虹彩や目・口の位置検出を使ったバーチャルキャラクター的なものをブラウザ上で動かしてみる

以前からある顔のキーポイント検出ができる画像認識の仕組みに、新しく虹彩の位置検出が加わったという話があったので、そのお試しをする中で作ってみたものです（JavaScriptで実装）

動画

開発素材

ツール

p5.js

API

MediaPipe Face Mesh

システム構成

JavaScript版 の MediaPipe Face Mesh で虹彩のキーポイントと、目・口の周りのキーポイントを取得し、それらの位置やキーポイント間の距離の情報を使って、バーチャルな目（矩形と円を描画）と口（矩形を描画）の位置や大きさを決めています。

口や目の描画には、JavaScript の描画ライブラリの 1つである p5.js を用いています。

ストーリー

これまでも提供されていた MediaPipe Face Mesh に「Refine Landmarkオプション」が追加され、虹彩の位置がとれるようになったという話を聞き、それを試してみたものです。

自分がよく使っている MediaPipe JavaScript版での実装で、描画周りもよく利用している p5.js という組み合わせです。

メンバー

• 

  Yosuke Toyota @youtoy

同じニオイがする作品

• MediaPipe Selfie Segmentation でバーチャル背景的なことなど！
• srt.jsのセキュリティ強化
• Eyebrojector
• バーチャル連動クラッピー