こんにちは！金融ソリューション事業部WEB3グループの山下です。
本記事では、Apple Vision Pro上で、ModelEntityクラスで生成した3Dオブジェクトを空間に表示する実装例をご紹介します。
本記事は「SpatialComputing入門」シリーズのPart1となります。
以下3つのPartに分けて、visionOSの基礎的なアプリケーション実装方法を解説していきます。
- Part1：3Dオブジェクトを空間に配置する
- Part2：3DオブジェクトにGestureを追加する
- Part3：現実空間の平面に3Dオブジェクトを配置する
visionOSについて初の記事となりますので、初めてXcodeに触れる方でも実装できるよう丁寧に解説していきます。
動作環境
実装手順
- Xcodeプロジェクトの作成
- Xcodeの設定
- VisionProの設定
- VisionPro動作確認
- App.swiftの修正
- ContentView.swiftの修正
- VolumeView.swiftの作成
- VisionPro動作確認
1.Xcodeプロジェクトの作成
Xcodeプロジェクトを作成します。
Xcodeのインストールが未済の方は、公式サイトより事前にインストールを行ってください。また、開発にはAppleのDeveloperアカウントも必要になります。もしまだアカウントをお持ちでない方は公式サイトより登録を行ってください。
Xcode起動画面にて、「Create New Project...」を押下します。
テンプレートで「visionOS ＞ App」を選択します。
オプションを設定します。
visionOSの新規追加要素として、以下を設定しています。
- initial Scene: 「Window」
- Immersive Space Renderer：「None」
プロジェクト作成が完了すると、以下の画面が立ち上がります。
2.Xcodeの設定
上部メニューの Setting ＞ Platformを開いて、「visionOS」「visionOS Sumulator」がインストールされていることを確認します。もしまだであれば、右側の「Get」ボタンを押下してインストールします。
上部メニューの Window ＞ Devices and Simulatorsを開いて、VisionProを追加します。
VisionProがMacと同じネットワークに繋がれており、同じiCloudアカウントでログインされていれば表示されるので、「Pair」ボタンを押下します。
Xcode上部メニューから、Run Destinationとして「Apple VisionPro」を選択します。
3.VisionProの設定
VisionProで以下の設定を行います。
（基本的にiOSやiPadOSの実機テストと同様の手順になります）
Settingアプリを開き、Privacy & Security ＞ Developer ModeをONにします。
画像参考：Apple公式ドキュメント
General ＞ VPN & Device Managementから、「Developer名を信頼」をタップします。
画像参考：Apple公式ドキュメント
4.VisionPro動作確認
Xcodeで三角の再生ボタンを押下します。
ビルドが完了すると、VisionProで以下のアプリが立ち上がります。
5. App.swiftの修正
ModelEntityTestApp.swiftを、以下に書き換えます。
import SwiftUI
@main
struct ModelEntityTestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
WindowGroup(id: "volume") {
VolumeView()
}
.windowStyle(.volumetric)
.defaultSize(width: 0.5, height: 0.5, depth: 0.5, in: .meters)
}
}
概要は以下のとおりです。
- 一つ目のWindowGroupで、ContentViewを表示
- Sceneの最初に定義されるViewが、アプリ起動時に表示される画面となる
- デフォルトでは、VolumeではなくWindowとして扱われる
- 二つ目のWindowGroup(id: "volume")で、VolumeView()を定義
.windowStyle(.volumetric)で、Volume Sceneとして定義.defaultSize(width: 0.5, height: 0.5, depth: 0.5, in: .meters)で、Volumeのサイズを指定- idは、後で別画面から呼びだす際のIdentifierとなる
6. ContentView.swiftの修正
ContentView.swiftを、以下に書き換えます。
import SwiftUI import RealityKit import RealityKitContent struct ContentView: View { @Environment(\.openWindow) private var openWindow var body: some View { VStack { Text("Hello, world!") Button("Open Volume"){ openWindow(id: "volume") } } .padding() } } #Preview(windowStyle: .automatic) { ContentView() }
概要は以下のとおりです。
@Environment(\.openWindow)でWindowを開く為の環境変数を定義- VStackでTextとButtonを設置
- Button Actionで
openWindow(id: "volume")としてVolumeViewを定義
- Button Actionで
7. VolumeView.swiftの作成
XcodeのFile ＞ New ＞ File...から、新規Swiftファイルを作成します。
Swift Fileを選択します。ファイル名はVolumeView.Swiftとします。
VolumeView.swiftを、以下に書き換えます。
import SwiftUI import RealityKit import RealityKitContent struct VolumeView: View { var body: some View { RealityView { content in // Generate ModelEntity let model = ModelEntity( mesh: .generateSphere(radius: 0.1), materials: [SimpleMaterial(color: .lightGray, isMetallic: true)] ) // Add components model.components.set(InputTargetComponent()) model.components.set(CollisionComponent(shapes: [.generateSphere(radius: 0.1)])) // Add ModelEntity to RealityView content content.add(model) } } }
概要は以下のとおりです。
- RealityView内で、以下を定義
8.VisionPro動作確認
ビルドが完了すると、ContentViewが表示されます。
"Open Volume"ボタンを押下することで追加のVolume SceneでSphereが表示されます。
ちなみに今回紹介したコードではSphereを指定しましたが、RealityKitが提供している別の形状も指定可能です。
以下はConeを指定した結果です。
終わりに
今回はSpatialComputingの入門編として、VisionPro上に3Dコンテンツを表示する実装例をご紹介しました。
全く新しいインターフェースでありつつも、これまでiOSやiPadなどで使われてきたSwiftUIやRealityKitの仕組みの延長線上で実装が可能な為、開発者体験が非常に洗練されていることが分かります。
今回紹介したWindowやVolumeは、まだ"枠"が存在するSceneになります。
今後のテーマとしては、"枠"の存在しないFull Spaceや、空間認識が可能なARKitを活用したVisionProらしい没入体験についても知見を紹介していければ幸いです。
現在、電通総研はweb3領域のグループ横断組織を立ち上げ、web3およびメタバース領域のR&Dを行っております（カテゴリー「3DCG」の記事はこちら）。 もし本領域にご興味のある方や、一緒にチャレンジしていきたい方は、ぜひお気軽にご連絡ください！
私たちは一緒に働いてくれる仲間を募集しています！
参考文献
執筆：@yamashita.yuki、レビュー：@nagamatsu.yuji
（Shodoで執筆されました）
