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

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. ࡞ͬͨ΋ͷ ͦͷ̏ • 最近実装された“Hand Tracking” と、FaceTrackingの組み合わせで スノードームっぽいフィルターを 作成しました
6. 4QBSL
   "3ͱ͸4QBSL
   "3ʹग़དྷΔ͜ͱ ► 今回は様々なARエフェクトの中から、代表的な⼆種類の作成⽅法を説明します ①Face Tracking ・顔を認識し、オブジェクトを表示 ・動作や表情の認識も可能 ②Image Tracking ・画像を認識し、オブジェクトを表示 ・ポスター等を利用した広告に利用 ຊ೔͸ ͪ͜Β
7. 4QBSL
   "3
   4UVEJPͷΠϯετʔϧ ► 開発のために、Spark AR Studioをインストールします ► その他必要になるものは l Facebookアカウント l Facebookアプリ or Instagramアプリ（スマホ） ► 公開後の確認のため、SparkAR Hubへのログイン Facebook / Instagramのアプリもインストールします。 ► 準備が完了したら、Spark AR Studioを起動します。
8. ► 起動時の初期画⾯はこのようになります ①Blank Projectを選択 4QBSL
   "3
   4UVEJPͷૢ࡞ᶃ
9. ► 起動時の初期画⾯はこのようになります ①Blank Projectを選択 4QBSL
   "3
   4UVEJPͷૢ࡞ᶄ
10. 4QBSL
    "3
    4UVEJPͷૢ࡞ᶅ ► 次の画⾯が出てきます。こちらが作業画⾯です。 ㋐Scene/Layers 実際に表⽰する“モノ”の在処 親⼦関係の操作や、オブジェクト の選択に利⽤します。 ㋑Assets “モノ”の⼤元の在処 テクスチャやオブジェクトを ここに保存しておきます。 ㋒Details “モノ”の詳細が表⽰されます 数値的にモノの調整ができます ㋐ ㋑ ㋒
11. 4QBSL
    "3
    4UVEJPͷૢ࡞ᶆ ► 次の画⾯が出てきます。こちらが作業画⾯です。 ㋓Viewport 実際に作業を⾏う場所です Sceneにオブジェクトを⼊れると ここに出現します。 Detailsと違い、視覚的に調整を ⾏うことができます。 ㋔スマホ表⽰ スマホでの⾒え⽅が確認できます 実際の表⽰と異なる部分もあるの で、“だいたいこう⾒える”程度の 認識の⽅が良いです。 ㋔ ㋓
12. 4QBSL
    "3
    4UVEJPͷૢ࡞ᶇ ► 下準備を⾏います。 ③左上のカメラマークを選択 ④Real-Time Simulationに表⽰ された⼈の顔を任意で選択 ⑤スマホ画⾯に顔が表⽰されます。 作成しながら顔に対して どのように動作するのかの確認が⾏えます。 ③ ④ ⑤
13. 4QBSL
    "3
    4UVEJPͷૢ࡞ᶈ Instagram / Fecebookでの共有設定 左下の⻭⾞マーク → +Add Experience → Sharing Experience → Insert → Done
14. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► 特定の画像を映すと、 オブジェクトが現れるものを作成します。 ► 事前に⽤意するもの ・3Dオブジェクト ・トラッキングしたい画像（なんでもOK）
15. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ FaceTrackerの追加 Scene → Add Object → Target Tracker → Insert でTarget Trackerを追加
16. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► 初期画⾯はこんな感じです。 ► チェッカー模様の部分に、トラッキングしたい画像が⼊ります。
17. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► トラッキングしたい画像を設定 ③Add AssetのImportから、 トラッキングしたい 画像をインポート ④fixedTargetTrackerを選択 ⑤詳細画⾯のTextureから インポートした画像を選択 ⑥チェッカー模様が、 インポートした画像に 変わっていたらOK ⑥ ⑤ ③ ④
18. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► Face Trackingと同じ要領で、3Dオブジェクトをインポート ⑦Add Assetからオブジェクトをインポートしたら、 fixedTargetTracker0へドラック＆ドロップする。 ⑧サイズ、⾓度、位置をいい感じに調整したら完了です。 ⑧ ⑦
19. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► PCに映る画像でも、正しく表⽰されます ► ⾓度を変えてみても、 位置を維持し続けます。 ► テスト、公開の⽅法は Face Trackingと全く同様です。 ★複数画像をトラッキングしたい場合は、 Add ObjectからTarget Trackerを増やす
20. ʙ ಈ࡞֬ೝ ʙ
21. ► 3Dオブジェクトを調整します。 カメラの下の停⽌ボタンを押し、 ⼈の動きを⽌めます。 ↓ 3Dオブジェクトを選択した状態で、 サイズ、⾓度、場所の調整をします 中央上のボタンで調整したい物を 選択し、オブジェクトに表⽰された ⾚、⻘、緑の線をクリックしながら 調整することができます。 Propertiesから、 数値的に調整することも出来ます。 ิ଍ %ΦϒδΣΫτͷૢ࡞ᶇ
22. ิ଍ ϓϩδΣΫτϑΝΠϧΛอଘ͢Δ File → Save でプロジェクトファイルを保存 次回起動時は、Spark AR Studioを起動し File →Openから“〇〇.arproj”ファイルを選択することで開けます ①
23. εϚϗͰͷಈ࡞֬ೝᶃ ► SparkAR HubからFacebook / Instagramのアプリでテストを実施 ► Publish → Export で .arexportファイルを出⼒
24. εϚϗͰͷಈ࡞֬ೝᶄ ► SparkAR Hub (https://www.facebook.com/sparkarhub/dashboard/) を開き、「エフェクトを公開」をクリック
25. εϚϗͰͷಈ࡞֬ೝᶅ ► .arexportファイルをアップロード
26. εϚϗͰͷಈ࡞֬ೝᶆ ► プラットフォームの設定からシェアするプラットフォームを選択
27. εϚϗͰͷಈ࡞֬ೝᶇ ► エフェクトの名前を設定し保存
28. εϚϗͰͷಈ࡞֬ೝᶈ ► デバイスでテスト
29. ิ଍ 23ίʔυͷൃߦ ► QR Code Generator https://www.the-qrcode-generator.com/
30. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► 応⽤③-初期アニメーションを発⽣させる ► 画像を発⾒した時、 オブジェクトが⼀回転する アニメーションを追加してみる ①Scene → targetTracker0を選択 ②Proparty → Producer Patchをクリック ③すると、Patch Editorに以下のものが現れます。 こちらで、画像が発⾒されたかどうかの判定を出⼒できます。 ③ ① ②
31. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► 応⽤③-初期アニメーションを実⾏ ► 回転するアニメーションを追加 ④Scene → オブジェクトを選択 ⑤Proparty → Actions → AnimateのSpinを選択 ⑥今回はループさせず⼀回転なので、 Loop Animationのみを選択し、delete ④ ⑤ ⑥
32. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► 応⽤③-初期アニメーションを実⾏ ► ⼀回転するアニメーション ⑧Patch Editorで右クリック、 AnimationのAnimationを選択 Add Patchで追加 ⑨同様に、UtilityのPulseも追加 ⑩Animationの上側と、TransitionのProgressを結びます。 ⑪Pulseの上側とAnimationのPlay、Pulseの下側とAnimationのResetを結びます。 ⑧ ⑨ ⑪ ⑩
33. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► 応⽤③-初期アニメーションを実⾏ ► Pulseのトリガーを、画像が⾒つかった時にします。 ⑫最後にtargetTracker0…の⼀番上とPulseのOn/Offを結んで完了です。 ⑬左上のリスタートボタンで動作を確認することができます。 ただ、画像が⾒つかるたびに動くこと確認するのであれば、 実際スマホでテストしたほうが良いです。 ⑫ ⑬
34. ʙ ಈ࡞֬ೝ ʙ
35. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► 応⽤④-タップしてアニメーションを実⾏ ► デバイスに映ったオブジェクトをタップした際に、 ⼤きさが変化するようにしてみましょう ①Sceneからオブジェクトを選択 ②Proparty → CreateのObject Tapを選択 ③以下のものが現れます。オブジェクトをタップした際の 信号を送ることができるようになります。 ② ① ③
36. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► 応⽤④-タップしてアニメーションを実⾏ ► ⼤きさが変化するアニメーションを追加 ④Proparty → Scaleの左の⽮印をクリック ⑤続けて、Patch Editorで右クリックし、 AnimationのTransitionを追加 ⑥初期はこのような感じですが、値を書き換えて結びます。 ★Curveではイージング（変化の加減速）を変更することができます。 ④ ⑤ ⑥
37. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► 応⽤④-タップしてアニメーションを実⾏ ► アニメーションにループ処理を加える ⑦Patch Editorで右クリックし、 AnimationのLoop Animationを追加 ⑧Loop Animationの上側と、 TransitionのProgressを結びます。 ⑨Mirroredにチェックを⼊れます。 ループ動作を往復するようになります。 ⑦ ⑨ ⑧
38. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► 応⽤④-タップしてアニメーションを実⾏ ► 最後にObject Tapと結びつけます。 ⑩Patch Editorで右クリックし、 UtilityのSwitchを追加 ⑪Object TapとSwitchのFlip、 SwitchとLoopanimationのEnableを結べば完了です。 ⑫右上デバイスシミュレーション画⾯の三本線から Simulate Touchを選択することで、オブジェクトタップの確認ができます。 ⑫ ⑪ ⑩
39. *NBHF 5SBDLJOHϑΟϧλʔͷ࡞੒ ► 応⽤④-タップしてアニメーションを実⾏ ► 実際にデバイスで試してみましょう。 ► 発⾒した際は⼀回転/タップすると⼤きさが変わる というアニメーションが追加されています
40. ʙ ಈ࡞֬ೝ ʙ
41. ·ͱΊ ► Spark ARでは、簡単にARが作成/公開ができます。 ※公開には審査が必要となるため規約は確認必要です ► 画像や顔認識の精度もかなり⾼く、使いやすいです。 2021/11/22時点では 平⾯検知、ハンドトラッキング、ボディートラッキング も実装されました ► プログラミングの知識があれば、複雑なモノも作成できます。 (Patchが乱雑化するので⼯夫が必要) ► ありがとうございました！