【コードを書かないAR】可愛いアバターを現実に召喚する方法

プログラミング

こんにちは

最近Twitterで投稿した「ロポリコンちゃんを現実に召喚してみた」のツイートで、少しだけやってみたいという方がいたため、やり方をまとめてみました。

とはいっても、私自身バリバリARができるという訳でも無いので、今回はとっても簡単な方法での実装となります。
これを機に、詳しい方々でもっといいアプリを作っていただければこちらとしても嬉しい限りです。

用意するもの

  • Mac
  • Xcodeアプリ
  • 3Dオブジェクト(アバター)
  • テクスチャ
  • AR対応のiPhone、iPad又はiPod
  • Blenderアプリ
  • .psdを.pngに変換できるアプリ(Photoshop)

今回はAppleのARKitという技術を用います。また、iOSアプリを作るということでMacおよびAR対応のiOS端末がなければいけません。

AR対応のiPhoneはiPhone6s/iPhone6s plus以降です。
AR対応のiPadは2017年発売のiPad第5世代以降です。
AR対応のiPodは2019年発売のiPod touch7以降です。 

しかし、工夫次第ではアンドロイド端末でARCoreを使ったり、webAR技術を使ったりできるかもしれません。私は詳しくないので、こちらは割愛させて頂きます。

XcodeアプリはMacから無料で入手可能なので、AppStoreで検索してみて下さい。ちなみに、10〜20GBの容量を使ってしまうのでご利用は計画的にお願いします。

3Dオブジェクトについては、自作のものでも購入したものでも大丈夫です。
今回は、midoriさんのロポリコン(販売ページ)モデルを使ったため、こちらのモデルでの操作で書かせて頂きます。

他の有料アバターや自作アバターでも大体同じ操作が可能だと思うので、試してみて下さい。

また、今回は.psdを.pngに変換できるアプリとしてPhotoshopを使いましたが、こちらも無料のアプリで十分事足りると思います。

アバターの拡張子変換

ダウンロードしたフォルダの中には.blendファイルとしてもアバターが入っているため、Blenderアプリからそれを開きます。

そして、難しいことは何も考えずにファイル→エクスポートから.daeでの保存を選択して下さい。

もしかしたら、ここでちょっと難しく考えられる人はポーズなどを変更することができるかもしれません。私には分かりませんが…

次に.psdの形式で一枚画像となっているテクスチャをPhotoshopで開きます。
そして、これに関しても何も考えずファイル→.pngとしてクイック書き出しを選択し、.pngファイルを作っておきます。

Xcodeアプリの操作

ここからスマホアプリを作っていきます!
ホントにコードは書かないので、怖がらなくて大丈夫ですよ。

新規プロジェクト作成

Create new Xcode projectを押して新規プロジェクトを作って下さい。すると、どんなアプリを作るかを選択する画面が出てくるので、こちらでAugmented realityを押して下さい。
ちなみに、Augmented realityの略がARとなっています。

そしてら名前を決める画面に行くと思います。好きな名前を付けて下さい。

ただ、本当に初見の方はAppleIDの登録などがあるかもしれません。
それらの操作方法は忘れてしまったので、「Swift 導入」などと検索して頂けたらと思います。ごめんなさい。

名前を付けたらNextを押して、ファイルの保管場所を指定して下さい。

アバターの導入

左にあるファイル一覧の場所から「art.scnassets」の三角ボタンを押して、格納ファイルを表示させて下さい。
ship.scnとtexture.pngが入っていると思います。

これらはサンプルファイルとなっており、このままiPhoneを繋いで実行すると、タップした場所に飛行機が出てくるアプリとなっています。

そして、この部分にアバターのデータを入れれば好きなアバターを召喚できるアプリが作れます。

そういう訳なので、先程用意しておいたアバター.daeとアバター.pngをドラッグ&ドロップで同じ場所に持ってきて下さい。

そして、アバター.daeを選択した状態で上のウィンドウにあるEditor→Convert to scenekit file formatを押してみて下さい!
恐らく.scnのファイルが出てきたことと思います。

試しにscnファイルを開いてみて下さい。アバターの形はしっかり入っていますよね?
しかし、まだテクスチャが貼られていないため真っ黒な状態となっています。

テクスチャを貼りましょう!
アバター自体をクリックして、右上の方にあるMaterialsと書いてある丸い感じのボタンを押して下さい。

そして、diffuseをクリックしてアバター.pngを選択して下さい。
アバターが輝きを取り戻したはずです!

アバターの召喚

あと少しです!

恐らく27行目付近に

上のようなコードがあり、その中に「art.scnassets/ship.scn」という部分があると思います。

このshipの部分を、自分のアバター.scn名に変更して下さい。
安心して下さい!これで完了です。

実機での確認

お手持ちのiPhoneなどをMacと接続して下さい!

そしたら、上の写真でiPhone 11 Pro Maxと書かれている部分を選択して、自分のiPhoneに変更して下さい!
そして、左の三角マークを押してRunです!
このときiPhoneのロックは解いておきましょう。

順調に行けば、iPhoneに真っ白なアプリがインストールされて勝手に起動するはずです。

ただ、こちらも初見の方はもう少し他の設定をいじらなければならなかったと思います。
もし解決できない場合は問い合わせフォーム又はTwitterアカウントまでお知らせ頂ければ手助けします。

 

最後に

最初に準備するものが少し大変かもしれませんが、こんな簡単な設定だけで好きなアバターを現実に召喚して鑑賞したり一緒に写真と取ったりできるため、ぜひチャレンジしてみて下さい!

また、最近は確かアバターを動かしたり物陰に隠したりできる技術も発達してきているので、工夫して私にも教えて頂けますと嬉しい限りです。

一緒にAR、VRなどを盛り上げていきましょう!

コメント