2
Help us understand the problem. What are the problem?

posted at

[iOS] 国際宇宙ステーション(ISS)を歩く AR アプリを作る

title_1024.png

閉じた空間の中にある構造物を歩き回る体験を AR(拡張現実)を使って提供します.iOS SDK の ARKit と RealityKit を使うと数行のコードでこれを実現することができます.この記事では、宇宙空間に浮かぶリアルスケールの国際宇宙ステーション(International Space Station: ISS)(一部分のユニット)の中を自由に歩き回ることができるアプリの作成方法を説明します.

仕組み

ISS(一部ユニット)のリアルスケールの 3D モデルを用意します.AR 体験を開始する際のデバイスの位置を ISS モデルの通路に位置合わせして仮想空間を作成します.こうすることで、背丈の異なる大人や子供が、AR 体験を開始したデバイスの位置に合わせて作られる仮想空間により、通路の中を自然な姿勢で歩くことができます.

ISS の窓から外を眺められるように球体で ISS を囲み、その内面に宇宙空間の画像を貼り付けます.更に、別の球体モデルに地球表面の画像を貼りつけて地球モデルを作ります.AR 体験ではユーザは自由に仮想空間の中を移動できるので、ISS の外に飛び出した時に、宇宙空間や地球を眺めることができます.

3D シーンを制作する

ISS の 3D モデルデータは NASA が提供しているものを使います.宇宙空間や地球のテクスチャ画像は Solar System Scope が提供しているものを使います.その他の同等のものでも構いません.

Blender などの DCC (Digital Content Creation) Tool を使って 3D シーンを制作します.ISS の一部ユニットはリアルスケールになるように調整(30 x 30 x 12 m 程)し、通路の中央を原点に合わせます.こうすることにより、ユーザが適切な位置から AR 体験を開始できるようになります.
地球は、半径 50 m 程の球体に地球表面テクスチャを張って作成し、(0.0, 0.0, -60.0) [m] に配置します.足元の下に地球が見えることになります.
宇宙空間は、半径 110 m 程の球体の内面に宇宙空間テクスチャを張って作成し、(0.0, 0.0, 0.0) [m] に配置します.ISS と地球を取り囲むことになります.

blender1_320.png blender2_320.png

作成した 3D モデルを出力し、Reality Converter で USDZ に変換します.Blender の場合は、glTF 形式で export し、それを USDZ に変換すると良いです.

AR アプリを作る

制作した 3D モデルを使って AR 体験を提供する AR アプリを作ります.

  • iOS Deployment Target: 14.0
  • Xcode 13.2

制作した USDZ file を Xcode project に追加します.SwiftUI で使う場合は、UIViewRepresentable を使います.AR Anchor を原点位置に作成します.USDZ file からモデルデータをロードして仮想オブジェクトを作り、Anchor に追加します.AR session を run すると AR 体験が開始されます.

//  ARSpaceView.swift
import SwiftUI
import RealityKit
import ARKit

struct ARSpaceView: UIViewRepresentable {
    let modelName = "InsideISS.usdz"
    let modelPosition = SIMD3<Float>([0, 0, 0]) // [meters]

    func makeUIView(context: Context) -> some UIView {
        let arView = ARView(frame: .zero)

        let anchorEntity = AnchorEntity(world: modelPosition)
        arView.scene.addAnchor(anchorEntity)

        do {
            let modelEntity = try Entity.load(named: modelName)
            anchorEntity.addChild(modelEntity)
        } catch {
            assertionFailure("could not load assets.")
        }

        let config = ARWorldTrackingConfiguration()
        arView.session.run(config)

        return arView
    }

    func updateUIView(_ uiView: UIViewType, context: Context) {
    }
}

まとめ

この記事で説明した Swift Code を GitHub で公開しています.USDZ file も入っているのですぐに試すことができます.

月、太陽、宇宙船などの USDZ モデルを追加したり、サウンド、アニメーションを追加して自分の AR アプリにすると楽しいと思います.

pict1_Y280.png pict2_Y280.png pict3_Y280.png

for_gif_ar.gif

国際宇宙ステーションの外観を外からリアルスケールで眺める AR アプリの Swift Code も GitHub で公開しています.よかったら、こちらもご参照ください.

pict4_Y280.png
for_gif_ar3.gif


フリーランスの iOS アプリ開発者です.主に ARKit / RealityKit を使ったアプリを開発しています.

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?