AI x WebAR! MediaPipeの顔認識を使ってみよう!

AI x WebAR!
MediaPipeの顔認識を使ってみよう!

まずは素材のダウンロード
http://arfukuoka.lolipop.jp
/mediapipe/sample.zip

自己紹介
氏名：吉永崇(Takashi Yoshinaga)
所属：Steampunk Digital株式会社
専門：医療支援AR,運動計測,3D Video
コミュニティ：ARコンテンツ作成勉強会

Twitterと勉強会ページで情報を発信しています
@AR_Fukuoka Googleで「AR勉強会」で検索

エンジニアカフェ
Special Thanks

#AR_Fukuoka
#エンジニアカフェ
ハッシュタグ

今日のゴール
AIを用いた顔の認識とテクスチャマッピングを組み合わせたARコンテンツ
https://youtu.be/GyaenzhPhys

使用ツール：Facemesh
GoogleのMediaPipeとTnsorflow.jsがコラボでパッケージを開発。
顔認識を実現するfacemeshと手の認識を実現するhandposeが
提供されている中で今回はfacemeshを使用。
これを使う

ハンズオン手順
 ビデオ画像の取得と表示
 facemeshで顔の認識
 認識結果をAR表示する準備
 顔の特徴点を表示
 顔をポリゴン化
 テクスチャの貼り付け

ハンズオン手順
 ビデオ画像の取得と表示
 facemeshで顔の認識
 認識結果をAR表示する準備
 顔の特徴点を表示
 顔をポリゴン化
 テクスチャの貼り付け
公式サンプルの
利用手順とほぼ同じ
認識結果の活用

今回の進め方
サンプルをコピペしながら
コードの意味を解説

テンプレートの取得
https://glitch.com/~arfukuoka
-template

少し下にスクロール

Remix This

テンプレートの確認
index.html

テンプレートの確認
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script src="https://unpkg.com/@tensorflow/tfjs-core@2.1.0/dist/tf-core.js"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-converter@2.1.0/dist/tf-converter.js"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-backend-webgl@2.1.0/dist/tf-backend-webgl.js">
</script>

<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
</head>
<body>
<!—ここで描画領域を配置-->
</body>
</html> Lesson01

ビデオ描画領域を設定する
<!DOCTYPE html>
<html>
<head>
</script>
</head>
<body>
body内で描画領域をレイアウト
</body>
</html>

ビデオ描画領域を設定する
<!DOCTYPE html>
<html>
<head>
</script>
</head>
<body>
<video id="video" style="position: absolute;"></video>
</body>
</html>
あとでjavascriptから操作するためidをつけておく
Lesson02

ビデオを描画する
<!DOCTYPE html>
<html>
<head>
<title>AR Fukuoka</title>
</script>
<!—自前のスクリプトを記述-->
<script type="text/javascript">
</script>
</head>
<!—スペースの都合上、以下省略-->
Lesson03

ビデオを描画する
//ビデオを扱う変数
var video;
//ページを読み込み終わったら実行
window.onload = function() {
//カメラ画像のサイズ設定(とりあえず640x480くらい)
let constraints = { video: { width: 640, height: 480 } };
//カメラデバイスの取得
navigator.mediaDevices.getUserMedia(constraints).then(
function(mediaStream) {
//body内のid=videoの要素を取得
video = document.getElementById("video");
//リアルタイム映像をvideo要素に対応づける
video.srcObject = mediaStream;
//準備が整ったら再生
video.onloadedmetadata = function(e) {
video.play();
};
}
);
}
</script>
Lesson04

動作確認
カメラの映像が表示されればOK

顔の認識
var video;
//カメラ画像のサイズ設定
var constraints = { video: { width: 640, height: 480 } };
//body内のid=videoの要素を取得
//リアルタイム映像をvideo要素に対応づける
//準備が整ったら再生
video.play();
//顔認識を開始(このあと記述)
StartTracking();
};
}
);
};
Lesson05

顔の認識
var video;
//顔認識の学習モデル
var model;
//カメラ画像のサイズ設定
//スペースの都合上省略
//カメラの準備が整ったらStartTrackingを呼び出す
);
}
//トラッキング開始準備の関数
async function StartTracking(){
//顔認識のための学習モデル読み込み
model = await facemesh.load();
//顔認識のループ(次のステップで使用)
FaceTrackingLoop();
} Lesson06

顔の認識
var video;
var model;
window.onload = function() {/*スペースの都合上省略*/ };
FaceTrackingLoop();
}
//顔検出と描画のループ
async function FaceTrackingLoop() {
//顔の検出
let predictions = await model.estimateFaces(video);
//見つかった顔が1つ以上あれば
if (predictions.length > 0) {
//検出された顔の情報にアクセスして表示
console.log(predictions[0]);
}
requestAnimationFrame(FaceTrackingLoop);
} Lesson07

動作確認
カメラの映像は表示されるけど、
学習データの読み込みに時間がかかる

動作確認(FireFox)
①何のない箇所を右クリック
②要素を調査

動作確認(FireFox)
①コンソール
②検出結果

認識結果の内訳
faceInViewConfidence: 1, //顔らしさ(信頼度 0~1)
boundingBox: { // 顔を囲む矩形の角の座標
topLeft: [232.28, 145.26],
bottomRight: [449.75, 308.36],
},
mesh: [ // 顔の各特徴の座標[x,y,z] (認識用に192x192pxに縮小した画像上の座標)
[92.07, 119.49, -17.54], [91.97, 102.52, -30.54], ...
],
scaledMesh: [// 顔の各特徴の座標[x,y,z] (ビデオ画像の座標)
[322.32, 297.58, -17.54], [322.18, 263.95, -30.54], ...
],
annotations: { //顔のパーツと座標の組み合わせ
silhouette: [
[326.19, 124.72, -3.82], [351.06, 126.30, -3.00], ...
],
...
}
顔の特徴点は全部で468個

続いて、特徴点を描画しよう

文字の表示を止める
var video;
var model;
window.onload = function() {/*スペースの都合上省略*/ };
FaceTrackingLoop();
};
//顔検出と描画のループ
//顔の検出
//見つかった顔が1つ以上あれば
//検出された顔の情報にアクセスして表示
console.log(predictions[0]);
}
}
//console.log(predictions[0]);
文字の表示は不要

グラフィックス表示領域(Canvas)の設定
<html>
<head>
</script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js”></script>
<script type=“text/javascript”> /*本ハンズオンで記述中(省略)*/ </script>
</head>
<body>
<canvas id="output" style=" position: absolute; "></canvas>
</body>
</html> javascriptで操作する時の名前はoutputとする
Lesson08

このあと・・・
公式サンプルではcanvasの描画機能を使用して顔の特徴点を描画
ただし今回は・・・
顔に画像を貼るテクスチャマッピングを実現し易いthree.jsを使用
でも・・・
three.jsは初期設定などが必要で初心者向きではない
初期設定用のスクリプトは勉強会用に事前に用意しました！

three.js利用の手間を省くスクリプト
<html>
<head>
</script>

<script src="threejs-ex.js"></script>
<script type="text/javascript"> /*本ハンズオンで記述中(省略)*/ </script>
</head>
<body>
</body>
</html> Lesson09

顔の特徴点を描画
<html>
<head>
</script>
<script type="text/javascript"> /*こちらの編集に戻る*/ </script>
</head>
<body>
</body>
</html>
ここを編集！

three.jsを使う準備
var video;
video.play();
//Three.jsでの描画に関するセッティング(このあと記述)
InitRendering();
StartTracking();
};
}
);
};
</script> Lesson10

three.jsを使う準備
//スペースの都合上省略
//InitRenderingとStartTrackingを呼び出してる。
);
}
//THREE.jsで描画するための準備
function InitRendering(){
//ビデオ表示領域のサイズを明確に設定
let videoWidth = video.videoWidth;
let videoHeight = video.videoHeight;
video.width = videoWidth;
video.height = videoHeight;
//描画領域のサイズを指定
let canvas = document.getElementById("output");
canvas.width = videoWidth;
canvas.height = videoHeight;
//描画に関する初期設定 (threejs-ex.js内)
InitThreejs(canvas);
}
async function StartTracking(){ /*トラッキング開始準備*/ } Lesson11

顔描画のための3Dデータ作成
var video;
var model; //顔認識のための学習モデル
var faceMesh; //顔の3Dデータ
video.play();
InitRendering();
//顔の3Dモデルを作成 (このあと記述)
CreateFaceObject();
StartTracking();
};
}
);
}
Lesson12

var video;
var model;
var faceMesh;
/*諸々の初期化。スペースの都合上、省略*/
}
このあと、この辺りにCreateFaceObject関数を記述
/*three.jsの初期化。さっきまで解説していたところ*/
}
/*学習モデルの読み込みと顔認識スタート*/
}
/*顔を検出するループ*/
}

顔の特徴点をリアルタイムに描画
}
/*顔の3Dデータを作る*/
}
/*three.jsの初期化*/
}
}
}
顔の検出結果を3Dモデルに反映させる

顔の特徴点をリアルタイムに描画
//検出された顔の頂点配列にアクセス
let keypoints = predictions[0].scaledMesh;
//顔の3Dモデルの頂点等の情報にアクセス
let geometry=faceMesh.geometry;
for (let i = 0; i < keypoints.length; i++) {
let x = keypoints[i][0];
let y = keypoints[i][1];
geometry.vertices[i].set(x-video.width/2, -y+video.height/2, 1);
}
//情報の更新を許可
faceMesh.geometry.verticesNeedUpdate = true;
}
//上記の情報をThree.jsで描画
RenderThreejs();
}
Lesson14

ポリゴン化しよう
0
1
3
2
4
5
6
7
8
9
10
11
12
 各頂点にはそれぞれ番号が
割り振られている
 三角形を作るには結ぶ頂点の
番号を指定する
例) 0 2 3、 9 8 12、・・・
 接続番号のリストは
triangulation.jsで提供
顔のテンプレート

三角形を表現するための3点の番号が配列に全部並ぶ => 要素数は三角形の数 × 3

<html>
<head>
</script>
<!—三角形の頂点の接続情報-->
<script src="triangulation.js"></script>
<script type="text/javascript"> /*本ハンズオンで記述中(省略)*/ </script>
</head>
<body> 省略 </body>
</html>
Lesson15

}
}
}
}
}
顔の3Dモデルをポリゴンとして設定

//頂点を登録
for (let i = 0; i < 468; i++) {
}
//頂点の接続情報
let index,p0,p1,p2;
for (let i = 0; i < TRIANGULATION.length / 3; i++) {
index= i * 3;
p0 = TRIANGULATION[index];
p1 = TRIANGULATION[index+1];
geometry.faces.push(new THREE.Face3(p0,p1,p2));
}
//色などの見た目情報をmaterial管理
}
Lesson16

for (let i = 0; i < 468; i++) {
}
let index,p0,p1,p2;
index= i * 3;
}
let material = new THREE.MeshBasicMaterial( {wireframe:true} );
faceMesh= new THREE.Mesh( geometry, material );
//three.jsに登録
Lesson17

顔に画像を貼ろう
 AIが認識した顔の特徴点とテクスチャ画像中の座標を対応づける
 画像中の座標はピクセル(x,y)ではなく全体に対する割合(u,v)で指定する
→ これにより様々なサイズの画像を貼り付けられる！
 特徴点に対応するuv座標のリストはuv-coords.jsにて提供
認識結果テクスチャ

UV座標のリスト
顔の特徴点に対応するUV座標がUV_COORDSという配列に羅列されている
0番目のuv
3番目のuv

テクスチャ画像を貼り付けよう
<html>
<head>
</script>
<script src="uv-coords.js"></script>
</head>
以下省略 Lesson18

<html>
<head>
</script>
<script src="uv-coords.js"></script>
<script type=“text/javascript”> /*こちらの編集に戻る*/ </script>
</head>
以下省略ここを編集！

}
}
}
}
}
顔の3Dモデルに画像を貼り付ける

for (let i = 0; i < 468; i++) {
}
//頂点の接続情報とテクスチャ座標対応づけ
let index,p0,p1,p2;
index= i * 3;
}

for (let i = 0; i < 468; i++) {
}
//頂点の接続情報とテクスチャ座標対応づけ
let index,p0,p1,p2;
index= i * 3;
}
ここを編集！

let index,p0,p1,p2;
index= i * 3;
//UV座標を指定
geometry.faceVertexUvs[0].push([
new THREE.Vector2(UV_COORDS[p0][0],1-UV_COORDS[p0][1]),
new THREE.Vector2(UV_COORDS[p2][0],1-UV_COORDS[p2][1])]);
}
let texture = new THREE.TextureLoader().load("画像のURL");
let material = new THREE.MeshBasicMaterial( {map: texture, alphaTest:0.1} );
Lesson19

貼り付ける画像をアップロード
assets

Upload an Assets

mesh_map.jpg
選択

画像をクリック

copy

空白をクリック

//頂点を登録
for (let i = 0; i < 468; i++) {
}
let index,p0,p1,p2;
index= i * 3;
//UV座標を指定
geometry.faceVertexUvs[0].push([
new THREE.Vector2(UV_COORDS[p2][0],1-UV_COORDS[p2][1])]);
}
let texture = new THREE.TextureLoader().load( "画像のURLをここに貼り付ける" );
let material = new THREE.MeshBasicMaterial( {map: texture, alphaTest:0.1} );
}

おまけ
画像アップロードに対応

Uploadボタンを追加
<html>
<head>
</script>
</head>
<body>
<input type="file" id="file"><br>
</body>
</html>
javascriptで操作する時の名前はfileとする
Lesson20

Upload機能の記述
}
}
}
}
}
window.onloadに記述

let file = document.getElementById('file');
// ファイルが指定された時にloadLocalImage()を実行
file.addEventListener('change', loadLocalImage, false);
video.play();
InitRendering();
CreateFaceObject();
StartTracking();
};
}
);
} Lesson21

}
このあとこの辺りに loadLocalImage関数を追加(コピペ)
}
}
}

完成！
https://facemesh-arfukuoka.glitch.me

AI x WebAR! MediaPipeの顔認識を使ってみよう!

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to AI x WebAR! MediaPipeの顔認識を使ってみよう!

Similar to AI x WebAR! MediaPipeの顔認識を使ってみよう! (20)

More from Takashi Yoshinaga

More from Takashi Yoshinaga (20)

Recently uploaded

Recently uploaded (16)

AI x WebAR! MediaPipeの顔認識を使ってみよう!