iPhoneとMacがあるならあなたもARアプリを作れます RealityKitとBlenderで初めてのARアプリを作る【初心者向け】
はじめに
こんにちは！はるなしです。
最近はAR(拡張現実)の技術が面白いと感じていて、医療に応用できないかな、というところも見据えてかんたんなARアプリの開発を行っています。
僕はswift(Appleの製品で動くアプリを作るための言語)を使ってアプリ開発をしています。Appleが提供しているARKit、RealityKitというフレームワーク(ARアプリを作るための便利道具箱)を使うことで簡単にARアプリを作ることが可能で、今回は初心者向けに、簡単なARアプリ作成の記事を書こうと思います。
少しでも興味があるならば、ぜひ実際に手を動かしてアプリを作って欲しいです。特にARのアプリは実際に体験しないと凄さがわからないし、開発の難しさも自分でやらないとわからないです。自分で作ってみれば、何に応用できそうか、また限界はどのあたりにあるのかの勘所がつかめて、世界の解像度が上がると思います。想像したり、勉強したり、喋るだけではなく、「作ること」が重要だと僕は思います。
書くこと、書かないこと
書くこと
・簡単なARアプリ(自分で用意した3D モデルを平面上に出す)の作成
・しつこいくらいスクショを使った初心者向けの解説(真似するだけで作れる、を目指す)
書かないこと
・プログラミング言語(swift)の詳細
対象
最適
・macでアプリ開発の勉強は簡単にしたことあるけど、特に自分でなにか作ったことはないひと。
・swiftに限らず、なにかプログラミング言語を勉強したことがあるひと
少し頑張れば作れる
・アプリ開発は全くやったことがない。AR開発に興味がある
・プログラミング完全初心者
想定していない
・windowsパソコンしかもっていない(今回はapple限定です)
・つよのひと。
作るアプリ
平面に、Blenderで編集した3D球体を出現させるアプリ。
必要なもの・事前準備
必要なもの
mac or macbook 、iPhone or iPad
事前準備
Xcode(13.1)のダウンロード
→普通にApp Storeにあります。めちゃくちゃにダウンロードに時間がかかります(1日くらい)。導入の解説記事はいっぱいあるので参考に。※1
初めてのアプリをつくる
さっそくXcodeを開いてみましょう。
・Create a new Xcode projectをクリック
・Augumented Reality App （ARアプリのテンプレートが準備されている）
→Nextをクリック
・ProductNameを適当につける
interfaceはstoryboard
LanguageはSwiftに設定
→Next
・好きな場所に保存する
→Create
・こんな画面です。
じつは、テンプレートを使用したので、アプリはすでに完成しています。
どんなアプリが準備されているのか確認します。macとiPhone or iPadを接続して、さっそくビルド(アプリを実際のデバイスで動かすこと)してみましょう。iphoneをMacにつなぐと信頼しますか？と聞かれるので信頼する、で。
・上の方にデバイスの名前(iPod touchとか)が表示されている部分があります。そこをクリックすると、デバイスがたくさん選べます。その中から自分の「〇〇のiPhone」を選択しましょう。表示されない場合は接続し直したり、xcodeを再起動すると認識してくれます。
・選択できたら左上の再生ボタンをクリックするとアプリをデバイスに転送し始めます。初回は時間がかかることが多いので気長に待ちましょう。※2,3
・カメラを許可して・・・
ばばーーん！！
これは「デバイス起動後に最初に検知した水平面に四角い箱を置く」アプリです。
けっこう「そこにある感」がありませんか？？iPhone,iPadをうりうり動かして遊んでください。
※1「Xcode ダウンロード 初心者」とかでいろいろ出てきます
※よくあるエラー The run destination 〇〇のiPad is not valid for Running the scheme 'sample_app'.The run destination 〇〇のiPad is not valid for Running the scheme 'sample_app'.
→iPhone,iPadのOSのバージョンが低すぎる、と怒っている。
左上のアプリ名クリックして、Deployment info のiOS を自分のデバイスに合わせてあげると解決します。
※よくあるエラー Could not launch “sample_app”
設定→一般→デバイス管理→Apple Development〜→青字のApple Development〜をタ ップ→信頼する
を設定したあともう一回再生ボタンを押してください
何がおこっているのか
アプリ作れたはいいですが、なんで動いているのかよくわからんですね。
このテンプレートアプリの仕組みを少し調べてみましょう。
・まず、左の「Experience」をクリックしてください。
・見覚えのある四角い箱です。右上の「open in reality composer」をクリックしてください
・こんなかんじ。
・Reality Composerは(おおまかには)表示する3Dモデルを編集するための画面です。黒い立方体があって、よく見ると、「アンカー」が「水平方向」と設定されていますね。
・この3Dモデルが配置されていろんな設定がされているものを「シーン」と呼びます。たとえば、ここに球体をもう一個追加したら、平面に立方体と球体が置かれます。（右上の「追加」から。）
・「シーン」には名前がついています。右上でシーンの名前が確認できます。このシーンの名前は「Box」です。
・ほかにも、立方体をクリックすると3Dモデルの大きさや「素材」を変更できます。
（ぜひ、いろいろと追加、変更してみて、もう一度再生マークからアプリをビルドし直してください。変更が反映されます。）
・他のファイルも確認しましょう。Reality composer(Experience.rcproject)はバツで閉じてください
・左の「View Controller」をクリックしてください。
コードが書かれていますね！！
・あまりびびらないでください。やってることは簡単です。（まだ理解できなくてOKです。なんとなくの把握だけ。）以下、ちょっと解説します。
・@IBOutlet var arView: ARView!
デバイス(iPhone,iPad)の画面に映すものを「arView」というものにまとめて取り扱いますよ、という意味。いきなり抽象的でよくわかんないですね。「arView」とはデバイスが認識する世界(平面とか画像マーカーとか)のことで、そこに準備した3Dモデルを追加していきます。
・override func viewDidLoad()
「アプリが起動されたときに以下のことを行いますよ」という意味。
・let boxAnchor = try! Experience.loadBox()
Experienceファイルから「Box」というシーンを読み込んで、boxAnchorという変数の中に入れますよ、という意味。先程確認したシーンには「Box」と名前がついていたことを思い出してください。
・arView.scene.anchors.append(boxAnchor)
「arView」に「boxAnchor」を追加しています。
ようするに画面上に読み込んだシーンを表示しますよ、ということです。
なんか難しいですね！！簡単のために厳密さは犠牲になっています。要するにExperienceファイルにある「シーン」を読み込んで、画面に表示していますよ、という処理です。
発展させる
ここまででけっこう盛り沢山でしたが、もうすこし頑張りましょう。
いままでの開発で、Reality Composerから立方体やら球体やらを追加することはできそうですが、実際になにか作りたいときに、それでは物足りないです。
どんなアプリを作るのかはアイデア次第ですが、もっと複雑な形の3Dモデルを取り扱いたいですよね。たとえば解剖の3Dモデルとか、3DCTとか、そんなんです。
これから、「Blender」と呼ばれる3Dモデルを編集するソフトを使って、球体をARアプリ上に表示させましょう。最終的な完成品はテンプレートアプリと変わりなく見えますが、内容はかなり高度になっています。自分で3Dモデルを用意しているので、配布されているモデルや、複雑な形をアプリ上で表現することができます。
おおまかには
・Blender上で3Dモデルの用意
・ファイルの書き出し
・ファイルの変換
・Xcodeに読み込み
・コードを少し書き換える
という流れです。難しいことはしないですが、Blenderを勉強すれば難しいこともできるようになります。
それではやっていきましょう。
３Dモデルの準備
・Blenderというソフトをダウンロードしてください
簡単なんで詳細省きます
・起動して、「全般」を開きます
・最初から、立方体が用意されてるかと思います。(されてない場合もあるかも)
さすがに同じもの表示してもつまらないので、右クリックから削除してください
・削除できたら左上の「追加」「メッシュ」「UV球」を選択します
（好きなやつでいいです）
・Blenderの機能を使ったらいろんな形の3Dもでるを作ったり、誰かが作った3Dモデルを利用できたりする(自分で作るよりこっちのほうが重要)のですが、今回は簡単のために球体追加しただけで次に進みます。
・いまからBlenderで編集したファイルを、Xcodeが読み込めるように変換してあげます。変換するだけなので難しいこと考えずに手順に従ってください。
・追加した球体を選択した状態(クリックして、周囲が黄色くなった状態)で左上の「ファイル」「エクスポート」「Universal Scene Description」を選択してください。
・好きな場所を選んでファイルに名前をつけ、「USDをエクスポート」をクリックします。あとからファイルを開く必要があるのでどこに保存したか覚えておいてください。今回はわかりやすさのためにデスクトップに置いています。
・さっき保存したファイルを開きます。usdcファイルとして保存されています
・じつはこのままではまだダメで、もう一度変換をする必要があります。手がかかるのです。usdcファイルを開き、左上の「File」「Export」を選択します
・「File Format」を「Universal Scene Description Package」に変更し、「where」から保存場所を指定し、「save」をクリックします。
・道のりながかったですがこれでファイルの準備はOKです。次に準備したファイルをXcodeに取り込み、アプリに反映させます。
アプリを更新する
Blenderで準備した3Dモデルをアプリに反映させます。大まかな作業としては、まず新しい「シーン」を作成し、「ViewController」を書き換えて新しいシーンを読み込みます。
・Xcodeに戻ります。左からExperience、Open in Reality Composerをクリックしてください。
・Reality Composerが開けたら、上の「シーン」を選択、「+」を押してください。
・「アンカーを選択」が出ると思うので、「水平方向」を選択します
・こんなかんじ。
白い箱と「選択して編集」は最初から用意されている3Dモデルです。不要なのでクリックして選択したあと削除します。
・用意したファイルをReality Composerに読み込みます。右上の「追加」「読み込む」をクリックして、さっき準備したファイルを選択します。
・するとRealityComposerに球体が読み込まれます。
実は、Blenderではメートル単位でモデルを作成しているので巨大な球体が追加されます。「追加されないな？？」と思ったら、視点を遠くからにして動かしてみてください。
・サイズを調整します。球体をクリックして選択し、「サイズ調整」で大きさを変更します。僕は10％まで縮小しました。
・球体を原点に移動させます。○が書かれているところが原点です。球体を選択すると矢印が現れ、軸に沿って移動ができるので原点にドラッグしてください。
・シーンに名前をつけます。ViewControllerからシーンを読み込めるように、新しく作ったシーンに名前をつけます。右上に「シーン」と書かれているのでこれを「mySphere」に変更しましょう。
※このとき、球体を選択「しないで」名前をつけてください。球体を選択した状態だと、「シーン」ではなくて「モデルそのもの」に名前がついてしまいます。
・いよいよ大詰めです。Reality Composer を閉じて、ViewControllerを開いてください。
・解説したとおり、テンプレートのアプリでは「Box」というシーンを読み込んでいました。これを準備した「mySphere」に変更します。
・まず
let boxAnchor = try! Experience.loadBox()
の.loadBox()を削除します。
削除したところから続けて.loadと入力すると、入力候補が出てきます。
.loadmySphere()を選択してください。
Xcodeは賢いので、追加されたシーンを認識して、「こっちのシーンと入れ替えたいんやろ」というのを予測してくれるのです。※
※設定によっては予測候補が出現しない場合があります。そのときは.loadmySphere()と手打ちしてください。
※Type 'Experience' has no member 'loadmySphere'というエラーが出るときには、RealityComposerを開き直して、シーンの名前が変更されているか確認してください
・これでやっと完成です！！
最初と同じようにiPhone,iPadとつないで、再生ボタンからビルドしてみましょう。
・できました！！！
・けっこう大変だったかもしれません。お疲れさまです。
今後何をすればいいか
・今回の開発で一番基本のアプリ開発はできたと思います。
・もちろん、他にもできることはまだまだいっぱいあります。(画像マーカーとか)需要ありそうなら続編も書きます。
・つかれたので今後、は追記で書きます・・・
