SparkARでARエフェクトを作成してみよう#1(公開用)

Transcript

2. 4QBSL
   "3ͱ͸4QBSL
   "3ʹग़དྷΔ͜ͱ ► Meta社(旧Facebook社)が提供しているARツールです。 ⼤きな特徴として、 Spark AR Studioという開発者ツールが⽤意されており、 これを使って独⾃のARエフェクトを⽐較的簡単に作成できます。 QRコードやURLを発⾏し、外部からも簡易的に利⽤することができ ますが、FacebookもしくはInstagramのアカウントを持っている必要 があります。
3. ࡞ͬͨ΋ͷ ͦͷ̍ インタビューAR ディフェンスAR • “Replace background”を用いた背景入れ替え • キャラクター or 選手のlayer、user_layer(被写体)、background_layer(背 景)の3層構造で重なりを演出 固定画像layer user_layer + background_layer +
4. face Mesh • ロゴ表示 • 美顔フィルター face Tracker • “Mouth Open“でボールを出現 • “Head Rotation”でロゴの回転 ࡞ͬͨ΋ͷ ͦͷ̎
5. 4QBSL
   "3ͱ͸4QBSL
   "3ʹग़དྷΔ͜ͱ ► 今回は様々なARエフェクトの中から、代表的な⼆種類の作成⽅法を説明します ①Face Tracking ・顔を認識し、オブジェクトを表示 ・動作や表情の認識も可能 ②Image Tracking ・画像を認識し、オブジェクトを表示 ・ポスター等を利用した広告に利用
6. 4QBSL
   "3
   4UVEJPͷΠϯετʔϧ ► 開発のために、Spark AR Studioをインストールします ► その他必要になるものは l Facebookアカウント l Facebookアプリ or Instagramアプリ（スマホ） ► 公開後の確認のため、SparkAR Hubへのログイン Facebook / Instagramのアプリもインストールします。 ► 準備が完了したら、Spark AR Studioを起動します。
7. ► 起動時の初期画⾯はこのようになります ①Blank Projectを選択 4QBSL
   "3
   4UVEJPͷૢ࡞ᶃ
8. ► 起動時の初期画⾯はこのようになります ①Blank Projectを選択 4QBSL
   "3
   4UVEJPͷૢ࡞ᶄ
9. 4QBSL
   "3
   4UVEJPͷૢ࡞ᶅ ► 次の画⾯が出てきます。こちらが作業画⾯です。 ㋐Scene/Layers 実際に表⽰する“モノ”の在処 親⼦関係の操作や、オブジェクト の選択に利⽤します。 ㋑Assets “モノ”の⼤元の在処 テクスチャやオブジェクトを ここに保存しておきます。 ㋒Details “モノ”の詳細が表⽰されます 数値的にモノの調整ができます ㋐ ㋑ ㋒
10. 4QBSL
    "3
    4UVEJPͷૢ࡞ᶆ ► 次の画⾯が出てきます。こちらが作業画⾯です。 ㋓Viewport 実際に作業を⾏う場所です Sceneにオブジェクトを⼊れると ここに出現します。 Detailsと違い、視覚的に調整を ⾏うことができます。 ㋔スマホ表⽰ スマホでの⾒え⽅が確認できます 実際の表⽰と異なる部分もあるの で、“だいたいこう⾒える”程度の 認識の⽅が良いです。 ㋔ ㋓
11. 4QBSL
    "3
    4UVEJPͷૢ࡞ᶇ ► 下準備を⾏います。 ③左上のカメラマークを選択 ④Real-Time Simulationに表⽰ された⼈の顔を任意で選択 ⑤スマホ画⾯に顔が表⽰されます。 作成しながら顔に対して どのように動作するのかの確認が⾏えます。 ③ ④ ⑤
12. 4QBSL
    "3
    4UVEJPͷૢ࡞ᶈ Instagram / Fecebookでの共有設定 左下の⻭⾞マーク → +Add Experience → Sharing Experience → Insert → Done
13. 'BDF
    5SBDLJOHϑΟϧλʔͷ࡞੒ᶃ ► 3Dオブジェクトが額の上にあるフィルターを作成します。 ► 事前に⽤意するもの ・3Dオブジェクト（.fbxや.objファイル）
14. 'BDF
    5SBDLJOHϑΟϧλʔͷ࡞੒ᶄ FaceTrackerの追加 Scene → Add Object → Face Tracker → Insert でFaceTrackerを追加
15. 'BDF
    5SBDLJOHϑΟϧλʔͷ࡞੒ᶅ ► オブジェクトをインポートします。 AssetsのAdd Asset ↓ Importを選択し、From Computerから インポートしたいオブジェクトを選択 インポートできる3Dデータの形式は、 FBX、glTF、COLLADA、OBJ、DAEの5種類 ↓ Assetsにインポートした3DデータがOK
16. 'BDF
    5SBDLJOHϑΟϧλʔͷ࡞੒ᶆ ► インポートしたオブジェクトを表⽰させます。 3Dオブジェクトを、 faceTrackerへドラック＆ドロップ ↓ faceTrackerの下に オブジェクトが表⽰され、 画⾯に3Dオブジェクトが表⽰ ★faceTrackerは、 取得した顔の情報が⼊る場所です。
17. ► 3Dオブジェクトを調整します。 カメラの下の停⽌ボタンを押し、 ⼈の動きを⽌めます。 ↓ 3Dオブジェクトを選択した状態で、 サイズ、⾓度、場所の調整をします 中央上のボタンで調整したい物を 選択し、オブジェクトに表⽰された ⾚、⻘、緑の線をクリックしながら 調整することができます。 Propertiesから、 数値的に調整することも出来ます。 ิ଍ %ΦϒδΣΫτͷૢ࡞ᶇ
18. ิ଍ ϓϩδΣΫτϑΝΠϧΛอଘ͢Δ File → Save でプロジェクトファイルを保存 次回起動時は、Spark AR Studioを起動し File →Openから“〇〇.arproj”ファイルを選択することで開けます ①
19. εϚϗͰͷಈ࡞֬ೝᶃ ► SparkAR HubからFacebook / Instagramのアプリでテストを実施 ► Publish → Export で .arexportファイルを出⼒
20. εϚϗͰͷಈ࡞֬ೝᶄ ► SparkAR Hub (https://www.facebook.com/sparkarhub/dashboard/) を開き、「エフェクトを公開」をクリック
21. εϚϗͰͷಈ࡞֬ೝᶅ ► .arexportファイルをアップロード
22. εϚϗͰͷಈ࡞֬ೝᶆ ► プラットフォームの設定からシェアするプラットフォームを選択
23. εϚϗͰͷಈ࡞֬ೝᶇ ► エフェクトの名前を設定し保存
24. εϚϗͰͷಈ࡞֬ೝᶈ ► デバイスでテスト
25. ิ଍ 23ίʔυͷൃߦ ► QR Code Generator https://www.the-qrcode-generator.com/
26. ʙ ಈ࡞֬ೝ ʙ
27. 'BDF
    5SBDLJOHϑΟϧλʔͷ࡞੒ᶇ ► 応⽤①-顔のポジションを指定して表⽰ ► ⼿調整ではなく、カメラで認識した顔のポジションにオブジェクトを表⽰させてみましょう ①Sceneから、 オブジェクトを選択 ②詳細画⾯から、 Positionの左にある ⽮印をクリック ③画⾯中央下に Patch Editorが現れ、 ⻩⾊いブロックが出現します。 ① ② ③
28. 'BDF
    5SBDLJOHϑΟϧλʔͷ࡞੒ᶈ ► 応⽤①-顔のポジションを指定して表⽰ ► Patch Editorは、動作内部の細かい設定を⾏うことができます。 ④Patch Editorで右クリック → Face LandmarksのForeheadを選択し Add Patchをクリック ⑤Patch EditorにForeheadが出てくるので、 Centerとオブジェクトをこのように結びます。 これで、“オブジェクトのポジション = 額の中⼼”と設定することができます。 ただ、この状態だと額がどの顔のものかの情報がないため、⼊れていきます。 ④ ⑤
29. 'BDF
    5SBDLJOHϑΟϧλʔͷ࡞੒ᶉ ► 応⽤①-顔のポジションを指定して表⽰ ► 取得した顔の情報を⼊れていきます。 ⑥SceneからfaceTrackerを選択 ⑦Properties → PatchのCreateを選択 → Producer Patchをクリック ⑧３つ連なったものが出てくるので、FaceとForeheadを結びます。 これで、オブジェクトが常に額の中⼼に来るようになります。 ⑨顔情報をFace Selectで絞る必要があるため、顔が複数ある場合、トラッカーもその分必要になりま す。 ⑥ ⑦ ⑧ ⑨
30. ʙ ಈ࡞֬ೝ ʙ
31. 'BDF
    5SBDLJOHϑΟϧλʔͷ࡞੒ᶊ ► 応⽤②-顔の動きとリンクしたアニメーション ► ⼝が開いた時、オブジェクトが回転するようにしてみましょう ①Patch Editorで右クリック → ウィンドウ表⽰ InteractionのMouth Open → Add Patchをクリック ②Mouth Openが表⽰されるので faceTrack…の⼀番上と結びます。 これで、⼝の開け閉め情報を取得しました。 ① ②
32. 'BDF
    5SBDLJOHϑΟϧλʔͷ࡞੒ᶋ ► 応⽤②-顔の動きとリンクしたアニメーション ► アニメーションを設定します。 ③Sceneでオブジェクトを選択 ④右上のActionsを選択し、 AnimateのSpinを選択 ⑤画⾯のオブジェクトが回転 ④ ③
33. 'BDF
    5SBDLJOHϑΟϧλʔͷ࡞੒ᶌ ► 応⽤②-顔の動きとリンクしたアニメーション ► ⼝の開け閉めと連動させます。 ⑥Mouth Openの上側と、LoopAnimationのEnableを結びます。 すると、⼝が開いてる時のみオブジェクトが回転するように なっています。 ⑦今回の場合、Durationは⼀回転する秒数になっているので、 書き換えることで回転速度を変えることも出来ます。 ★様々な結びつけ⽅をすることで、幅広いアニメーションを 簡単に作成することができます。 ⑥ ⑦
34. ʙ ಈ࡞֬ೝ ʙ
35. ·ͱΊ ► Spark ARでは、簡単にARが作成/公開ができます。 ► 画像や顔認識の精度もかなり⾼く、使いやすいです。 2021/11/22時点では 平⾯検知、ハンドトラッキング、ボディートラッキング も実装されました ► プログラミングの知識があれば、複雑なモノも作成できます。 (Patchが乱雑化するので⼯夫が必要) ► ありがとうございました！