Add 360° Images to your Vision Pro App

In this article, I will explain how you can add a 360° EnvironmentView to your Vision Pro app. This article will help you understand the behavior of entities , textures, materials and meshes.

First, we need to create an ImmersiveSpace. In this example, I am using the ImmersionStyle .full, which displays it in a full space. Alternatively, you can use the ImmersionStyle .mixed, allowing the user to adjust the immersive experience with the help of the digital crown.

import SwiftUI

@main
struct EnvironmentApp: App {
 //Select immersionStyle
 @State private var immersionStyle: ImmersionStyle = .full //For example you also can use .mixed for a mixed ImmersionStyle
 var body: some Scene {
 WindowGroup {
 //Starting Window to control entry in the ImmersiveSpace
 	ContentView()
 }
 ImmersiveSpace(id: "Environment") {
 //struct with the RealityView
 	EnvironmentRV()
 }.immersionStyle(selection: $immersionStyle, in: .full)

 }
}

Afterward, you need to open the Immersive Space. In this approach, we open the Immersive Space using a Button in the ContentView. If you prefer not to have a window, you can also launch the Immersive Space at app start. You just need to add some attributes to the info.plist. For more info about that, please read this documentation here. But now you can look at the example of the launching window.

struct ContentView: View {

    //Environment Propery Wrapper for open a ImmersiveSpace
    @Environment(\.openImmersiveSpace) private var openImmersiveSpace

    //Environment Propery Wrapper for closing a ImmersiveSpace
    @Environment(\.dismissImmersiveSpace) private var dismissImmersiveSpace

    //Boolean to check if ImmersiveSpace is active 
    @State private var immersiveSpaceActive: Bool = false
    var body: some View {
        //Button to control the immersiveSpace appearance
        Button(immersiveSpaceActive ? "Exit Environment" : "View Environment") {
            Task {
                if !immersiveSpaceActive {
                    let result = await openImmersiveSpace(id: "Environment")
                    immersiveSpaceActive = true
                } else {
                    await dismissImmersiveSpace()
                    immersiveSpaceActive = false
                }
            }
        }
    }
}

So, after completing all of that, you can create the RealityView. In this approach, you load the image using TextureResource.load. For this example, the image needs to be in “Assets.xcassets”. Alternatively, you can use a CGImage for a texture. Instead of using TextureResource.load, you should use TextureResource.generate(…). For more information about TextureResources, you can refer to the documentation here.import SwiftUI
import RealityKit

struct EnvironmentRV: View {
 var body: some View {
 RealityView() { content in

 //load texture from xcassets
 guard let texture = try? TextureResource.load(named: "PanoramaSki") else {fatalError("Texture not loaded!")}
 //create a entity
 let rootEntity = Entity()

 //create material for the texture 
 var material = UnlitMaterial() //Material without influence of lightning

 // add the texture (image) to the material
 material.color = .init(texture: .init(texture))
 
 //generate a sphere make it big so it fills out your whole vision in this example it has the size 1E3 (1* 10^3)
 //add the material to the entity
 rootEntity.components.set(ModelComponent(mesh: .generateSphere(radius: 1E3), materials: [material]))

 //adjust the properties of the entity size,angle, ...
 rootEntity.scale = .init(x: 1, y: 1, z: -1)
 rootEntity.transform.translation += SIMD3<Float>(0.0, 10.0, 0.0)
 let angle = Angle.degrees(90)
 let rotation = simd_quatf(angle: Float(angle.radians), axis: SIMD3<Float>(0, 1, 0))
 rootEntity.transform.rotation = rotation


 //Add entity to RealityView
 content.add(rootEntity)

 } update: { content in
 //Here you can update the RealityKit content
 }


 }
}

This was a brief and straightforward method for creating a fully immersive environment on the Vision OS platform. Please note that this tutorial is only a simple introduction and guide. There are so many more possibilities what you can do with the vision OS sdk.

Thank you for reading :)