Spark AR Studioのスクリプトで口の開閉を認識するカメラエフェクトの作成

# Spark AR Studio
Spark AR StudioとはFacebook・Instagramアプリ内のカメラで使用できるエフェクトが制作できるツールです。
<img width="600" alt="スクリーンショット1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255581/b047edda-2b26-4920-00fe-9855a7b1a84a.png">
###ポイント 

- 顔認識に特化しており、誰でも簡単にカメラエフェクトを作れる
- Facebook・Instagramで公開できる

[Spark AR Studio公式サイト・ダウンロード] (https://sparkar.facebook.com/ar-studio/?fbclid=IwAR3Jl0oK_4xHBcVxFKHojTtwq4dwjCfawIZTjfA9-C_y9yWeNsgxLfupOpA)

#スクリプトでエフェクトを操作
ツール上でアセットの適用、ScriptもしくはPacthエディタで動きを制御できます。
この記事では2DのエフェクトをScriptで操作する方法を説明していきます。

###基本のエフェクトの作成
基本になる顔をトラッキングするエフェクトを「Spark AR Studio」で設定します。
<img width="600" alt="スクリーンショット 2019-11-23 12.11.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255581/11cad8aa-ccb6-2400-de84-595259e2ac79.png">
Scene -> Focal Distance にFace Trackerを追加
Face TrackerにPlaneを追加

<img width="600" alt="スクリーンショット 2019-11-23 12.20.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255581/55c2ee0d-3cdf-50ea-e506-5b2fafedd070.png">
Add AssetからPlaneにセットするマテリアルを追加します。
次にマテリアルに適用させるテクスチャを追加します。  

<img width="500" alt="スクリーンショット 2019-11-23 11.49.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255581/b811484d-e5be-eea3-de41-1a1e39f3f5b9.png">
今回はGIMPで適当なpng画像を作っておきます。
テーマは**「ポンコツAI」**です。

<img width="500" alt="スクリーンショット 2019-12-31 12.24.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255581/e7520349-1070-e381-cc1b-3be67776f651.png">
開口後のエフェクト用画像も作ります。

<img width="600" alt="スクリーンショット 2019-11-23 12.29.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255581/6216fc0f-6e96-f205-714c-d651feff2d6d.png">
Add Asset -> Import From Computer から作成した画像を追加します。

<img width="600" alt="スクリーンショット 2019-11-23 12.34.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255581/0b86bc9b-5e4d-515a-aafd-5b1832630cfa.png">
マテリアルのProperties -> Textureから先ほど追加したテクスチャを選択します。

<img width="600" alt="スクリーンショット 2019-11-23 12.39.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255581/5ad58a99-cf25-acaa-17da-51ab5ff990d3.png">
Scene -> Focal Distance -> faceTracker -> planeのメニューからテクスチャを適用したマテリアルを選択します。

<img width="600" alt="スクリーンショット 2019-12-31 12.48.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255581/4b2206f8-c967-093f-4e20-6a532c42ee3a.png">
同じ手順で開口後のテクスチャの追加、新規マテリアルからテクスチャを選択、新規planeにマテリアルを適用します。
このときplaneを顔に合わせてリサイズ・移動します。
※開口後の画像が上にくるようにします。
※開口後の画像はデフォルトのVisibleをFlaseにします

###スクリプト

<img width="600" alt="スクリーンショット 2019-12-31 13.03.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255581/9622ea45-ed14-d907-ff2d-b1d606f94f37.png">
Add Assetからスクリプトを追加します。

以下が口の開閉を認識してエフェクトの表示・非表示を切り替えるスクリプトです。

```javascript:open_mouth.js
// How to load in modules
const Scene = require('Scene');
const FaceTracking = require('FaceTracking'); //FaceTrackingモジュール
const Diagnostics = require('Diagnostics'); //ログをConsoleに出力する為のモジュール


const faceTracker = Scene.root.find('plane1');
 
var face = FaceTracking.face(0);
 
// gt(0.20)が閾値
var mouthIsOpen = face.mouth.openness.gt(0.20).and(FaceTracking.count.gt(0));
 
mouthIsOpen.monitor().subscribe( function(e) {
 
    if (e.newValue == true) {
        Diagnostics.log("Mouth open");
        faceTracker.hidden = false; // 表示
    }
    else {
        Diagnostics.log("Mouth close");
        faceTracker.hidden = true; // 非表示
    }

});
```

#動作例

<img width="200" alt="スクリーンショット 2019-12-31 13.08.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255581/183f2c6a-e9c1-440c-8be5-e84ece11280a.png">

<img width="200" alt="スクリーンショット 2019-12-31 13.08.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255581/d5293757-5165-91b2-3ad0-4477ae4c63d4.png">



#随時更新中(19.12.29)

#終わりに
制作物は実在の人物及び団体とは一切関係無く、特定のものへの批判中傷ではありません。
皆様もぜひARを使い楽しくSNSを利用しましょう。

#参考サイト
sparkAR Studio Scripting Object Reference
https://sparkar.facebook.com/ar-studio/learn/documentation/reference/scripting/summary
COLE!COLE! news collection
https://colecole.jp/2018/08/10/ar-studio-tips2/