Apple Vision Pro Immersive Space : Progressive の作成方法(SwiftUI & RealityKit)  | 技術ブログ | 株式会社OnePlanet 読み込まれました

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

お問い合わせ・ご相談

ARでやってみたいことやお困りごとなど
お気軽にお問い合わせください。

お問い合わせ