![見出し画像](https://assets.st-note.com/production/uploads/images/128245029/rectangle_large_type_2_54faee00a025a99b89b0830507a59a14.png?width=800)
Apple Vision Pro での3Dモデル表示を試す
「Apple Vision Pro」での3Dモデル表示を試したので、まとめました。
・Xcode 15.2 (Apple Silicon)
1. VisionOS
「visionOS」は、「Apple Vision Pro」のOSです。「空間コンピューティング」による没入型アプリやゲームを構築を可能にします。
![](https://assets.st-note.com/img/1705753199237-FDayO9ITio.png?width=800)
使い慣れた「Window」だけでなく、「Volume」や「Full Space」など、visionOS固有のSwiftUIが利用可能です。
・Window : アプリのコンテンツを表示する長方形領域。従来のビューやコントロールを表示可能。
・Volume : 3Dコンテンツを表示できる3D 空間。
・Full Space : 没入型でインタラクティブになるように設計されている3D空間。他のアプリは表示されない。
![](https://assets.st-note.com/img/1705753208975-nN4twm07Iq.png?width=800)
「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」を選択。
![](https://assets.st-note.com/img/1705754482854-1m3bEH84na.png?width=800)
(3) 「Initial Scene」に「Window」、「Immersive Space Render」に「RealityKit」、「Immersive Space」に「Mixed」を指定。
![](https://assets.st-note.com/img/1705755568422-kILtVbeZzD.png?width=800)
・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モデル、テキスト、トグルボタンが配置されています。
![](https://assets.st-note.com/img/1705756023685-eV9Cb9cp6i.png?width=800)
(5) 「Package.realitycomposerpro」をダブルクリックし、「Reality Composer」でシーンを確認。
球が2つ配置されていることがわかります。
![](https://assets.st-note.com/img/1705756520567-qQUug0nw3n.png?width=800)
(6) Xcodeに戻り、シミュレータ「Apple Vision Pro」を選択した状態で、実行ボタン (▶) を押す。
アプリが起動します。
(6) トグルボタンを押す。
球が2つ表示されます。
![](https://assets.st-note.com/img/1705756095930-kVF7HckSfW.png?width=800)
![](https://assets.st-note.com/img/1705756779503-61Rhg91VCM.png?width=800)
3. visionOSシミュレータの使い方
「visionOSシミュレータ」の使い方は、次のとおりです。
(1) 基本操作
「ホーム」から各種アプリを実行できます。コンテンツ操作 (ボタン押下など) するときは、「コンテンツ操作」を選択しておく必要があります。
![](https://assets.st-note.com/img/1705757387339-vU8wbyZV8e.png?width=800)
キーボードの「WSAD」で「前後左右」、「QE」で「上下」にカメラ移動します。
(2) ウィンドウを閉じる
ウィンドウ下端ツマミの左側にマウスカーソルを近づけると✗になるので、そこをクリックします。
![](https://assets.st-note.com/img/1705757670287-ON99mWDGE1.png?width=800)
4. 3Dモデルの表示
3Dモデルの表示手順は、次のとおりです。
(1) 3Dモデルの準備。
今回は、「Mixamo」でモデルとアニメーションを選択して、モデル (.fbx) をダウンロードしました。
![](https://assets.st-note.com/img/1705758103510-Qn2jfFFZuk.png?width=800)
(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」で保存。
![](https://assets.st-note.com/img/1705758519840-eAh3FZ1nhb.png?width=800)
![](https://assets.st-note.com/img/1705758532249-o1KBa3Eo1S.png?width=800)
(4) 「Package.realitycomposerpro」を「Reality Composer」で開き、「girl.usdz」を「Project Browser」にドラッグ&ドロップし、それを左上のRoot下にドラッグ&ドロップし、位置を調整。
再生ボタン (▶) でアニメーションの動作確認もできます。
![](https://assets.st-note.com/img/1705758804517-fXzOWysOB2.png?width=800)
(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」を選択した状態で、実行ボタン (▶) を押す。
visionOSのイマーシブスペースでの3Dモデル表示する練習 pic.twitter.com/rgeWmtdJyi
— 布留川英一 / Hidekazu Furukawa (@npaka123) January 20, 2024
関連
次回
この記事が気に入ったらサポートをしてみませんか?