【SwiftUI入門】ARKitを使って簡単なアプリを作ってみる
この記事の目次
実際に簡単なARアプリを作ってみる
簡単なARアプリを実際に作ってみましょう。
まずはプロジェクトを作ります。
Xcodeを開いてください。
Xcodeを開いたら『Create a new Xcode project』を押します。
テンプレートを選ぶように言われるので、『iOS』
『Augmented Reality App』を選択し、
『Next』を押します。
プロジェクトの詳細を聞かれるので、まずはProduct Nameを入力します。
今回は、適当に『FirstARApp』と入力します。
Teamは自分のAppleアカウントを選択してください。
この状態で『Next』を押します。
どこに保存するのか聞かれるので、適当に選択して『Create』を押します。
すると、プロジェクトが作られます。
今回はプレビューは使わないので、プレビューの記述は消しておきます。
プレビューの記述を消したら、とりあえず実行してみましょう。
MacとiPhoneを繋いでください。
繋いだらiPhoneにビルドされるようにします。
上の方にある、実行されるデバイスボタンを押してください。
実行するデバイスを選択できるので、『〇〇のiPhone』を選択します。
これで、iPhoneにビルドされるようになりました。
左上にある実行ボタンを押しましょう。
すると、iPhoneにアプリがビルドされるはずです。
アプリが起動したら、適当に地面を写してみてください。
すると、キューブが生成されているはずです。
とりあえず、簡単なARアプリを作ってみることができました。
コードの説明
今回はアプリに使ったコードについて簡単に説明しておこうと思います。
まず、ARViewContainerというViewを作っています。
このViewはUIViewRepresentableというプロトコルを適用しています。
このプロトコルはSwiftUIにまだ実装されていないViewを作りたい時に適用します。
今回はARViewというARを表示するためのVIewを使いたいので、UIViewRepresentableを適用しています。
UIViewRepresentableを適用した場合makaUIViewと
updateUIViewという
二つのメソッドを作る必要があります。
makeUIViewはViewが生成された時に、updateUIViewはViewが更新された時に自動で呼ばれます。
今回は更新された時に呼び出したい処理がなかったので、updateUIViewの中身は空になっています。
makeUIVIewの方は色々書いてあるので、説明していきます。
まず、戻り値には作りたいViewを記述します。
今回はARViewを作りたいので、ARViewと記述しています。
makeUIViewの中では、ARViewのインスタンスを作っています。
引数のframeはビューの位置とサイズを指定します。
今回は『.zero』と記述しました。
この記述によりViewの位置を(0, 0)、サイズを(0, 0)にします。
SwiftUIでViewのサイズを制御するため、位置とサイズを0にしています。
次の記述のMeshResource.generateBoxは、
立方体の形状を作る記述です
第一引数のsizeで立方体の大きさを指定します。
第二引数のcornerRadiusで角がどれだけ丸いか指定します。
作った立方体の形状はmeshという定数に格納しています。
meshというのは3Dオブジェクトの形状のことをいいます。
次の記述のSimpleMaterialは
3Dオブジェクトの表面の外観を作る記述です。
第一引数のcolorには表面の色を指定します。
今回はgrayと記述されています。
第二引数のroughnessは表面の粗さを指定します。
0〜1の範囲で指定され、1に近づくほど粗く0に近づくほど滑らかになります。
今回は0.15なので、そこそこ滑らかな表面ですね。
第三引数のisMetallicは金属っぽい見た目にするか指定できます。
bool型で指定をします。
今回はtrueにしたので、金属っぽい見た目になります。
作った表面の外観はmaterialという定数に格納しています。
materialというのは3Dオブジェクトの表面の外観のことです。
次の記述のModelEntityは
実際に3Dモデルを作る記述です。
引数にはmeshとmaterialsを指定します。
今回は前に記述してあるmeshとmaterialを指定しています。
materialsは配列の形で記述します。
今回はmaterialは一つしかないので、配列の要素は一つだけです。
作った3Dオブジェクトはmodelという定数に格納します。
次のAnchorEntityという記述で
AnchorEntityを作ります。
AnchorEntityというのは3Dオブジェクトをどこに置くのか指定するためのものです。
引数には、どのような場所にAnchorEntityを作るのか指定します。
例えばplaneと記述すれば平面を、faceと記述すれば顔を検出してAnchorEntityを作ります。
今回はplaneと記述したので、平面を検出します。
planeの第一引数には、水平方向、垂直方向、その両方の内どれかを指定します。
今回は水平方向の平面を検出するhorizontalと記述されています。
第二引数のclassificationには検出できる平面の種類を指定します。
例えば、floorなら床、ceilingなら天井だけを検出できるようになります。
今回はanyと記述されているので、
平面なら種類を問わず検出されます。
第三引数のminimumBoundsは
検出できる平面の最小の大きさを指定します。
minimumBoundsはSIMD2<Float>で指定します。
SIMD2というのは二次元ベクトルのことです。
<Float>とついているので値は小数で記述されます。
今回はX軸Y軸共に0.2と記述されています。
この値はメートル単位で表されるので、0.2メートル、つまり20cm以上の平面が検出対象だということです。
作った平面のAnchorEntityはanchorという定数に格納されます。
次の記述では、anchorの子階層に
立方体のモデルを追加します。
次の記述では、先ほど作ったarViewの
Sceneの
anchorsに
先ほど作った平面のアンカーを追加するといった記述です。
平面のアンカーの子階層には立方体の3Dオブジェクトがあるので、平面を検出したらその平面に立方体の3Dオブジェクトが作られます。
次の記述では
作ったarViewを戻り値として返します。
これらの記述により、ARViewContainerというViewを作っています。
作ったViewはContentViewの中で使っています。
ARViewContainerには.edgesIgnoringSafeArea(.all)というモディファイアがついています。
このモディファイアをつけることにより、画面のセーフエリアを無視してViewを表示させます。
画面のセーフエリアとは、画面上部のノッチや
下部のバーを
除いた部分のことをいいます。
.edgesIgnoringSafeArea(.all)と記述することで、セーフエリアを無視して画面全体に表示することができます。
これで、簡単にではありますが、コードの説明が終わりました