【Meta Spark】顔認識をして顔の傾きをScriptで判定する方法

# はじめに
本記事では、Meta Sparkを使って顔認識を行い、顔の傾きをScriptで判定する方法について説明します。
パッチエディターを使用して今回の判定を行うことも可能ですが、Scriptでの判定を行う方法を知りたく今回の実装を行いました。

# 目次
・FaceGestureModuleについて
・Meta Spark Studioのインストール
・Meta Spark StudioからScriptファイルを生成する
・顔の傾きを判定するScriptの作成
・まとめ

# FaceGestureModuleについて

今回は顔の傾きを「FaceGesturesモジュール」を使用して判定していきます。
「FaceGesturesモジュール」は、Meta Spark Studioで顔の様々なジェスチャーを検出するためのモジュールです。顔の傾きや表情などを検出し、それに応じたARエフェクトの制御を行うことができます。

具体的には、以下のような検出が可能です。

・顔の向き（傾き、回転）
・目の開閉
・口の開閉
・眉の上げ下げ度
・表情（笑顔など）

これらの検出は、パッチエディター上でも利用することが可能です。
「FaceGesturesモジュール」は、 Meta Spark公式ドキュメントでも詳しく説明されています。
参考にしてみてください。

https://sparkar.facebook.com/ar-studio/learn/reference/classes/FaceGesturesModule#methods

# Meta Spark Studioのインストール
本記事を実践するには、以下の環境が必要です。
・Meta Spark Studio


https://sparkar.facebook.com/ar-studio/learn/downloads/#spark-ar-studio

# Meta Spark StudioからScriptファイルを生成する
今回は顔の傾きが右か左か判定を行い、コンソールにログを出力するスクリプトを作成していきます。

まずはじめにMeta Spark Studioを開き、「Create New」の 「Blank Project」を選択しプロジェクトを作成します。
![スクリーンショット 2023-04-09 19.30.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/f8f9fcc0-3cd7-2e7b-4206-a460ed8a9a71.png)

開かれたプロジェクトのAssets右下の「＋」を選択し  「Script」の「JavaScript」からScriptのファイルを作成します。
![スクリーンショット 2023-04-09 19.33.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/b7f93443-1a8c-883d-bbc3-364f561d00f8.png)

インスペクター上に　「script.js」が作成されたらOKです。
![スクリーンショット 2023-04-09 19.46.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/8874303d-6429-868d-ccba-c9844d9fe1bd.png)

# 顔の傾きを判定するScriptの作成
先ほど作成した「script.js」を右クリックで選択し、「Edit」でスクリプトを開きます。
![スクリーンショット 2023-04-09 19.49.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/181d962d-3831-2d27-4967-e6141abe127e.png)

まず、顔の傾きを判定するScriptを作成します。以下のコードを開いたScriptに貼り付けてください。

```javascript:script.js
const Scene = require('Scene');
const Diagnostics = require('Diagnostics');

//FaceGestureModuleを取得
const FaceGestures = require('FaceGestures');

//FaceTrackingで取得した一人目をfaceに格納
const FaceTarcking = require('FaceTracking');
const face = FaceTarcking.face(0);

//左に頭が傾いた際の関数
function onLeanedLeft(isLeaned) {
  if (isLeaned) {
    Diagnostics.log('Face is leaned left');
   //ログの出力
  } else {
    Diagnostics.log('Face is not leaned left');
  }
}
//右に頭が傾いた際の関数
function onLeanedRight(isLeaned) {
  if (isLeaned) {
    //ログの出力
    Diagnostics.log('Face is leaned Right');
  } else {
    Diagnostics.log('Face is not leaned Right');
  }
}

(async function () {
 // FaceGesturesを使用して顔の傾きを監視する
 FaceGestures.isLeanedLeft(face).monitor().subscribe(onLeanedLeft);
 FaceGestures.isLeanedRight(face).monitor().subscribe(onLeanedRight);
})();
```

# コンソールでのログ出力確認
Meta Spark Studioに戻り、WorkSpaceの「Show Console」を選択します。
![スクリーンショット 2023-04-09 20.20.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/c848aea9-e416-32c8-998e-b374b0fd9002.png)

下記のように顔が左右に傾いた際にコンソール上にログが出力されていたらOKです。


![画面収録-2023-04-09-20.26.18.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/cd75768c-85b0-06b2-c459-352bce6be846.gif)

# まとめ
今回はScriptで顔の傾きを判定する方法を紹介しました。
Meta Sparkはパッチエディターを使用することで、ノードをつなぎ合わせるだけで簡単にエフェクトを作成することも可能になっております。
ですが判定の後にPatchに用意されていない処理をScriptで行いたいなどの際に、Scriptでの判定が役立つかと思います。
どちらを使うかは、開発の目的や内容によって変更できるとより良いフィルターが作成できると感じました。