この記事は「いのべこ（富士通システムズウェブテクノロジー）Advent Calendar 2020」の23日目の記事です。記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません。

はじめに

XcodeとBlenderを使用し、簡単な自作ARアプリについて、一連の作成手順まとめています。
初心者のため、以下のページを参考に実施させていただきました。大変ありがとうございました。m(_ _)m
この記事のゴールは、iPhoneに、手作りモデルを、ARで、表示させます！

開発環境

MacBook Air 11.0.1
Xcode 12.2
Blender 2.91.0

アプリ開発

Xcodeをインストールし、デモアプリを実行してみる

AppStoreでXcodeを検索してインストール
ダウンロードが完了したら、Xcodeを起動し[Cleate a new Xcode project]>[Augmented Reality App]を選択しNextクリック
Product Name：AR_test、Content Tecnology：SceneKit、Interface：Storyboard、Language：Swiftとそれぞれ選択し、nextをクリック
デモアプリを作成したいフォルダーを選択し、Createをクリック→ここまでの手順で以下の画面が表示されます
MacとiPhoneをケーブルで接続する
Xcodeの画面上部 iOS Deviceから5.で接続したiPhoneを選択する。
Command+rを押す(iPhoneにアプリが送られます)
以下のように、スマホで飛行機のデモアプリが起動されるとOKです

Blenderでテレサをモデリングする

初期準備
1-1. Blenderをダウンロードする^※1
1-2. Blenderを起動、全般を選択し新規ファイルを作成する 1-3. 右上のシーンコレクションから、Camera、Lightを削除する
1-4. 追加>メッシュ>UV球でUV球を作成する
1-5. シーンプロパティ>単位>長さでメートルを、cmに変更
1-6. ビューポートオーバーレイでスケールを0.01に変更 1-7. 球を選択した状態で S を押すと、全体の大きさを調整できるのでマウスで、適切な大きさまで小さくしていく^※2
テレサのシッポ作り
2-1. 球を選択したまま、[Command]+E を押し、細分化を選択する
2-2. プロポーショナルモードに切り替える
2-3. 引き伸ばしたい部分の頂点を選択した上で、G を押し、マウスでシッポを伸ばしていく
2-4. ガタガタになってしまったので、シッポの頂点を選択>右クリック>頂点をスムーズにを選択し、滑らかなシッポにする(ここの頂点とは、先端ではなく線を結ぶための点を指します)
腕を作ります。
3-1. 追加>UV球で球を1つ追加する
3-2. S(サイズ調整)、プロポーショナルモード→G(形の調整)、R(回転)、G(移動)を組み合わせて使い、テレサの腕を作成していく^※3 3-3. Shift + D で腕を複製し、反対の腕も作ります
顔を作成します
4-1. 3Dビューウィンドウの右上にカーソルを持っていくと、+ マークが現れますので、押しながら左にスライドし、画面を2分割する
4-2. 右の画面では、UIエディターを選択し、左の画面ではテレサの顔となる面を選択する
4-3. 右の画面で、UV>UV配置をエクスポートし、pngファイルを保存する
4-4. pngファイルを編集し、枠内にテレサの顔を作成します。^※4^※5
顔の作成が終わったら、モデルに顔を反映させます。
5-1. 右の画面で画像>開くで先程作成した顔を選択する。
5-2. プロパティウィンドウで、マテリアルプロパティ>リンクする画像を閲覧>作成した画像を選択 5-3.よくみると、腕の裏にも顔ができていたので修正します。マテリアルプロパティ>+ボタン押し、マテリアルスロットの追加>顔がついていた面を選択する>選択した状態で割り当てで色を変えます。色は、ベースカラーの変更で選択できます。
(テレサの顔が丸くなってしまいすみません。。。今回は勉強のためこのまま進めます。)
舌を作成します
6-1. 追加>メッシュ>UV球
6-2. 2、3同様に形を作り、移動させます
6-3. 5-3同様に色を変えます
Xcodeで読み込み可能なようにエクスポートします
7-1. ファイル>エクスポート>Collada

※1 必要に応じて、日本語化するよいです
※2 ここでサイズを大きくしすぎていると、AR表示させたときに大きすぎて驚きます
※3 S、G、R それぞれに、X, Y, Z も合わせて使うと、軸を固定できます
※4 今回は、インターネット上で編集できるpixlrを使用しました
※5 メッシュの背景も削除する

作成したテレサをARアプリで表示させてみる

冒頭で作成したデモアプリを起動する
作成したdaeファイルと顔用に作ったpngファイル(わたしは間違えてjpgにしましたが問題ありませんでした)をart.scnasstesフォルダに配備する
Editer>Convert to SceneKit file format(.scn)でdaeファイルをscnファイルに変換する
ViewController.swiftを開き、以下のように修正する

let scene = SCNScene(named: "art.scnassets/ship.scn")!

を、

let scene = SCNScene(named: "art.scnassets/teresa.scn")!

に。
4. デモアプリと同様の手順でiPhoneで起動してみる
5. テレサが表示される

以上で完成です。(写りは絵描いたみたいになってしまいましたが。。。)

おわりに

基本操作で簡単に作成できました。
見ていただきありがとうございます。

【Xcode、Blender】ARアプリでテレサを出す