見出し画像

Apple Vision Pro での3Dモデル表示を試す

npaka

「Apple Vision Pro」での3Dモデル表示を試したので、まとめました。

・Xcode 15.2 (Apple Silicon)


1. VisionOS

「visionOS」は、「Apple Vision Pro」のOSです。「空間コンピューティング」による没入型アプリやゲームを構築を可能にします。

使い慣れた「Window」だけでなく、「Volume」や「Full Space」など、visionOS固有のSwiftUIが利用可能です。

・Window : アプリのコンテンツを表示する長方形領域。従来のビューやコントロールを表示可能。
・Volume : 3Dコンテンツを表示できる3D 空間。
・Full Space : 没入型でインタラクティブになるように設計されている3D空間。他のアプリは表示されない。

「visonOS」の開発には、「Apple Silicon搭載Mac」が必要です。Xcodeに含まれる2つのフレーム「ARKit」「RealityKit」と1つのオーサリングツール「Reality Composer Pro 」によって、没入型エクスペリエンスを構築することができます。

・ARKit : カメラとモーションセンサーで現実世界を理解し、その上にデジタルコンテンツを重ねるためのデータを取得するフレームワーク。
・RealityKit : ARKitから提供されるデータを活用して、リアルタイムの3Dレンダリング、物理シミュレーションなどを行うフレームワーク。
・Reality Composer Pro : 没入型エクスペリエンスを構築するためのオーサリングツール。

2. デフォルトプロジェクトの実行

「Xcode」で「visionOS」のデフォルトプロジェクトを作成し、visionOSシミュレータで実行します。

(1) Xcodeの最新版をインストールして起動。

(2) 「Create New Project」で「visionOS」の「App」を選択。

(3) 「Initial Scene」に「Window」、「Immersive Space Render」に「RealityKit」、「Immersive Space」に「Mixed」を指定。

・Initial Scene : 初期シーン
　・Window
　・Volume
・Immersive Space Renderer : イマーシブスペースのレンダリング方法
　・None
　・RenderKit
　・Metal
・Immersive Space : イマーシブスペースの種別
　・Mixed : Full Spaceで他のアプリは非表示。周囲は現実空間。
　・Progressive : Full Spaceでコンテンツ周囲180度は没入空間。
　・Full Space : Full Spaceで周囲は没入空間。

(4) HelloWorldの確認。
ウィンドウには、3Dモデル、テキスト、トグルボタンが配置されています。

(5) 「Package.realitycomposerpro」をダブルクリックし、「Reality Composer」でシーンを確認。
球が2つ配置されていることがわかります。

(6) Xcodeに戻り、シミュレータ「Apple Vision Pro」を選択した状態で、実行ボタン (▶) を押す。
アプリが起動します。

(6) トグルボタンを押す。
球が2つ表示されます。

3. visionOSシミュレータの使い方

「visionOSシミュレータ」の使い方は、次のとおりです。

(1) 基本操作
「ホーム」から各種アプリを実行できます。コンテンツ操作 (ボタン押下など) するときは、「コンテンツ操作」を選択しておく必要があります。

キーボードの「WSAD」で「前後左右」、「QE」で「上下」にカメラ移動します。

(2) ウィンドウを閉じる
ウィンドウ下端ツマミの左側にマウスカーソルを近づけると✗になるので、そこをクリックします。

4. 3Dモデルの表示

3Dモデルの表示手順は、次のとおりです。

(1) 3Dモデルの準備。
今回は、「Mixamo」でモデルとアニメーションを選択して、モデル (.fbx) をダウンロードしました。

(2) 「Reality Converter」をダウンロードしてインストール。
「Reality Converter」は、以下のファイルを「.usdz」に変換します。

・USD (.usd , .usda , .usdc , .usdz)
・GLTF (.gltf , .glb)
・OBJ (.obj , .mtl)
・FBX (.fbx)

(3) 「Reality Converter」を起動して、モデル(.fbx)をドラッグ&ドロップして変換し、メニュー「ファイル→書き出す」で「girl.usdz」で保存。

(4) 「Package.realitycomposerpro」を「Reality Composer」で開き、「girl.usdz」を「Project Browser」にドラッグ&ドロップし、それを左上のRoot下にドラッグ&ドロップし、位置を調整。
再生ボタン (▶) でアニメーションの動作確認もできます。

(5) 「ImmersiveView.swift」にアニメーションを再生するコードを追加。

・ImmersiveView.swiftの一部

    :
struct ImmersiveView: View {
    var body: some View {
        RealityView { content in
            // Add the initial RealityKit content
            if let scene = try? await Entity(named: "Immersive", in: realityKitContentBundle) {
                content.add(scene)
                
                // アニメーションを再生
                if scene.availableAnimations.count > 0 {
                    scene.playAnimation(scene.availableAnimations[0].repeat())
                }
            }
        }
    }
}
    :

(6) Xcodeに戻り、シミュレータ「Apple Vision Pro」を選択した状態で、実行ボタン (▶) を押す。

関連

次回



この記事が気に入ったらサポートをしてみませんか？