AI x WebXR! フェイストラッキングを用いた擬似3D表現

1.

AI x WebXR! フェイストラッキングを⽤いた擬似3D表現

2.

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

http://arfukuoka.lolipop.jp/parallax/sample.zip

3.

⾃⼰紹介⽒名︓吉永崇(Takashi Yoshinaga) 所属︓Steampunk Digital株式会社専⾨︓医療⽀援AR,運動計測,3D Video コミュニティ︓ARコンテンツ作成勉強会

4.

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

5.

ハッシュタグ #AR_Fukuoka

6.

本題に⼊ります

7.

今⽇のゴール https://youtu.be/fyzXNG_0IIE AIを⽤いた顔の認識とカメラコントロールを使った擬似3D表現

https://youtu.be/fyzXNG_0IIE

8.

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

9.

ハンズオン⼿順 p 3D表⽰のテンプレート取得 p ビデオ画像の取得と表⽰ p facemeshで顔の認識 p 顔とカメラの位置を連動 p 奥⾏き空間のサイズ調整 p 画⾓の調整

10.

ハンズオン⼿順 p 3D表⽰のテンプレート取得 p ビデオ画像の取得と表⽰ p facemeshで顔の認識 p 顔とカメラの位置を連動 p 奥⾏き空間のサイズ調整 p 画⾓の調整

11.

ハンズオン⼿順 p 3D表⽰のテンプレート取得 p ビデオ画像の取得と表⽰ p facemeshで顔の認識 p 顔とカメラの位置を連動 p 奥⾏き空間のサイズ調整 p 画⾓の調整

12.

ハンズオン⼿順 p 3D表⽰のテンプレート取得 p ビデオ画像の取得と表⽰ p facemeshで顔の認識 p 顔とカメラの位置を連動 p 奥⾏き空間のサイズ調整 p 画⾓の調整

13.

ハンズオン⼿順 p 3D表⽰のテンプレート取得 p ビデオ画像の取得と表⽰ p facemeshで顔の認識 p 顔とカメラの位置を連動 p 奥⾏き空間のサイズ調整 p 画⾓の調整カメラ(=視点)の位置を調整

14.

ハンズオン⼿順 p 3D表⽰のテンプレート取得 p ビデオ画像の取得と表⽰ p facemeshで顔の認識 p 顔とカメラの位置を連動 p 奥⾏き空間のサイズ調整 p 画⾓の調整

15.

ハンズオン⼿順 p 3D表⽰のテンプレート取得 p ビデオ画像の取得と表⽰ p facemeshで顔の認識 p 顔とカメラの位置を連動 p 奥⾏き空間のサイズ調整 p 画⾓の調整

16.

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

17.

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

https://glitch.com/~parallax-template

18.

少し下にスクロールテンプレートの取得

19.

テンプレートの取得 Remix Your Own

20.

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

21.

テンプレートの確認

22.

テンプレートの確認 ① ライブラリ読み込み ② スクリプト記述 ③ CGとカメラ映像の表⽰ Lesson01

23.

テンプレートの確認 ① ライブラリ読み込み ② スクリプト記述 ③ CGとカメラ映像の表⽰

24.

[beta]

①ライブラリの読み込み
<head>
<meta charset="utf-8">
<title>AR Fukuoka</title>
<!̶A-Frame読み込み-->
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<!--TensorFlow関連の読み込み-->
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-core.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-converter.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-backend-webgl.js">
</script>
<!--顔認識の学習モデル読み込み-->
<script src="https://unpkg.com/@tensorflow-models/[email protected]/dist/facemesh.js"></script>
<!--⾃前のスクリプトを記述-->
<script type="text/javascript">

</script>
</head>

各種ライブラリの読み込み
・ A-Frame (3D描画に使⽤)
・ TensorFlow関連 (顔認識に使⽤)

25.

[beta]

②スクリプトの記述
<head>
<meta charset="utf-8">
<title>AR Fukuoka</title>
<!̶A-Frame読み込み-->
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<!--TensorFlow関連の読み込み-->
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-core.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-converter.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-backend-webgl.js">
</script>
<!--顔認識の学習モデル読み込み-->
<script src="https://unpkg.com/@tensorflow-models/[email protected]/dist/facemesh.js"></script>
<!--⾃前のスクリプトを記述-->
<script type="text/javascript">

次のページで解説
</script>
</head>

26.

[beta]

②スクリプトの記述
<!--⾃前のスクリプトを記述。今回は事前に3つの関数を⽤意。-->
<script type="text/javascript">
//ページを読みこんだら実⾏。初期化に使⽤。
window.onload = function() {
};
//顔認識の学習モデル読み込み
async function LoadFaceModel(){
}
//顔認識をリアルタイムに⾏う
async function FaceTracking(){
}
</script>

初期化(1)
・ カメラ(PC/スマホ)の起動
・ 映像サイズや描画領域の取得
c

初期化(2)
・ 顔認識に⽤いる学習データ
の読み込み
c

毎フレーム実⾏
・ 顔の認識
・ 顔の位置を⽤いた視点変更

27.

テンプレートの確認 ① ライブラリ読み込み ② スクリプト記述 ③ CGとカメラ映像の表⽰

28.

テンプレートの確認 ① ライブラリ読み込み ② スクリプト記述 ③ CGとカメラ映像の表⽰

29.

[beta]

③CGとカメラ映像の表⽰
<!̶A-Frameを⽤いた3次元描画-->
<a-scene id="scene" background="color: #FAFAFA" style="position: absolute;">
<!--表⽰するオブジェクト-->
<a-entity id="objects" position = "0 0 -0.5" scale="1 1 1">
<a-box position="-0.1 -0.05 0.1" scale="0.1 0.1 0.1" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 0.015 -0.1" radius="0.125" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="0.1 -0.025 0.1" radius="0.05" height="0.15" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 -0.11 0" rotation="-90 0 0" width="0.4" height="0.4" color="#7BC8A4" shadow></a-plane>
</a-entity>
<!--ウィンドウの向こう側に表⽰する部屋のオブジェクト-->
<a-entity id="room" scale="1 1 1">
<a-plane position="0 0.5 -0.5" rotation="90 0 0" src="画像URL"></a-plane>
<a-plane position="0 -0.5 -0.5" rotation="-90 0 0" src="画像URL"></a-plane>
<a-plane position="-0.5 0 -0.5" rotation="0 90 0" src="画像URL"></a-plane>
<a-plane position="0.5 0 -0.5" rotation="0 -90 0" src="画像URL"></a-plane>
<a-plane position="0 0.0 -1" rotation="0 0 0" src="画像URL"></a-plane>
</a-entity>
<!--カメラ(3D視点の設定)-->
<a-entity camera position="0 0 0" ></a-entity>
</a-scene>
<!--カメラ画像表⽰-->
<video id="video" style="position: absolute; width:320px; height:240px;"></video>

A-Frameで3D描画
ビデオ映像の表⽰

30.

③CGとカメラ映像の表⽰この後の作業を進めるとこうなる予定(ビデオ映像はまだ表⽰されない)

31.

[beta]

A-Frame解説
<!̶A-Frameを⽤いた3次元描画-->
<a-scene id="scene" background="color: #FAFAFA" style="position: absolute;">
<!--表⽰するオブジェクト-->
<a-entity id="objects" position = "0 0 -0.5" scale="1 1 1">
<a-box position="-0.1 -0.05 0.1" scale="0.1 0.1 0.1" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 0.015 -0.1" radius="0.125" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="0.1 -0.025 0.1" radius="0.05" height="0.15" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 -0.11 0" rotation="-90 0 0" width="0.4" height="0.4" color="#7BC8A4" shadow></a-plane>
</a-entity>
<!--ウィンドウの向こう側に表⽰する部屋のオブジェクト-->
<a-entity id="room" scale="1 1 1">
<a-plane position="0 0.5 -0.5" rotation="90 0 0" src="画像URL"></a-plane>
<a-plane position="0 -0.5 -0.5" rotation="-90 0 0" src="画像URL"></a-plane>
<a-plane position="-0.5 0 -0.5" rotation="0 90 0" src="画像URL"></a-plane>
<a-plane position="0.5 0 -0.5" rotation="0 -90 0" src="画像URL"></a-plane>
<a-plane position="0 0.0 -1" rotation="0 0 0" src="画像URL"></a-plane>
</a-entity>
<!--カメラ(3D視点の設定)-->
<a-entity camera position="0 0 0" ></a-entity>
</a-scene>

3D描画に関する記述

<a-scene>と</a-scene>の間に表⽰するオブジェクトを記述

32.

[beta]

A-Frame解説
<!̶A-Frameを⽤いた3次元描画-->
<a-scene id="scene" background="color: #FAFAFA" style="position: absolute;">
<!--表⽰するオブジェクト-->
<a-entity id="objects" position = "0 0 -0.5" scale="1 1 1">
<a-box position="-0.1 -0.05 0.1" scale="0.1 0.1 0.1" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 0.015 -0.1" radius="0.125" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="0.1 -0.025 0.1" radius="0.05" height="0.15" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 -0.11 0" rotation="-90 0 0" width="0.4" height="0.4" color="#7BC8A4" shadow></a-plane>
</a-entity>
<!--ウィンドウの向こう側に表⽰する部屋のオブジェクト-->
<a-entity id="room" scale="1 1 1">
<a-plane position="0 0.5 -0.5" rotation="90 0 0" src="画像URL"></a-plane>
<a-plane position="0 -0.5 -0.5" rotation="-90 0 0" src="画像URL"></a-plane>
<a-plane position="-0.5 0 -0.5" rotation="0 90 0" src="画像URL"></a-plane>
<a-plane position="0.5 0 -0.5" rotation="0 -90 0" src="画像URL"></a-plane>
<a-plane position="0 0.0 -1" rotation="0 0 0" src="画像URL"></a-plane>
</a-entity>
<!--カメラ(3D視点の設定)-->
<a-entity camera position="0 0 0" ></a-entity>
</a-scene>

3D描画に関する記述

<a-scene>と</a-scene>の間に表⽰するオブジェクトを記述

33.

[beta]

A-Frame解説
<a-scene id="scene" background="color: #FAFAFA" style="position: absolute;">
<!--表⽰するオブジェクト-->
<a-entity id="objects" position = "0 0 -0.5" scale="1 1 1">
<a-box position="-0.1 -0.05 0.1" scale="0.1 0.1 0.1" rotation="0 45 0"
color="#4CC3D9" shadow></a-box>
<a-sphere position="0 0.015 -0.1" radius="0.125"
color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="0.1 -0.025 0.1" radius="0.05" height="0.15"
color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 -0.11 0" rotation="-90 0 0" width="0.4" height="0.4"
color="#7BC8A4" shadow></a-plane>
</a-entity>
<!--ウィンドウの向こう側に表⽰する部屋のオブジェクト-->
p 基本図形はa-xxxで提供されている
<a-entity id="room" scale="1 1 1">
https://aframe.io/docs/1.1.0/primitives/
<!--中略-->
a-box.html
</a-entity>

p position,rotationで位置や⾓度指定

<!--カメラ(3D視点の設定)-->
p a-entityタグで囲むことで⼦要素の
<a-entity camera position="0 0 0" ></a-entity>

オブジェクトの⼀括調整も可能

https://aframe.io/docs/1.1.0/primitives/a-box.html

34.

[beta]

A-Frame解説
<!̶A-Frameを⽤いた3次元描画-->
<a-scene id="scene" background="color: #FAFAFA" style="position: absolute;">
<!--表⽰するオブジェクト-->
<a-entity id="objects" position = "0 0 -0.5" scale="1 1 1">
<a-box position="-0.1 -0.05 0.1" scale="0.1 0.1 0.1" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 0.015 -0.1" radius="0.125" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="0.1 -0.025 0.1" radius="0.05" height="0.15" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 -0.11 0" rotation="-90 0 0" width="0.4" height="0.4" color="#7BC8A4" shadow></a-plane>
</a-entity>
<!--ウィンドウの向こう側に表⽰する部屋のオブジェクト-->
<a-entity id="room" scale="1 1 1">
<a-plane position="0 0.5 -0.5" rotation="90 0 0" src="画像URL"></a-plane>
<a-plane position="0 -0.5 -0.5" rotation="-90 0 0" src="画像URL"></a-plane>
<a-plane position="-0.5 0 -0.5" rotation="0 90 0" src="画像URL"></a-plane>
<a-plane position="0.5 0 -0.5" rotation="0 -90 0" src="画像URL"></a-plane>
<a-plane position="0 0.0 -1" rotation="0 0 0" src="画像URL"></a-plane>
</a-entity>
<!--カメラ(3D視点の設定)-->
<a-entity camera position="0 0 0" ></a-entity>
</a-scene>

3D描画に関する記述

<a-scene>と</a-scene>の間に表⽰するオブジェクトを記述

35.

[beta]

A-Frame解説
<!̶A-Frameを⽤いた3次元描画-->
<a-scene id="scene" background="color: #FAFAFA" style="position: absolute;">
<!--表⽰するオブジェクト-->
<a-entity id="objects" position = "0 0 -0.5" scale="1 1 1">
<a-box position="-0.1 -0.05 0.1" scale="0.1 0.1 0.1" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 0.015 -0.1" radius="0.125" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="0.1 -0.025 0.1" radius="0.05" height="0.15" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 -0.11 0" rotation="-90 0 0" width="0.4" height="0.4" color="#7BC8A4" shadow></a-plane>
</a-entity>
<!--ウィンドウの向こう側に表⽰する部屋のオブジェクト-->
<a-entity id="room" scale="1 1 1">
<a-plane position="0 0.5 -0.5" rotation="90 0 0" src="画像URL"></a-plane>
<a-plane position="0 -0.5 -0.5" rotation="-90 0 0" src="画像URL"></a-plane>
<a-plane position="-0.5 0 -0.5" rotation="0 90 0" src="画像URL"></a-plane>
<a-plane position="0.5 0 -0.5" rotation="0 -90 0" src="画像URL"></a-plane>
<a-plane position="0 0.0 -1" rotation="0 0 0" src="画像URL"></a-plane>
</a-entity>
<!--カメラ(3D視点の設定)-->
<a-entity camera position="0 0 0" ></a-entity>
</a-scene>

3D描画に関する記述

<a-scene>と</a-scene>の間に表⽰するオブジェクトを記述

36.

A-Frame解説  <a-entity id="room" scale="1 1 1"> <a-plane position="0 0.5 -0.5" rotation="90 0 0" src="画像URL "></a-plane> <a-plane position="0 -0.5 -0.5" rotation="-90 0 0" src="画像URL"></a-plane> <a-plane position="-0.5 0 -0.5" rotation="0 90 0" src="画像URL"></a-plane> <a-plane position="0.5 0 -0.5" rotation="0 -90 0" src="画像URL"></a-plane> <a-plane position="0 0.0 -1" rotation="0 0 0" src="画像URL"></a-plane> </a-entity>  <a-entity camera position="0 0 0" ></a-entity> p 板(a-plane)を配置して天井・床・壁を作成 p srcの右辺でテクスチャが画像を指定 p サイズは1m3相当。親要素のa-entityの scaleを編集して縦・横・奥⾏きを調節可能 p <a-entity camera>で視点の位置を設定

37.

ハンズオン⼿順 p 3D表⽰のテンプレート取得 p ビデオ画像の取得と表⽰ p facemeshで顔の認識 p 顔とカメラの位置を連動 p 奥⾏き空間のサイズ調整 p 画⾓の調整

38.

[beta]

ビデオを描画する
<script type="text/javascript">
//ビデオを扱う変数
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>

Lesson02

39.

動作確認 Show

40.

動作確認 In a New Window

41.

動作確認カメラの映像が表⽰されればOK うまく動かない場合は[完成品]フォルダの中の2.txtをコピペで差し替える

42.

ハンズオン⼿順 p 3D表⽰のテンプレート取得 p ビデオ画像の取得と表⽰ p facemeshで顔の認識 p 顔とカメラの位置を連動 p 奥⾏き空間のサイズ調整 p 画⾓の調整

43.

[beta]

顔認識の学習モデル読み込み
//ビデオを扱う変数
var video;
//ページを読み込み終わったら実⾏
window.onload = function() {
//カメラ画像のサイズ設定
var 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();
//顔認識の学習モデルを読み込む(このあと記述)
LoadFaceModel();
};
}
);
};

Lesson03

44.

顔認識の学習モデル読み込み //ビデオを扱う変数 var video; //顔認識の学習モデル var model; //ページを読み込み終わったら実⾏ window.onload = function() { //カメラ画像のサイズ設定 let constraints = { video: { width: 640, height: 480 } }; //カメラデバイスの取得 navigator.mediaDevices.getUserMedia(constraints).then( //スペースの都合上省略 //カメラの準備が整ったらLoadFaceModelを呼び出す ); } //トラッキング開始準備の関数 async function LoadFaceModel(){ //顔認識のための学習モデル読み込み model = await facemesh.load(); //顔認識のループ(次のステップで使⽤) FaceTracking (); } Lesson04

45.

顔の認識 //ビデオを扱う変数 var video; //顔認識の学習モデル var model; window.onload = function() {/*スペースの都合上省略*/ }; async function LoadFaceModel(){ model = await facemesh.load(); FaceTracking (); } //顔検出と描画のループ async function FaceTracking () { //顔の検出 let predictions = await model.estimateFaces(video); //⾒つかった顔が1つ以上あれば if (predictions.length > 0) { //検出された顔の情報にアクセスして表⽰ console.log(predictions[0]); } requestAnimationFrame(FaceTracking); } Lesson05

46.

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

47.

動作確認(Safari) ①適当な箇所を右クリック ②要素を調査とか要素の詳細を表⽰

48.

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

49.

認識結果の内訳 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], ... ], 今回はboundingBoxの ... 中⼼を使⽤する︕ }

50.

ハンズオン⼿順 p 3D表⽰のテンプレート取得 p ビデオ画像の取得と表⽰ p facemeshで顔の認識 p 顔とカメラの位置を連動 p 奥⾏き空間のサイズ調整 p 画⾓の調整カメラ(=視点)の位置を調整

51.

[beta]

顔の中⼼位置を算出
<script type="text/javascript">
var video; //ビデオを扱う変数
var model; //顔認識の学習モデル
//ページを読みこんだら実⾏。初期化に使⽤。
window.onload = function() {
};
//顔認識の学習モデル読み込み
async function LoadFaceModel(){
}
//顔認識をリアルタイムに⾏う
async function FaceTracking(){
</script>

c

}

次はここを編集

52.

顔の中⼼位置を算出 //ビデオを扱う変数 var video; //顔認識の学習モデル var model; window.onload = function() {/*スペースの都合上省略*/ }; async function LoadFaceModel(){{/*スペースの都合上省略*/ } c async function FaceTracking () { //顔の検出 let predictions = await model.estimateFaces(video); //⾒つかった顔が1つ以上あれば if (predictions.length > 0) { //バウンディングボックスとその左上・右下の座標を取得 let keypoints = predictions[0].boundingBox; let topLeft=keypoints.topLeft; let bottomRight=keypoints.bottomRight; //中⼼を計算 let cX=((topLeft[0]+bottomRight[0])/2); let cY=(topLeft[1]+bottomRight[1])/2; console.log(predictions[0]); } requestAnimationFrame(FaceTracking); } ここに注⽬︕

53.

[beta]

顔の中⼼位置を算出
//ビデオを扱う変数
var video;
//顔認識の学習モデル
var model;
window.onload = function() {/*スペースの都合上省略*/ };
async function LoadFaceModel(){{/*スペースの都合上省略*/ }
async function FaceTracking () {
//顔の検出
let predictions = await model.estimateFaces(video);
//⾒つかった顔が1つ以上あれば
if (predictions.length > 0) {
//バウンディングボックスとその左上・右下の座標を取得
let keypoints = predictions[0].boundingBox;
let topLeft=keypoints.topLeft;
let bottomRight=keypoints.bottomRight;
//中⼼を計算
let cX=(topLeft[0]+bottomRight[0])/2;
let cY=(topLeft[1]+bottomRight[1])/2;
console.log(cX+", "+cY);
}
requestAnimationFrame(FaceTracking);
}

Lesson06

54.

このあとやりたいこと x -1 Y Y x -1 1 1 p p p p 原点は画像の左上座標はピクセルで表現画素数はカメラによって違う xy座標(ピクセル)を顔の位置として反映させると値が⼤きすぎる p p p p 原点は画像の中央座標は画像中の相対位置 X,Y共に-1~1正規化カメラの画素数に依存せず座標を扱うことが可能

55.

[beta]

顔の中⼼位置を正規化
//ビデオを扱う変数
var video;
//顔認識の学習モデル
var model;
window.onload = function() {/*スペースの都合上省略*/ };
async function LoadFaceModel(){{/*スペースの都合上省略*/ }
async function FaceTracking () {
//顔の検出
let predictions = await model.estimateFaces(video);
//⾒つかった顔が1つ以上あれば
if (predictions.length > 0) {
//バウンディングボックスとその左上・右下の座標を取得
let keypoints = predictions[0].boundingBox;
let topLeft=keypoints.topLeft;
let bottomRight=keypoints.bottomRight;
//中⼼を計算
let cX=(topLeft[0]+bottomRight[0])/video.videoWidth-1;
let cY=(topLeft[1]+bottomRight[1])/video.videoHeight-1;
console.log(cX+", "+cY);
}
requestAnimationFrame(FaceTracking);
}

Lesson07

56.

[beta]

顔の中⼼位置を正規化
//ビデオを扱う変数
var video;
//顔認識の学習モデル
var model;
window.onload = function() {/*スペースの都合上省略*/ };
async function LoadFaceModel(){{/*スペースの都合上省略*/ }
async function FaceTracking () {
//顔の検出
let predictions = await model.estimateFaces(video);
//⾒つかった顔が1つ以上あれば
if (predictions.length > 0) {
//バウンディングボックスとその左上・右下の座標を取得
let keypoints = predictions[0].boundingBox;
let topLeft=keypoints.topLeft;
let bottomRight=keypoints.bottomRight;
//中⼼を計算
let cX=(topLeft[0]+bottomRight[0])/video.videoWidth-1;
let cY=(topLeft[1]+bottomRight[1])/video.videoHeight-1;
console.log(cX+", "+cY);
//console.log(cX+",
"+cY);
}
⽂字の表⽰は不要
requestAnimationFrame(FaceTracking);
}

57.

[beta]

カメラの動きへの反映
<script type="text/javascript">
var video; //ビデオを扱う変数
var model; //顔認識の学習モデル
var camera; //カメラ(視点)を扱う変数
//ページを読みこんだら実⾏。初期化に使⽤。
window.onload = function() {
};
//顔認識の学習モデル読み込み
async function LoadFaceModel(){
}
//顔認識をリアルタイムに⾏う
async function FaceTracking(){
}
</script>

カメラ(=視点)の位置を調整
Lesson08

58.

[beta]

カメラの動きへの反映
<script type="text/javascript">
var video; //ビデオを扱う変数
var model; //顔認識の学習モデル
var camera; //カメラ(視点)を扱う変数
//ページを読みこんだら実⾏。初期化に使⽤。
window.onload = function() {
//顔認識の学習モデル読み込み
async function LoadFaceModel(){
}
//顔認識をリアルタイムに⾏う
async function FaceTracking(){
}
</script>

c

};

次はここを編集

59.

[beta]

カメラの動きへの反映
window.onload = function() {
//a-scene(id=scene)を取得
let scene = document.getElementById('scene');
//A-Frameのカメラを取得
camera= scene.camera;
//カメラ画像のサイズ設定(とりあえず640x480くらい)
let constraints = { video: { width: 640, height: 480 } };
//カメラデバイスの取得
navigator.mediaDevices.getUserMedia(constraints).then(
function(mediaStream) {
video = document.getElementById("video");
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
LoadFaceModel();
};
}
);
Lesson09
};

60.

[beta]

カメラの動きへの反映
<script type="text/javascript">
var video; //ビデオを扱う変数
var model; //顔認識の学習モデル
var camera; //カメラ(視点)を扱う変数
//ページを読みこんだら実⾏。初期化に使⽤。
window.onload = function() {
};
//顔認識の学習モデル読み込み
async function LoadFaceModel(){
}
//顔認識をリアルタイムに⾏う
async function FaceTracking(){
</script>

c

}

次はここを編集

61.

カメラの動きへの反映 async function FaceTracking(){ //顔の検出 let predictions = await model.estimateFaces(video); //⾒つかった顔が1つ以上あれば if (predictions.length > 0) { //バウンディングボックスとその左上・右下の座標を取得 let keypoints = predictions[0].boundingBox; let topLeft=keypoints.topLeft; let bottomRight=keypoints.bottomRight; //中⼼を計算(-1~1で正規化) let cX=(topLeft[0]+bottomRight[0])/video.videoWidth-1; let cY=(topLeft[1]+bottomRight[1])/video.videoHeight-1; //カメラの位置を操作 camera.position.x=-cX; //左右反転 camera.position.y=-cY; //上下反転 camera.position.z=2.5; //奥⾏きは分からないので適当に設定 } window.requestAnimationFrame(FaceTracking); Lesson10 }

62.

動作確認顔の位置に連動

63.

ハンズオン⼿順 p 3D表⽰のテンプレート取得 p ビデオ画像の取得と表⽰ p facemeshで顔の認識 p 顔とカメラの位置を連動 p 奥⾏き空間のサイズ調整 p 画⾓の調整

64.

[beta]

部屋サイズの設定
<script type="text/javascript">
var video; //ビデオを扱う変数
var model; //顔認識の学習モデル
var camera; //カメラ(視点)を扱う変数
var canvas: //描画領域
var screenWidth, screenHeight; //表⽰領域のサイズ
//ページを読みこんだら実⾏。初期化に使⽤。
window.onload = function() {
};
//顔認識の学習モデル読み込み
async function LoadFaceModel(){
}
//顔認識をリアルタイムに⾏う
async function FaceTracking(){
}
</script>

Lesson11

65.

[beta]

部屋サイズの設定
<script type="text/javascript">
var video; //ビデオを扱う変数
var model; //顔認識の学習モデル
var camera; //カメラ(視点)を扱う変数
var canvas; //描画領域
var screenWidth, screenHeight; //表⽰領域のサイズ
//ページを読みこんだら実⾏。初期化に使⽤。
window.onload = function() {
//顔認識の学習モデル読み込み
async function LoadFaceModel(){
}
//顔認識をリアルタイムに⾏う
async function FaceTracking(){
}
</script>

c

};

次はここを編集

66.

[beta]

部屋サイズの設定
window.onload = function() {
//キャンバス領域を取得
canvas=document.getElementsByClassName('a-canvas')[0];

};

//a-scene(id=scene)を取得
let scene = document.getElementById('scene');
//A-Frameのカメラを取得
camera= scene.camera;
//カメラ画像のサイズ設定(とりあえず640x480くらい)
let constraints = { video: { width: 640, height: 480 } };
//カメラデバイスの取得
navigator.mediaDevices.getUserMedia(constraints).then(
function(mediaStream) {
//中略
}
);
Lesson12

67.

[beta]

部屋サイズの設定
<script type="text/javascript">
var video; //ビデオを扱う変数
var model; //顔認識の学習モデル
var camera; //カメラ(視点)を扱う変数
var canvas; //描画領域
var screenWidth, screenHeight; //表⽰領域のサイズ
//ページを読みこんだら実⾏。初期化に使⽤。
window.onload = function() {
};
//顔認識の学習モデル読み込み
async function LoadFaceModel(){
}
//顔認識をリアルタイムに⾏う
async function FaceTracking(){
</script>

c

}

次はここを編集

68.

[beta]

部屋サイズの設定
async function FaceTracking(){
//描画領域のサイズが変わった場合
if(screenWidth!=canvas.width || screenHeight!=canvas.height){
screenWidth=canvas.width;
screenHeight=canvas.height;
//部屋の横幅を1に固定した場合の⾼さを計算
let height=screenHeight/screenWidth;
//部屋のオブジェクトを取得してサイズを変更
let room= document.getElementById('room');
room.setAttribute('scale', { x: 1, y: height, z: 1 });
}
//顔の検出
let predictions = await model.estimateFaces(video);
//⾒つかった顔が1つ以上あれば
if (predictions.length > 0) {
//中略
}
window.requestAnimationFrame(FaceTracking);
Lesson13
}

69.

動作確認頭の位置と視点は連動するが、部屋がモニタに固定されない

70.

原因と解決⽅法【現状】 p カメラの視野⾓は固定されている p カメラが部屋のモデルから離れると視野内に他の領域も⼊ってくる理想的には・・・ p カメラ(頭)の位置に応じて視野⾓が部屋の上下左右にフィットするように変化してくれると良い【理想】

71.

ハンズオン⼿順 p 3D表⽰のテンプレート取得 p ビデオ画像の取得と表⽰ p facemeshで顔の認識 p 顔とカメラの位置を連動 p 奥⾏き空間のサイズ調整 p 画⾓の調整

72.

CGの世界の視野設定描画可能エリア top left ar e n r fa 背後の世界をスクリーンに投影 right bottom 【開発者にとっての視野設定】 p 描画可能なエリアをコンピュータに伝える⼿段。 p カメラを起点とした奥⾏(near far), 横⽅向の座標(left right), 縦⽅向の座標(top bottom)の6パラメータで数式化して表現。

73.

描画判定(コンピュータ側の仕事) 1 0 -1 near x top left 1 right y z far -1 1 -1 bottom 【前後範囲の内外判定】 near~farのzを-1~1とし、CGのz座標を変換したときに範囲内なら描画【スクリーンの内外判定】 left~rightのxを-1~1、bottom~topのyを-1~1とし、スクリーン(near) に投影した(座標変換した)ときのxy座標が範囲内なら描画

74.

描画判定(開発者側の仕事) z c) y c, , (x c near bottom 0 zs x 1 top right near -1 y z 1 left right left top -1 1 (xs,ys) -1 bottom p left, right, top, bottom, near, farを使って描画領域を決定する p カメラを原点にした3次元座標(xc,yc,zc)を、描画領域の座標系での座標(xs,ys,zs)に変換するためのルール(式)をコンピュータ側に教える

75.

変換式【やりたいこと】 CGの3D座標 xc, yc, zc 変換ルールをUnityがわかる形(数式)で表現 1 いい感じに変換 0 -1 𝑥! 𝑦! 𝑧! 1 = 座標変換 top left z 描画判定用の座標系 xs, ys, zs 1 near right y 【数式で書くと】 far -1 1 x -1 bottom 4×4の⾏列で表現 ←さっきの6パラメータで作れる 𝑥" 𝑦" 𝑧" 1 − 1 𝑧! 2 𝑛𝑒𝑎𝑟 𝑟𝑖𝑔ℎ𝑡 − 𝑙𝑒𝑓𝑡 0 0 2 𝑛𝑒𝑎𝑟 𝑡𝑜𝑝 − 𝑏𝑜𝑡𝑡𝑜𝑚 0 0 0 0 𝑟𝑖𝑔ℎ𝑡 + 𝑙𝑒𝑓𝑡 𝑟𝑖𝑔ℎ𝑡 − 𝑙𝑒𝑓𝑡 𝑡𝑜𝑝 + 𝑏𝑜𝑡𝑡𝑜𝑚 𝑡𝑜𝑝 − 𝑏𝑜𝑡𝑡𝑜𝑚 𝑓𝑎𝑟 + 𝑛𝑒𝑎𝑟 − 𝑓𝑎𝑟 − 𝑛𝑒𝑎𝑟 −1 0 0 − 2𝑓𝑎𝑟 𝑛𝑒𝑎𝑟 𝑓𝑎𝑟 − 𝑛𝑒𝑎𝑟 0

76.

変換⾏列作成スクリプト c 2 𝑛𝑒𝑎𝑟 𝑟𝑖𝑔ℎ𝑡 − 𝑙𝑒𝑓𝑡 0 0 0 𝑟𝑖𝑔ℎ𝑡 + 𝑙𝑒𝑓𝑡 0 𝑟𝑖𝑔ℎ𝑡 − 𝑙𝑒𝑓𝑡 2 𝑛𝑒𝑎𝑟 𝑡𝑜𝑝 + 𝑏𝑜𝑡𝑡𝑜𝑚 0 𝑡𝑜𝑝 − 𝑏𝑜𝑡𝑡𝑜𝑚 𝑡𝑜𝑝 − 𝑏𝑜𝑡𝑡𝑜𝑚 𝑓𝑎𝑟 + 𝑛𝑒𝑎𝑟 2𝑓𝑎𝑟 𝑛𝑒𝑎𝑟 0 − − 𝑓𝑎𝑟 − 𝑛𝑒𝑎𝑟 𝑓𝑎𝑟 − 𝑛𝑒𝑎𝑟 0 −1 0 0

77.

[beta]

画⾓の調整
<script type="text/javascript">
var
var
var
var
var

video; //ビデオを扱う変数
model; //顔認識の学習モデル
camera; //カメラ(視点)を扱う変数
canvas; //描画領域
screenWidth, screenHeight; //表⽰領域のサイズ

//ページを読みこんだら実⾏。初期化に使⽤。
window.onload = function() {
};
//顔認識の学習モデル読み込み
async function LoadFaceModel(){
}
//顔認識をリアルタイムに⾏う
async function FaceTracking(){
}
c

</script>

次はここに関数を追加

78.

画⾓の調整 function PerspectiveOffCenter(left, right, bottom, top, near, far) { var x = 2.0 * near / (right - left); var y = 2.0 * near / (top - bottom); var a = (right + left) / (right - left); var b = (top + bottom) / (top - bottom); var c = -(far + near) / (far - near); var d = -(2.0 * far * near) / (far - near); var e = -1.0; var m = new THREE.Matrix4(); m.set( x,0,a,0, 0,y,b,0, 0,0,c, d,0,0, e,0); return m; } Lesson14

79.

Left/Right/Top/Bottom 1 (-0.5, height/2, 0) (0.5, height/2, 0) Y X (-0.5, -height/2, 0) height (0.5, -height/2, 0) (x,y,z)

80.

[beta]

画⾓の調整
<script type="text/javascript">
var
var
var
var
var

video; //ビデオを扱う変数
model; //顔認識の学習モデル
camera; //カメラ(視点)を扱う変数
canvas; //描画領域
screenWidth, screenHeight; //表⽰領域のサイズ

var halfWidth, halfHeight; //表⽰領域の半分のサイズ
//ページを読みこんだら実⾏。初期化に使⽤。
window.onload = function() {
};
//顔認識の学習モデル読み込み
async function LoadFaceModel(){
}
//顔認識をリアルタイムに⾏う
async function FaceTracking(){
}
</script>

Lesson15

81.

[beta]

画⾓の調整
<script type="text/javascript">
var
var
var
var
var

video; //ビデオを扱う変数
model; //顔認識の学習モデル
camera; //カメラ(視点)を扱う変数
canvas; //描画領域
screenWidth, screenHeight; //表⽰領域のサイズ

var halfWidth, halfHeight; //表⽰領域の半分のサイズ
//ページを読みこんだら実⾏。初期化に使⽤。
window.onload = function() {
};
//顔認識の学習モデル読み込み
async function LoadFaceModel(){
}
//顔認識をリアルタイムに⾏う
async function FaceTracking(){
c

}
</script>

次はここを編集

82.

[beta]

画⾓の調整
//描画領域のサイズが変わった場合
if(screenWidth!=canvas.width || screenHeight!=canvas.height){
screenWidth=canvas.width;
screenHeight=canvas.height;
//部屋の横幅を1に固定した場合の⾼さを計算
let height=screenHeight/screenWidth;
//部屋のオブジェクトを取得してサイズを変更
let room= document.getElementById('room');
room.setAttribute('scale', { x: 1, y: height, z: 1 });

}

halfwidth = 0.5; //今回は横幅を1に固定しているので0.5でOK
halfHeight = height/2; //部屋オブジェクトの⾼さの半分

//顔の検出
let predictions = await model.estimateFaces(video);
//⾒つかった顔が1つ以上あれば
if (predictions.length > 0) {
//中略
}

Lesson16

83.

[beta]

画⾓の調整
//描画領域のサイズが変わった場合
if(screenWidth!=canvas.width || screenHeight!=canvas.height){
screenWidth=canvas.width;
screenHeight=canvas.height;
//部屋の横幅を1に固定した場合の⾼さを計算
let height=screenHeight/screenWidth;
//部屋のオブジェクトを取得してサイズを変更
let room= document.getElementById('room');
room.setAttribute('scale', { x: 1, y: height, z: 1 });

}

halfwidth = 0.5; //今回は横幅を1に固定しているので0.5でOK
halfHeight = height/2; //部屋オブジェクトの⾼さの半分

//顔の検出
let predictions = await model.estimateFaces(video);

c

//⾒つかった顔が1つ以上あれば
if (predictions.length > 0) {
//中略
}

次はここを編集

84.

[beta]

画⾓の調整
if (predictions.length > 0) {
//バウンディングボックスとその左上・右下の座標を取得
let keypoints = predictions[0].boundingBox;
let topLeft=keypoints.topLeft;
let bottomRight=keypoints.bottomRight;
//中⼼を計算(-1~1で正規化)
let cX=(topLeft[0]+bottomRight[0])/video.videoWidth-1;
let cY=(topLeft[1]+bottomRight[1])/video.videoHeight-1;
//カメラの位置を操作
camera.position.x=-cX; //左右反転
camera.position.y=-cY; //上下反転
camera.position.z=2.5; //奥⾏きは分からないので適当に設定

}

//変換⾏列を計算してカメラに適⽤
camera.projectionMatrix=PerspectiveOffCenter(
(-halfWidth-camera.position.x), (halfWidth-camera.position.x),
(-halfHeight-camera.position.y),(halfHeight-camera.position.y),
camera.position.z,5);
Lesson17

85.

[beta]

画⾓の調整
if (predictions.length > 0) {
//バウンディングボックスとその左上・右下の座標を取得
let keypoints = predictions[0].boundingBox;
let topLeft=keypoints.topLeft;
let bottomRight=keypoints.bottomRight;
//中⼼を計算(-1~1で正規化)
let cX=(topLeft[0]+bottomRight[0])/video.videoWidth-1;
let cY=(topLeft[1]+bottomRight[1])/video.videoHeight-1;
//カメラの位置を操作
camera.position.x=-cX * halfWidth; //左右反転
camera.position.y=-cY * halfHeight; //上下反転
camera.position.z=2.5; //奥⾏きは分からないので適当に設定

}

//変換⾏列を計算してカメラに適⽤
camera.projectionMatrix=PerspectiveOffCenter(
(-halfWidth-camera.position.x), (halfWidth-camera.position.x),
(-halfHeight-camera.position.y),(halfHeight-camera.position.y),
camera.position.z,5);
Lesson18

86.

87.

仕上げ a-sceneとvideoタグのsytleで指定している position: absolute;をそれぞれ削除

88.

完成︕

89.

c おまけ︓部屋の前⾯より⼿前を表⽰可能にする <a-entity id="objects" position = "0 0 0" scale="1 1 1">

90.

おまけ︓部屋の前⾯より⼿前を表⽰可能にする //バウンディングボックスとその左上・右下の座標を取得 let keypoints = predictions[0].boundingBox; let topLeft=keypoints.topLeft; let bottomRight=keypoints.bottomRight; //中⼼を計算(-1~1で正規化) let cX=(topLeft[0]+bottomRight[0])/video.videoWidth-1; let cY=(topLeft[1]+bottomRight[1])/video.videoHeight-1; //カメラの位置を操作 camera.position.x=-cX * halfWidth; //左右反転 camera.position.y=-cY * halfHeight; //上下反転 camera.position.z=2.5; //奥⾏きは分からないので適当に設定次はここを編集 //変換⾏列を計算してカメラに適⽤ camera.projectionMatrix=PerspectiveOffCenter( (-halfWidth-camera.position.x), (halfWidth-camera.position.x), (-halfHeight-camera.position.y),(halfHeight-camera.position.y), camera.position.z,5);

91.

おまけ︓部屋の前⾯より⼿前を表⽰可能にする //中⼼を計算(-1~1で正規化) let cX=(topLeft[0]+bottomRight[0])/video.videoWidth-1; let cY=(topLeft[1]+bottomRight[1])/video.videoHeight-1; //カメラの位置を操作 camera.position.x=-cX * halfWidth; //左右反転 camera.position.y=-cY * halfHeight; //上下反転 camera.position.z=2.5; //奥⾏きは分からないので適当に設定 let near =1; //nearの値をカメラのz(=2.5)ではなくカメラから1m⼿前に変更 let a = near/camera.position.z; //near変更に伴うnear⾯のサイズ変化の割合 //変換⾏列を計算してカメラに適⽤ camera.projectionMatrix=PerspectiveOffCenter( (-halfWidth-camera.position.x)*a, (halfWidth-camera.position.x)*a, (-halfHeight-camera.position.y)*a,(halfHeight-camera.position.y)*a, near,5); 完成品19

92.

参考資料 • A-Frameチュートリアル https://www.slideshare.net/ssuserc0d7fb/osc2020fukuoka-webar • mediapipeチュートリアル https://www.slideshare.net/ssuserc0d7fb/ai-xwebar-mediapipe-in •Kinect x Unity版ヘッドトラッキング https://speakerdeck.com/takashiyoshinaga/kinectwo yong-itahetudotoratukingu

AI x WebXR! フェイストラッキングを用いた擬似3D表現

Takashi Yoshinaga

関連スライド

ARCore Geospatial API x Unityハンズオン by AR Fukuoka

Unityで始めるWebAR with ZapWorks

Getting Started with ARCore Geospatial API & Unity

AR.jsとA-Frameではじめるお手軽WebAR/VR

はじめようShader Graph: クロマキー処理

XREAL Air and Nreal Light開発入門

各ページのテキスト