Setup a 3D Chessboard With SwiftUI and RealityKit

Using SwiftUI, RealityKit, ARKit, and Multipeer frameworks

I have spent the better part of this year [2022] exploring SceneKit. A journey I have documented with almost two dozen articles on the subject you’ll find here on medium. Having covered most of the elements within SceneKit, I decided to move over to RealityKit/ARKit in 2023.

Although I wasn’t sure where to start, I watched the latest presentations in WWDC2022 on ARKit and then RealityKit and well — it didn’t help. I looked up which came first, followed by the earliest WWDC I could.

I watched this one, “Building Apps with RealityKit”, from WWDC2019. It was a eureka moment, well, almost. I couldn’t help but reflect on the similarities between SceneKit and RealityKit. RealityKit is SceneKit. They may have developed it from the ground up with multiprocessing in mind, but the primitives, in many cases, look almost identical. They wanted to make the transition from one to the other as smooth as possible. And indeed, it seems that if you can even create a RealityKit-based app without the camera — an app that ends up looking like you did it on SceneKit. ARKit appears to be an integral part of RealityKit, so they are like yin and yang; one only makes sense with the other.

Having watched the presentation, I decided to rebuild the chess game I described in this paper using RealityKit/ARKit focusing on the first two sections. Building a prototype and tidying it up with the game state.

Prototype

UIRepresentable

Bon — so it is almost 2023, and there is no turning back the clock and using UIKit for me; the build plan would be the same as the one described in that WWDC2019 presentation — with a few minor changes and updates.
I copied the code behind my last SceneKit article and used it as a basis for the build. My UIRepresentable was as simple as you could imagine, just ten lines or so.

struct CustomARView: UIViewRepresentable {
    typealias UIViewType = ARView
    
    var view:ARView
    var options: [Any] = []
    
    func makeUIView(context: Context) -> ARView {
        view.session.delegate = context.coordinator
        return view…