Canvatorium Visio Lab 5012
Extending Lab 5011 with a skybox to show stars.
A fun thing I just found in visionOS. When showing a skybox in mixed immersive mode, it’s possible to “peak” outside of the scene into the room or your other windows.
This lab shows the rocket from the previous lab as well as a skybox drawn on the inside of sphere. The SpacePackStarfield is based on an example from Apple’s Hello World app. For this lab I also added a new lab type: **Full Immersive Space** in addition to the mixed mode version I already had.
I plan to do a few more labs with these space pack components.
struct Lab5012: View {
var body: some View {
ZStack {
SpacePackRocket()
SpacePackStarfield()
}
}
}struct SpacePackRocket: View {
@State var rocketEntity: Entity = Entity()
var body: some View {
RealityView { content, attachments in
// Add the initial RealityKit content
if let scene = try? await Entity(named: "RocketPower", in: realityKitContentBundle) {
content.add(scene)
rocketEntity = scene
}
}
update: { content, attachments in
if let attachmentEntity = attachments.entity(for: "Rocket") {
attachmentEntity.position = rocketEntity.position + [0, 0.5, 0]
rocketEntity.addChild(attachmentEntity, preservingWorldTransform: true)
}
} attachments: {
Attachment(id: "Rocket") {
Text("Rocket")
.background(.green)
.tag("Rocket")
}
}
}
}
// Based on an example from the Hello World app from Apple
struct SpacePackStarfield: View {
var body: some View {
RealityView { content in
// Create a material with a star field on it.
guard let resource = try? await TextureResource(named: "Starfield") else {
// If the asset isn't available, something is wrong with the app.
fatalError("Unable to load starfield texture.")
}
var material = UnlitMaterial()
material.color = .init(texture: .init(resource))
// Attach the material to a large sphere.
let entity = Entity()
entity.components.set(ModelComponent(
mesh: .generateSphere(radius: 1000),
materials: [material]
))
// Ensure the texture image points inward at the viewer.
entity.scale *= .init(x: -1, y: 1, z: 1)
content.add(entity)
}
}
}