ブログ

BLOG

パソコンが無くても大丈夫!Adobe Aeroでお手軽AR体験

OB・OG Other Blog

こんにちは。
年末年始の暇つぶし需要なのか映画やゲームなどの割引セールをよく見かけるようになりましたね。
休み期間中如何にしてこたつから出ず過ごせるかの計画が楽しい今日この頃です。

さて、今回はAdobe Aeroを使って、iPadのみでARコンテンツを作っていこうと思います。
Adobe MAX Japan 2019で何度か紹介されていたアプリなのですが、中々面白そうな事に応用できそうですよっ!

1. Adobe Aeroとは


Adobe Photoshop、Illustratorなどのツールで作成したアセットを利用して、AR(拡張現実)エクスペリエンスをデザインし、公開することができます。Adobe Aeroがあれば、複雑なコーディングなしで、物理的な現実世界とデジタルな世界を融合させられます。

引用元:https://www.adobe.com/jp/products/aero.html

公式サイトの説明通り、難しいコーディングは全く必要ありません。
指でグリグリ~と操作するだけで簡単にARコンテンツの制作ができてしまいます。

なんとiOS版は無料!
Adobe CCに加入していなくてもiPhoneかiPadがあれば使えます。

2. 基本編:まずはサンプルデータでお試し作成

App Storeから「Adobe Aero」と検索してアプリをダウンロード。

このアイコンが目印です!

アプリを起動して、「新規作成」をタップします。

 

するとカメラが起動し、「サーフェスの検索中」といったコメントが出てきます。

サーフェスとはオブジェクトの基準となる物体の事を指します。
ノートパソコンやティッシュケースなど、手元にある適当な物でOKです。

 

サーフェスが見つかりました。タップでサーフェスアンカーを作成します。」と出てきたら、画面をタップします。
設定したサーフェスを基準にオブジェクトを配置していきます。

右下の「」アイコンをタップし、「スターターアセット」を選択します。
あらかじめ用意されたモデルが大量にあるので、好きなものを選んでいきましょう。

 

この画像以外にもバラエティに富んだモデルが用意されています。
自分で用意した3Dモデルや2D画像やAdobe Stockからダウンロードした素材も読み込めます。

 

今回は「おもちゃ表示チュートリアル」からおもちゃのモデルを選択してみました。

 

モデル選択後、画面内の置きたいところをタップするとモデルが配置されます。
ピンチイン・ピンチアウトでモデルの大きさ・向きを調整していきます。

同じ場所で位置を調整していると、別の角度から見た時に遠すぎる位置に配置されていたり…なんて事もあるので、こまめに場所を移動しながらちょうどいい位置に調整するのがポイント。

これで3Dモデルの配置は完了です。
この状態でも立派なARコンテンツができているのですが、もうひと手間加えてよりインパクトのあるものを作ってみました。

配置したモデルに動作を追加する

配置したモデルをタップし、画面中央下の「動作」を選択します。
+トリガー」をタップし、アニメーションの開始条件を選択します。

 

 

「移動」「スピン」「出現」…などプリセットが用意されているので、好きなものを選びます。
モデルによっては固有のアニメーションを設定できます。(ティラノサウルスが咆哮したりなど…)

 

画面左上の「プレビュー」で動作の確認をし、問題なければ完成です。

3. 応用編:Photoshopでモデリングしたデータを使ってARメッセージカードづくりに挑戦

Photoshopでモデリング?
はい、実はできるんです。

実際にモデリングしてみたものがこちら。
くまのぬいぐるみ?いいえ、ねずみです。

手順は、先日のAdobe Max JapanでPhotoshopでのモデリングからAeroで読み込みまでを実演していた方のブログ記事を参考にしています。

Photoshopから始める3Dモデリング Dimension Aero mixamoでクマのキャラを動かそう
http://ilamemo.com/2019/12/dimension-and-aero/

Adobe Dimentionが無くてもAeroに読み込めるモデル自体はちゃんと作れるのでご安心を!
タブレットにpsdデータを転送し、先程と同じ要領でAeroに読み込んでいきます。

菓子パンの上に佇むチュー太郎(漂白済み)

少し周りが寂しいので、「スターターアセット」からいくつかモデルを読み込み配置していきます。

 

4. 完成!(サンプルデータあり)

Aeroをインストールした状態で下のリンクからサンプルデータにアクセスできます。

https://adobeaero.app.link/46sgW8i4I2

5. まとめ

パソコンのソフト内でデータを用意してタブレットは出力するだけでしょ?と思いきや、
タブレットだけで一通りの手順を進める事ができて驚きました。

まだリリースされたばかりのアプリなので、これからどんどん面白い機能が追加されていくんじゃないでしょうか?
これからのアップデートに期待ですね!