こんにちは、Arrival QUALITY、CTOの吉田です。
Vol.1 でブツ撮り、Vol.2 でバナー作成を紹介したDesign RECIPE。
Vol.3 では、いよいよクリエイティブ感のある今どきなデジタルコンテンツをつくってみましょう。
無料ツールでつくる、Instagram AR コンテンツ
最近、ARという言葉をよく耳にしませんか？ざっくりというと「カメラで写した現実のオブジェクトを認識して、デジタルのオブジェクトを合成表示する」技術です。特定のロゴマークや床、人間の顔を認識して、それにデジタルのオブジェクトが重なりあたかもそこにあるかのうように見えるというものです。
弊社 Arrival QUALITY でもARコンテンツ展開を進めています。
実現したいアイデアがあればお電話なりこちらのメールフォームからぜひお気軽にご相談ください。
海外ではバーガーキングやスターバックスなどが盛んに使っていますし、日本でも４、５年ほど前からARアプリを使った広告があったり、最近では任天堂もARを使ったマーケティングを行いました。
特に2019年中はARを使ったコンテンツが数多く生み出されました。
これはARコンテンツを実装することの敷居がどんどん下がってきていることに起因します。
これまではARコンテンツをつくる側、見る側に多くの障壁がありました。
つくる側には、ARにするための専用のプログラムを開発するために機械学習や3Dの知識をもったエンジニアが必要でした。
見る側には、広告を見るためだけに専用アプリのインストールが必要でした。
（”それ”だけのアプリをつかってもらうというのはかなり難しいことです）
そこで、GAFA や 中国 BAT 、Snap, ByteDance など有名IT企業がそれぞれのプラットフォームをつかってARに取り組んだことで、つくる側はARコンテンツをつくるためのツールを提供し、見る側はその企業が運営するプラットフォーム（ユーザーが普段つかっているアプリ）でARコンテンツを体験できるようにしました。
例えばこれまでも Apple は iPhone や iPad で使える ARKit を、Google は Android で使える ARcore をそれぞれ提供していましたし、それをつかってアプリをつくるエンジニアもいました。しかしそのアプリは特定のARを体験するためだけにつくられた独立したものが多い状態でした。
そこで Facebook は SNS 上でARを使えるようにしたり、Amazon はECサイトの商品をARで試せるようにしました。
Appleも新型のMacを部屋の中で試し置きができますし、Googleも動物を検索するとARで実物大の動物を部屋の中に出現させて、その大きさや鳴き声など検索した結果をリアルに感じられるようになりました。
これまでユーザーがつかっていたプラットフォームで、手軽にARを体験できるようになったのです。
そのプラットフォームを開発・運営する企業だけがつくれるのではなく「各々のプラットフォームでARコンテンツをつくるためのツール」を提供することで、つくる側も手軽にARコンテンツをつくれるようになりました。
こうしてAR体験の敷居が下がったことが最近のAR熱の要因だと思います。
さて、「敷居が下がってきている」ということで、どれくらい簡単になったか、実際にARコンテンツをつくってみましょう。
もちろんつくるためのツールも”この記事”も無料です。
※AQTimes 紙面をすでに試した方は、[インタラクションと Patch Editor] >>> まで読み飛ばしてもらって構いません。
紙面には載せられなかったコンテンツを加筆しています。
ビアーマンマスクをかぶれるARコンテンツの作り方
まず、どんなコンテンツをつくるか決めるために架空プロジェクトを立ち上げましょう。
Vol.2 までにつくってきた架空のビール製品のキャラクター<ビアーマン>がいるとします。某大手飲料メーカーのキャラクターが脳裏をよぎりますが（そういえば彼は最近見かけなくなりましたね）、「誰でもビアーマンに変身できるARコンテンツ」をつくってみましょう。
【1】必要なものを用意する
- FacebookとInstagramのアカウント
- Spark AR Studio
https://sparkar.facebook.com/ar-studio/ - 端末
- Windows か Mac
- スマホ（iPhone / Android）
- マスクにする画像（会社のロゴとか適当なもので構いません）
【2】インストール
まず、Spark AR Studio をダウンロードしてインストールしてください。Windows にも Macにも対応しています。インストールが終わったら起動してください。
【3】プロジェクトを作成
Spark AR Studio が立ち上がったら 新しいプロジェクトをつくります。Blank Project (左のグレー背景にプラスマーク) をクリックして作業画面を開いてください。
[簡単な作業画面説明]
[1] ツール(Tool bar and Menu bar) : 窓の最も左側にある縦に並んだアイコン
[2] パネル(Panels): 左側にシーン（Scene panel）とレイヤー（Layers panel）や読み込んだファイル一覧（Assets panel）
[3] ビューポート(Viewport): 中央に3D空間とカメラのプレビュー
[4] インスペクター(Inspector): 選択オブジェクトの設定
【4】顔認識トラッカーとメッシュの追加
トラッキング（認識）するためのオブジェクトを追加します。(2) Scene パネルのFocal Distanceの右クリックメニュー [ Add > Face Mesh] と選ぶと3D空間に顔をトラッキングするメッシュ（チェッカーフラッグ柄のオブジェクト）が現れます。
【5】メッシュのマテリアル設定
【4】で追加されたメッシュをクリックして選択して、(4) 右側インスペクターから [Materials] という項目を探してください。 そして ＋アイコンをクリックするとメッシュに質感(Material)が加わり真っ白になります。すぐ下に現れた[Material0]をダブルクリックすると、設定が切り替わります。
【6】テクスチャを貼り付ける
マテリアルの設定から、[Texture]という項目を探してください。[Choose File] をクリックするとファイル選択画面が開きます。
【7】画像ファイルを選ぶ
パソコンに保存されている、顔に貼り付けたい画像を選択してください。すると、選択した画像がプレビューに反映されます。
【8】動作確認
実際の端末で動作を確認してみましょう。まず、左側のツールバーにあるテストアイコンをクリックしてください。
[Send to App > Instagram Camera > Send] とクリックするとアップロードが始まります。
完了すると[Test Link]と表示されるので、されます。そのURLをコピーして、テストしたいスマホに送ってください。
【9】実機テスト
スマホでURLを開くと、Instagramのアプリが開きカメラの画面になります。カメラに顔を写すとプレビューで見たようにマッピングされるはずです。
いかがでしたか。カメラに写った顔に好きなテクスチャーを貼り付ける。というコンテンツが簡単につくれました。お得意様宛にお送りした AQ Times の紙面ではここまででしたが、この記事ではさらに踏み込んでみましょう。もちろん無料です。
よりリッチなコンテンツに発展させてみよう
インタラクションと Patch Editor
Spark AR Studio では、ユーザーのタップやテキスト入力などに対してインタラクション要素を組み込めます。
ビールのコンテンツに最適なインタラクション・・・を考えてみました。
ピルスナーの歴史を紐解くと、チェコはプルゼニ地方でつくられているビールで、カジノが盛んな街らしいです。チェコにあるカジノはラスベガスのような”豪華絢爛”というものではなく、大衆的なカジノが多いそう。
ビール、ピルスナー、チェコ・・・お酒、ギャンブル、カジノ・・・。
大衆的なカジノでも、カジノの女王、花形といえばルーレットということで、ルーレットを回せるインタラクションを実装してみましょう。
本来のルーレットは、ボールが勢い良く回り盤面自体はボールとは反対方向にゆっくりと回りますが、今回は簡単にルーレット自体をクルクル回します。
インタラクション実装の流れ
ざっくりと、こんな手順で進めます。
- 画面にルーレットを表示
- Plane を追加
- マテリアル作成
- マテリアルのテクスチャに画像ファイルを指定
- Patch Editor をつかってみる
- Object Tap で画面のタップを認識する
- プレビュー画面でタップをシミュレーションしてみる
- Block で管理する
- Block の編集
- Block Properties の構築 インプットとアウトプット
- Block 内で Patch 作成
- Loop Animation 要素を加える
- Duration を操作する
- Transition させる
- Transition の値をアウトプットする
- Transition させるベクトルを変更する
- Block からアウトプットしたRotationの値を Plane にインプット
- Object Tap でタップして回転を止める
- ルーレットの位置を変更する
これだけ見るとややこしいですね。
でもプログラムみたいな難解なコードを入力する必要はないので安心してください。
プラモデルを組み上げるように、マウスのクリック、ドラッグ＆ドロップで組み合わせて、キーボードで数値を入れるだけで完成です。
それではつくってみましょう。
1. 画面にルーレットを表示
1-1. Plane を追加
Plane を追加してください。
1-2. マテリアル作成
[4]インスペクターで、マテリアルを作成してください。
1-3. マテリアルのテクスチャに画像ファイルを指定
作成したマテリアルをダブルクリックして、テクスチャを貼り付けます。
ルーレットの画像はよければこれを使ってください。
（0~37 までのヨーロピアンスタイルのルーレットです）
位置がそのままで不格好ですが、ルーレットが表示されました。
2. Patch Editor をつかってみる
2-1. Object Tap で画面のタップを認識する
先程のPlane 要素を選択して、[4]インスペクターの一番下にある Patch [Create] をクリックして、 Object Tap を選択してください。Patch Editor に plane0 とそれに繋がった Object Tap という要素が表示されましたか？
Patch Editor では、このようにPatchを組み合わせて処理を作っていきます。
[2] Scene パネルからオブジェクトをドラッグアンドドロップして追加できたり、オブジェクトの[4] インスペクターからプロパティを追加できます。
Output（Patch の右側矢印アイコン）を他のPatchのInput（Patchの左側矢印アイコン）に繋げることで、Patch同士で値を渡せます。
この図では、plane0 のObject がアウトプットされて、<Patch: Object Tap>にインプットされた状態です。
どんなPatchが使えるかは、右下にある [+ Add Patch]からPatchを一覧できます。Animation（アニメ描画） やAudio（音声再生）、Logic（条件分岐）、Math（計算）などなど色んなPatchがありますので、ぜひ後ででも、どんなことができるのか目を通してみてください。
それでは実際にPatchを使ってみましょう。
Object Tapのアウトプットをドラッグ＆ドラッグして伸ばしてみてください。
ドロップすると、Add Patch のメニューが開きます。
そこから [Utility > Switch] を選んで、右下のInsert Patchボタンをクリックしてください。
下図のように、<Patch: Switch>が追加されました。
ちなみにこのPatch Editor 上では [Alt + マウスドラッグ] で上下左右の移動、[ctrl + マウスホイール]で拡大縮小ができます。
2-2. プレビュー画面でタップをシミュレーションしてみる
では、Object Tap がきちんと認識されているか確認してみます。カメラのプレビュー画面の右上のメニューから、[Simulate Touch]を選んでください。これでプレビュー画面をクリックするとタッチしたと擬似的にシミュレーションできるようになります。
この状態でプレビュー画面内のルーレットをクリックすると、プレビュー画面では何も起こりませんがPatch Editor 上の先程のObject Tap 要素が反応しませんか？タップに合わせて仄かに光れば認識されています。
それでは一旦ルーレットは置いといて、次へ進みましょう。
3. Block で管理する
ここで、Patch Editor を便利に使う上で重要な Block 機能を説明します。
[2]パネルの一番下の [Add Asset] をクリックするとメニューが開くので、一番下のBlockをクリックしてください。
[2]Assetsパネルに Block0 というアセットが追加されたはずです。
3-1. Block の編集
Block0を選択した状態で [4] インスペクター にある[Edit]ボタンをクリックしてください。
すると、別窓で Block の編集画面が開きます。
Block 編集画面の構成は先程までのプロジェクトの編集画面とほぼ一緒です。
SceneやAssets、Patch Editor もあります。
Block 内で包括することで、親のプロジェクトが見やすくなるので、ぜひ Block は覚えておきたい機能です。
では、Block を編集してみましょう。
Block の使い方をざっくりと説明すると、「親から Input した情報を Block 内で処理して Output して親に戻す」ということができます。今回のこのBlock では「ルーレットが回転するアニメーション」を処理します。
3-2. Blockの情報設定 – Input / Output
まず、Blockで Input / Output の情報を設定します。
Block の編集画面の [2] Scene パネルで Block Root を選択して、
[4]インスペクター の [Block Properties] をクリックして設定画面を開きます。
回転速度を制御する Speed の項目を追加します。
Input の +アイコンをクリックすると blockInput0 という項目が追加されます。
選択するとオプションが設定できるるので、以下のように入力してください。
次は、回転させたり停める On / Off の項目を追加します。
さらに Input の +アイコンをクリック して以下のように入力してください。
Output 項目も同様に、回転している状態を表す数値 （ Rotation ）を親に戻す Output 項目を追加します。
Output の +アイコンをクリック して以下のように入力してください。
これで Input / Output の設定が終わりました。
3-3. Block 内で Patch 作成
次は Input した情報をOutput するまでの Patch 処理をつくります。
まず、Block の編集画面の [2]Scene パネルから Block Root を選択し、[4]インスペクターの一番下の[ Producer Patch ]ボタンをクリックしてください。
Patch Editor が開き、Block Inputs というオブジェクトが加わりました。
3-3-1. Block 内で Patch 作成
回転させる処理をつくります。
Block Inputs の On / Off からノードを伸ばして Loop Animation の Patch を追加してください。
下のような構造になりました。
Loop Animation の見た目ではわかりませんが、中では 1 秒間（ Duration: 1 ）で繰り返し処理がされています。
この 1秒間内の進捗の度合い（Progress）から回転する処理をつくっていきます。
3-3-2. Duration を操作する
このままルーレットを回すと1秒間ごとに1周することになるので、<Inputs: Speed>の項目で制御できるようにします。
<Block Inputs> の Speed と <Patch: Loop Animation> のDuration をマウスで繋げてください。
この状態で、Block Root [4]インスペクター の Inputs の値を変更してみてください。
変更した値が、Loop Animation のPatch にも反映されるはずです。
3-3-3. Transition させる
Loop Animation の値から回転処理を作ります。
Patch: Loop Animation のProgress を伸ばして、Patch: Transition を追加してください。
下図のように、Patch追加画面の上にある検索窓で Patchの名前を検索すると探しやすいのでやってみてください。
Patch: Loop Animation が Outputした Progress の値が、 Patch: Transition のProgress に Input された状態になりました。
3-3-4. Transition の値をアウトプットする
Patch: Transition の値をBlock: Rotation にアウトプットします。
[2] Scene パネルから Block Rootを選んで、[4] インスペクターの[Outputs > Rotation]の項目の左側の右矢印をクリックしてください。
Patch Editor に Block Output というPatch が追加されます。
Patch が重なって邪魔なので、適当な位置（Transition の右側あたり）に移動させてください。
そして、 Patch: Transition から Output した Value を伸ばして、Block Output のInputと繋げてください。
Block Output の数字が動いていたらOKです。このBlockでOutputした値を親のプロジェクトで取得できるようになりました。
3-3-5. Transition させるベクトルを変更する
Block Output: Rotation の3つの項目の数字がすべて動いてますよね。
これは3つの数字は、左からX軸、Y軸、Z軸のベクトルを表しているのですが、このままのOutputを使うと、3DのXYZのすべてのベクトルが変わってしまいます。ルーレットはZ軸だけ回転させたいの、Z軸だけ回転するようにしましょう。
下図のように、Patch: Transition のStartとEndの値を変更してください。
これで Start から End に指定した幅に、Progressの値が反映される状態なので、
・X軸が 0°～0°
・Y軸が 0°～0°
・Z軸が 0°～359°
だけ回転することになります。
Block Output:Transition もZの値だけが動いているはずです。
4. Block からアウトプットしたRotationの値を Plane にインプット
ここで一旦 Block を保存して、親のプロジェクトの編集画面に戻ってください。
つくった Blockで、ルーレットのPlane を回転させてみましょう。
[2] Assets パネルからScene パネルの Focal Distance の中に Block0をドラッグ＆ドロップして追加して。その中にルーレットのPlaneを移動させてください。
そして、[2] Scene パネルのBlock0を Patch Editor へドラッグ＆ドロップしてください。
Patch: Block0 からRotationを伸ばして、Add というPatchを追加します。
この状態では、Rotation のVector3型（3Dの3軸）にならないのでPatch: Addの下にあるNumberをクリックして型を[Vector3]に変更して合わせてください。
Block を編集した時のように、Patch: Addにカウントアップされる数値がInputされました。
この数値をBlock0にInputして回転させます。
まず、[2] Scene パネルでBlock0を選択し、[4] インスペクターの [Transformations ] から変化させたい要素「Rotation」をクリックします。
Patch Editor に Block0 の黄色いPatchが追加されるので、このPatchの Input に、先程のPath: Add のOutput をつなげてください。
これで、Block0の3D RotationにInputされました。プレビュー画面を見るとルーレットが回転してるはずです。
5. Object Tap でタップして回転を止める
それでは、2. で追加したObject Tapの Patch で、タップして回転を止める処理を加えます。
まず、先ほど3D Rotation のPatchのようにBlock0 の[4] インスペクターのInputsから On / Off のPatchを追加してください。
Plane0 -> Object Tap -> Switch とつながってるはずなので、 Switch からさらにOutputを伸ばして On/ Off のPatchに繋げます。
これで回転を止められるようになりました。プレビュー画面のルーレットを何度かタップして、ルーレットが停まったり回りだしたりするか確かめてください。
6. ルーレットの位置を変更する
今のままだとルーレットが顔にめり込んでる状態なので、見やすい位置に移動させましょう。
位置の変更は、 [3] のビュー画面で移動させたいオブジェクトをドラッグしてもいいのですが、3D空間を2次元の画面で操作するのは慣れが必要なので、 [4] インスペクターで [Transformations ] のPosition の値を変更するとわかりやすいです。
以下のように、 Block0 の Position を変更してください。
ルーレットがカメラに近づいて見やすくなりました。
ルーレットの位置、特に上下（Y軸）ですが、実機の画面では下にカメラのUIがくるので、これくらいの余白を確保していた方がUIがかぶりません。
この状態でプレビュー画面をタップしたり、block0のSpeedを変化させてみてください。ルーレットを操作できるようになっているはずです。
所感
さて、無事にルーレットは回せましたか。今回つくったサンプルでは、数字を選ぶ要素（ルーレットのボールのような）がありませんので、plane を追加して矢印を置くなど工夫してみてください。
同じ要領でルーレットを別のものに差し替えると、まだまだ楽しいコンテンツがつくれそうです。
たとえばカジノではなくバラエティ番組でありそうな命令が書かれたルーレット。笑顔・怒り顔・哀しい顔・すねた顔・驚いた顔・変顔の命令通りの顔をしてパシャリ。なんてのもできそうです。
つくったコンテンツは、ツールバーのアップロードからFacebookやInstagramで実際に公開することもできますので、ぜひこの年末に挑戦してみて、忘年会の余興にどうでしょうか。
弊社 Arrival QUALITY でもARコンテンツ展開を進めています。
実現したいアイデアがあればお電話なりこちらのメールフォームからぜひお気軽にご相談ください。