2023/10/30
Apple Vision Pro Immersive Space : Progressive の作成方法(SwiftUI & RealityKit)
はじめに
Immersive Space : Progressive の作成方法をまとめました。
Apple Vision Pro について
Apple Vision Pro について、以下の記事にまとめてます。
プロジェクト作成
上の設定でプロジェクトを作成します。(Immersive Space: Progressiveにします。)
Assetに背景用のテクスチャを設定
Progressiveの背景に使用したい画像をAssetsにドラッグ&ドロップします。
App.swift
import SwiftUI
@main
struct ProgressiveSampleApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
ImmersiveSpace(id: "Progressive") {
ProgressiveView()
}.immersionStyle(selection: .constant(.progressive), in: .progressive)
}
}
App.swiftは上記のような修正を行います。
ContentView.swift
import SwiftUI
import RealityKit
import RealityKitContent
struct ContentView: View {
@State var showImmersiveSpace = false
@Environment(\.openImmersiveSpace) var openImmersiveSpace
@Environment(\.dismissImmersiveSpace) var dismissImmersiveSpace
var body: some View {
VStack {
Model3D(named: "Scene", bundle: realityKitContentBundle)
.padding(.bottom, 50)
Toggle("Show Progressive", isOn: $showImmersiveSpace)
.toggleStyle(.button)
.padding(.top, 50)
}
.onChange(of: showImmersiveSpace) { _, newValue in
Task {
if newValue {
await openImmersiveSpace(id: "Progressive")
} else {
await dismissImmersiveSpace()
}
}
}
}
}
#Preview {
ContentView()
}
ContentView.swiftは上記のような修正を行います。
ProgressiveView.swift
import SwiftUI
import RealityKit
struct ProgressiveView: View {
var body: some View {
RealityView { content in
let entity = Entity()
var material = UnlitMaterial()
guard let resource = try? TextureResource.load(named: "unityBG") else {
fatalError("Unable to load starfield texture.")
}
material.color = .init(texture: .init(resource))
entity.components.set(ModelComponent(
mesh: .generateSphere(radius: 1E3),
materials: [material]
))
entity.scale *= .init(x: -1, y: 1, z: 1)
entity.transform.translation += SIMD3<Float>(0.0, 1.0, 0.0)
content.add(entity)
}
}
}
#Preview {
ProgressiveView()
.previewLayout(.sizeThatFits)
}
RealityView内でProgressive用の背景用の球体Entityを生成し、RealityViewContentに球体Entityを追加します。
実行
はじめはShared Space上で表示しているWindowのトグルをタップすると現実と仮想が混在した状態になります。
まとめ
Progressiveを使うことで現実から徐々に仮想世界へ拡がるような表現も可能になります。
XR エンジニア
徳山 禎男
SIerとして金融や飲料系など様々な大規模プロジェクトに参画後、2020年にOnePlanetに入社。ARグラスを中心とした最先端のAR技術のR&Dや、法人顧客への技術提供を担当。過去にMagic Leap 公式アンバサダーを歴任。
View More