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

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

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

- [ニンテンドーキッズスペース・テレサ](https://www.nintendo.co.jp/kids/character/teresa/)
- [Hello AR!!](https://www.nsunrise.work/p/index.html)
- [【Blender】各ウィンドウの役割と名前【画面構成】](https://blender-cg.net/window-name-role-layout/)
- [Blender入門#23：オブジェクトに色を付ける](https://www.cgradproject.com/archives/2287/)
- [ある方向にだけ移動・回転・拡大縮小する](http://blenderfaq.blender.jp/oldfaq/tips/axis-fixed-move-rotate-zoom)
- [Blender 2.8 でガタガタになった面をなめらかにする](https://www.matatabi-ux.com/entry/2019/03/14/100000)
- [【Blender】細分化する方法【ポリゴンの分割】](https://blender-cg.net/subdivide/)
- [【Blender2.8入門】モデリングを始める④ テクスチャの貼り方](https://styly.cc/ja/tips/blender-modeling-start4/)
- [Blenderでカービィのモデリングをする](https://qiita.com/Mikoshi/items/a88f377bccac1965be09)
- [【Blender】メッシュを引き延ばす機能【プロポーショナル編集モード】](https://blender-cg.net/proportional-editing/)


#開発環境
MacBook Air 11.0.1
Xcode 12.2
Blender 2.91.0 

#アプリ開発
###Xcodeをインストールし、デモアプリを実行してみる
1. AppStoreでXcodeを検索してインストール
2. ダウンロードが完了したら、Xcodeを起動し[Cleate a new Xcode project]>[Augmented Reality App]を選択しNextクリック
3. Product Name：AR_test、Content Tecnology：SceneKit、Interface：Storyboard、Language：Swiftとそれぞれ選択し、nextをクリック
4. デモアプリを作成したいフォルダーを選択し、Createをクリック→ここまでの手順で以下の画面が表示されます
![スクリーンショット 2020-12-23 1.38.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920751/4a46cc94-6abd-929c-c191-4389868101b8.png)
5. MacとiPhoneをケーブルで接続する
6. Xcodeの画面上部 iOS Deviceから5.で接続したiPhoneを選択する。
7. Command+rを押す(iPhoneにアプリが送られます)
8. 以下のように、スマホで飛行機のデモアプリが起動されるとOKです
![iOS の画像.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920751/20c24367-3d6b-4f09-1a14-dfeff131934b.jpeg)

###Blenderでテレサをモデリングする
1. 初期準備  
1-1. [Blenderをダウンロードする](https://www.blender.org/download/)<sup>※1</sup>  
1-2. Blenderを起動、全般を選択し新規ファイルを作成する
![スクリーンショット 2020-12-23 1.40.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920751/0419eb71-4f78-c78c-5c2d-c393f70f3ae7.png)
1-3. 右上のシーンコレクションから、Camera、Lightを削除する  
1-4. 追加>メッシュ>UV球 でUV球を作成する  
1-5. シーンプロパティ>単位>長さ でメートルを、cmに変更  
1-6. ビューポートオーバーレイでスケールを0.01に変更
![スクリーンショット 2020-12-22 20.03.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920751/113b4a4a-dfe9-8769-33ee-8dce7e08bb89.png)
1-7. 球を選択した状態で S を押すと、全体の大きさを調整できるのでマウスで、適切な大きさまで小さくしていく<sup>※2</sup>
2. テレサのシッポ作り  
2-1. 球を選択したまま、[Command]+E を押し、細分化を選択する  
2-2. プロポーショナルモードに切り替える  
2-3. 引き伸ばしたい部分の頂点を選択した上で、G を押し、マウスでシッポを伸ばしていく
![スクリーンショット 2020-12-22 20.44.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920751/fc5ddb62-e9ed-65e3-4639-73ad2760091d.png)  
2-4. ガタガタになってしまったので、シッポの頂点を選択>右クリック>頂点をスムーズに を選択し、滑らかなシッポにする(ここの頂点とは、先端ではなく線を結ぶための点を指します)
![スクリーンショット 2020-12-22 20.47.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920751/efdaeba0-ab7c-7e83-2889-49e9e870a5d5.png)
3. 腕を作ります。  
3-1. 追加>UV球で球を1つ追加する  
3-2. S(サイズ調整)、プロポーショナルモード→G(形の調整)、R(回転)、G(移動)を組み合わせて使い、テレサの腕を作成していく<sup>※3</sup>
![スクリーンショット 2020-12-22 21.06.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920751/87ea50f4-2dd5-3a8b-90b5-c6e29aa276be.png)
3-3. Shift + D で腕を複製し、反対の腕も作ります 
4. 顔を作成します  
4-1. 3Dビューウィンドウの右上にカーソルを持っていくと、+ マークが現れますので、押しながら左にスライドし、画面を2分割する  
4-2. 右の画面では、UIエディターを選択し、左の画面ではテレサの顔となる面を選択する  
![スクリーンショット 2020-12-22 21.52.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920751/e7798b93-c499-9280-70d1-13e95444e120.png)
4-3. 右の画面で、UV>UV配置をエクスポート し、pngファイルを保存する  
4-4. pngファイルを編集し、枠内にテレサの顔を作成します。<sup>※4</sup><sup>※5</sup>
5. 顔の作成が終わったら、モデルに顔を反映させます。  
5-1. 右の画面で 画像>開く で先程作成した顔を選択する。  
5-2. プロパティウィンドウで、マテリアルプロパティ>リンクする画像を閲覧>作成した画像を選択
![スクリーンショット 2020-12-22 23.24.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920751/61ab3628-8a46-b2c5-b282-4a6daf4f9c0f.png)
![スクリーンショット 2020-12-23 0.00.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920751/30872ef8-9a36-432b-4936-6b05974d0d89.png)
5-3.よくみると、腕の裏にも顔ができていたので修正します。 
マテリアルプロパティ>+ボタン押し、マテリアルスロットの追加>顔がついていた面を選択する>選択した状態で割り当て で色を変えます。色は、ベースカラーの変更で選択できます。  
(テレサの顔が丸くなってしまいすみません。。。今回は勉強のためこのまま進めます。)
6. 舌を作成します  
6-1. 追加>メッシュ>UV球  
6-2. 2、3同様に形を作り、移動させます  
6-3. 5-3同様に色を変えます
![スクリーンショット 2020-12-23 0.29.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920751/040e623b-ad2d-83c6-190d-361161f308b2.png)
7. Xcodeで読み込み可能なようにエクスポートします  
7-1. ファイル>エクスポート>Collada  
  
※1 必要に応じて、日本語化するよいです
※2 ここでサイズを大きくしすぎていると、AR表示させたときに大きすぎて驚きます
※3 S、G、R それぞれに、X, Y, Z も合わせて使うと、軸を固定できます
※4 今回は、インターネット上で編集できるpixlrを使用しました
※5 メッシュの背景も削除する

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

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

```
let scene = SCNScene(named: "art.scnassets/teresa.scn")!
```
に。
4. デモアプリと同様の手順でiPhoneで起動してみる
5. テレサが表示される
![iOS の画像 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920751/cbfec33d-d35c-9acc-96c0-d308c77fd32c.jpeg)

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

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