visionOS: An Introduction

Carry on with the build from lesson 3, part 1.

Add a fun orbital flight to the scene. If you recall, the sphere is at (0,0,0), so the scene will rotate around the origin, and the plane will appear to fly in a circle. Add the code below the animations. For the axis calculation, enter x as 0.1, y as 1.0 and z as 0.0. Later, you can experiment with other values to tumble the plane.

let orbit = OrbitAnimation(duration: 20.0,
axis: SIMD3<Float>(x: 0.1, y: 1.0, z: 0.0),
startTransform: scene.transform,
spinClockwise: false,
orientToPath: true,
rotationCount: 1.0,
bindTarget: .transform,
repeatMode: .repeat)

if let animation = try? AnimationResource.generate(with: orbit) {
  scene.playAnimation(animation)
}

Another tip: To format the code, select the text. Then press Control-I on your keyboard.

Build and run, then open the ImmersiveScene to see the plane fly.

Planes actually tilt or bank when they turn. Add a tilt to the scene entity above the orbit to make the flight seem more realistic. You can experiment with the x,y,z values to make the plane tumble here as well.

scene.orientation = simd_quatf(angle: Float.pi/4, axis: [-0.5, 0.0, 0.0])

The dark environment isn’t very exciting, so you’ll add a panoramic image to a sphere around the biplane and inside or encompassing the user’s point of view.

In the Resources folder, find the skyView.png and drag it into the Assets.xcassets. Drag the image into the 2x box.

Create a new SwiftUI view called SkyView.swift and import RealityKit. Add a RealityView and load the png as a TextureResource. Create a sphere with a width of 1000 and paint or map the texture on the inside.

Note: Objects, materials and sounds in the scene are Entities.

RealityView { content in
    guard let resource = try? await TextureResource(named: "skyView") else {
      return
    }
    var material = UnlitMaterial()
    material.color = .init(texture: .init(resource))

    let entity = Entity()
    entity.components.set(ModelComponent(mesh: .generateSphere(radius: 1000), materials: [material]
    ))
    // point the texture inwards
    entity.scale *= .init(x: -1, y: 1, z: 1)

    content.add(entity)
}

Now add the SkyView() to the top of the ImmersiveView, above the RealityView that holds the Biplane.

Note: If you want to create your own panorama, you can create or use a wrapping panoramic image with the horizon at the midpoint and no wider than 8000 pixels.

Build and run, then open the ImmersiveScene to see the plane fly. Try the Orbit tool to see the texture surrounding the scene.

The plane is a bit dark now. Apply some reflective light with a skybox.

In Xcode, create a Group called Resources. In the downloaded Resources folder find a folder called sunlight.skybox, which contains another png. Drag the skybox folder onto the Resources folder in Xcode’s Project Navigator. It’ll appear as a blue folder or folder reference.

Now add the skybox as a resource in the RealityView’s make: closure. You can experiment with different intensities.

guard let resource = try? await EnvironmentResource(named: "Sunlight") else { return }
let iblComponent = ImageBasedLightComponent(source: .single(resource), intensityExponent: 2.0)
scene.components.set(iblComponent)
scene.components.set(ImageBasedLightReceiverComponent(imageBasedLight: scene))

Build and run, then open the ImmersiveScene to see the the plane fly.

Add a visionOS-style app icon to wrap up the app.

Find the icon images in the downloaded Resources folder under app-icon. Drag them into the Asset catalog.

Open the AppIcon by clicking on the disclosure triangle. Drag the symbol-orange-256@2x.png into the Front folder. Drag the lt-grey-square-512@2x.png in the Back folder.

You can hover over the combined icon at the top of the AppIcon pane. If you don’t see the combined icon, close and reopen the asset catalog. If the icon appears with purple stripes, this indicates that RealityKit doesn’t recognize that a material is applied.

Build and run, and you’ll see the new icon. After the app launches, you can close it with the button below the window. Then, you can hover over the icon on the Shared Space or Home view.

That’s all for your first visionOS app.