
「AR…領域展開…。」拡張現実であそぼ!?/Adobeであそぼ!#15
オーグメンテッド・リアリティの略で、
日本語では「拡張現実」と呼ばれる。
現実世界に仮想世界を重ね合わせて表示する技術を指す言葉。エクステンデッド・リアリティ(XR)と呼ばれる先端技術のひとつ。
現実の風景の中にCGでつくられた3D映像やキャラクターなどのデジタルコンテンツやデータを重ねて表示することで現実世界を”拡張”する。
・
・
・
・
むずかしそッ
(; ̄Д ̄)
どうも、PicoN!編集部の横山です。
Adobeであそぼ。
今回は拡張現実の「AR」にチャレンジ。
とても難しそうで怖気ずいてしまいますが、今回もAdobeだけのスキルでどうにか乗り切ってみます。
Adobeが出している
ARが作れるスマホアプリ
Adobe Aero
(アドビ エアロ)
Adobeユーザーの方でも「Aero」はまだ使ったことがない、という人が多いのではないでしょうか。
Aeroはデスクトップ版(Beta)とスマートフォン版の2種類がありますが、実際にカメラを使ってARを体験するためにはスマホにAeroをインストールしましょう。デスクトップ版は細かな編集はできますが、実際のカメラを使った視聴はできません。
※スマホ版AeroはiOSでは編集とAR視聴ができますが、android OSではプレイヤーとしてのAR視聴しか現在はできないそうです。
ではさっそく「Aero」
試してみましょう!
新規作成するとカメラが起動してこのような画面になります。画面下には「移動」や「回転」などの編集ボタン。
ブルーの+ボタンを押すと、
もともと素材が入っている「スターターアセット」や、ファイル、カメラロールからデータを読み込めます。
「スターターアセット」の中には様々な3Dモデルが準備されています。
「おもちゃのロボット」を入れてみると地面に立ってくれます。あとは直感的に拡大したり場所を移動したりできます。
画面上の「生成」に移動すると
ムービーが撮影できます。
「スターターアセット」だけでもとても楽しく遊べるのですが、やっぱりオリジナルのコンテンツでARを体験したいですよね。
「ファイル」や「カメラロール」からデータを読み込めるようなので、オリジナルのデータでARを作成してみましょう。
まずはいつもお世話になっている
Adobe Illustratorで素材を準備します。
作ったものを「アセットの書き出し」などを使ってPNG画像で書き出し、できた画像をスマホに共有してAeroで読み込むと、
できた!!!
ただ、薄っぺらい!笑
やっぱり空間を生かしたARなんだから、横から見たら薄っぺらいのは少し萎えます。やっぱり3DデータでARを作り上げたい!
ということで、今回もIllustrator様様の3D機能でいってみます。イラレの3D機能の詳細は過去の記事からご覧ください。

出来上がったデータを
3Dのデータ形式で書き出します。

Adobe Illustrator/3D押し出し/アセットの書き出し
「アセットの書き出し」から3Dデータである「GLTF」のフォーマットを選択して書き出し。
出来上がったデータをスマホに共有して、
Aeroに読み込む!

おおおぉぉぉ~~~
できた!!!

影があることで現実感が増しますね!
「キャラクター」みたいなものは作れるかな??
やってみよう!
Illustratorの3D機能には登録した「シンボル」を張り付けることができるのでこれを使ってみます。

半球の図形を3Dの「回転体」で球体に

顔をつくって「シンボル」に登録

3D球体モデルの「マテリアル」→「グラフィック」で顔のシンボルを張り付ける
出来上がったデータをスマホに共有して、
Aeroに読み込む!

あれ?
まっしろだ
(; ̄Д ̄)
この方法ではダメなようです、、、
しかし、ひとつ思い出したのです。
(Adobe Dimension(ディメンション)の書き出しにAero用があったような、、、)
試してみよう!
Adobe Dimension(ディメンション)は過去にも取り上げた商品イメージ(モックアップ)などが作成できるソフト。

ディメンションに
イラレで書き出した3Dデータを読み込んで、
3Dモデルを選択し「アクション」の中にある「グラフィックをモデルに配置」
Illustratorで書き出した顔のPNG画像を張り付ける
ファイルから「書き出し」「Aero用に選択…」を選んで書き出し
出来上がったデータをスマホに共有して
Aeroに読み込んでみると、

わぁーーーー♡
できた!!!

かわいい。
3Dモデルの表面にグラフィックを貼りたい場合は「Adobe Dimension」を使うと良さそうですね。
ということで「Adobe Aero」
いかがでしたでしょうか?
「拡張現実」なんて聞くとすごく難しそうですが、意外と簡単にできちゃうんですね。
今回の説明には入れられませんでしたが、Aeroの編集機能には「アニメーション」を加えることもできちゃいます。
みなさんもぜひ
遊んでみてはいかがでしょう。
PicoN!編集部 横山
↓PicoN!アプリインストールはこちら