SwiftUI上にARKitコンテンツを表示

SwiftUIのビュー上に、MapKitのような従来からのUIViewサブクラスを配置する場合は、UIViewRepresentableを使えば良いと、Apple Developer Documentationでも解説されています。

ARを表示させるためのARSCNViewもUIViewのサブクラスなので、同じ実装で実現できました。 なお、AppleのARではお馴染みの飛行機モデルを3行で表示させている記述部分は、実践ARKit | 本 | iOS | Swift - shu223 - BOOTHの冒頭で解説されています。

import SwiftUI
import ARKit

// 何箇所かあるARViewというのは私が命名した任意の名前です
struct ARView: UIViewRepresentable {
    typealias UIViewType = ARSCNView
    
    func makeUIView(context: Context) -> ARSCNView {
        return ARSCNView(frame: .zero)
    }
    func updateUIView(_ uiView: ARSCNView, context: Context) {
        
        uiView.scene = SCNScene(named: "art.scnassets/ship.scn")!

        let configuration = ARWorldTrackingConfiguration()
        
        uiView.session.run(configuration)
    }    
}

struct ARView_Preview: PreviewProvider {
    static var previews: some View {
        ARView()
    }
}

このAR SCNViewを表示させたいSwiftUIビュー側は、例えば

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            ARView()
                .frame(height: 500)
            Text("Hello ARKit")
                .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

みたいな感じで配置表示できました。 両方のファイルにプレビュー用のコードを書いており、Mac上でそれぞれキャンバスプレビューもできました。ただしビデオは表示されるわけではなく、白い背景に飛行機のモデルが正面向きにレイアウトされているプレビューになります。

なぜこんなことをするかというと、ARKitと、画面遷移やレイアウトやマルチプラットフォームが簡単に実現できるSwiftUIとを組み合わせることができれば、スピーディーなARコンテンツ開発手法として実用的なのではと思うのです。