Can't preview SwiftUI Canvas with RealityKit scene

Question

I only create a new property of RealityKit. Xcode won't be able to preview the SwiftUI canvas. But it can build successfully.

I create the App by Xcode.
Choose Augmented Reality App and set User Interface to SwiftUI.
The project can work normally.

import SwiftUI
import RealityKit

struct ContentView : View {
    var body: some View {
        return VStack {
            Text("123")
            ARViewContainer().edgesIgnoringSafeArea(.all)
        }
    }
}

struct ARViewContainer: UIViewRepresentable {

    func makeUIView(context: Context) -> ARView {

        let arView = ARView(frame: .zero)

        // Load the "Box" scene from the "Experience" Reality File
        let boxAnchor = try! Experience.loadBox()

        // Add the box anchor to the scene
        arView.scene.anchors.append(boxAnchor)

        return arView

    }

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

}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

I only create a new property of RealityKit in makeUIView function.

let test: AnchoringComponent.Target.Alignment = .horizontal

The project cannot preview canvas and appear the error

'Alignment' is not a member type of 'AnchoringComponent.Target'

The project still can compile successful.

I am so confused what I met. Has anyone meet the same issue?

My guess is that RealityKit is not available on the canvas because it's too heavy, so it can't be imported, that's why you see that error. Also, don't put your code as images, paste it as text, that way it can be copied and searched. — EmilioPelaez
But if I create a new property at another files, it cannot build successful too. okay! I will change code to text. thanks — Jerry Lee
If I don't add the property, It will can preview, although it only show the white canvas, but I can make other layout on this SwiftUI file. — Jerry Lee

Andy Jazz Andy Jazz · Accepted Answer · 2019-11-01T22:00:10

You have to fix several issues:

You can't use anchoring component in iOS Simulator or in SwiftUI Canvas Preview, because it can only be used for pinning a virtual content to the real world surfaces. So no simulator for AR apps.

RealityKit Anchors are useless in iOS Simulator mode and SwiftUI Canvas Preview mode.

// Use it only for compiled AR app, not simulated...

let _: AnchoringComponent.Target.Alignment = .horizontal

Not only anchors are useless in iOS Simulator Mode and SwiftUI Preview Mode but also other session-oriented properties (including ARView.session) like ones you can see on a picture:

Change .backgroundColor in ARView to any other desirable one. Default color sometimes doesn't allow you to see a RealityKit scene. Looks like a bug.

func makeUIView(context: Context) -> ARView {

    let arView = ARView(frame: .zero)
    let boxAnchor = try! Experience.loadBox()
    boxAnchor.steelBox?.scale = SIMD3(5, 5, 5)
    boxAnchor.steelBox?.orientation = simd_quatf(angle: Float.pi/4, axis: SIMD3(1,1,0))

    arView.backgroundColor = .orange

    arView.scene.anchors.append(boxAnchor)
    return arView
}

And here's what you can see in SwiftUI Preview Area now:

And, of course, you have to give a Camera Permission before using AR app. And it doesn't matter what you're using: Storyboard or SwiftUI.

You need to add Camera Usage Description property and arkit string in info.plist file:

XML version looks like this:

/*  info.plist


<key>NSCameraUsageDescription</key>
    <string>Camera access for AR experience</string>

<key>UIRequiredDeviceCapabilities</key>
<array>
    <string>armv7</string>
    <string>arkit</string>
</array>

*/

After fixing these issues app compiles and works as expected (without any errors):

Can't preview SwiftUI Canvas with RealityKit scene

1 Answers