Create Spatial Photo with ImagePresentationComponent

https://visionos-engineer.connpass.com/event/368679/ で発表した`ImagePresentationComponent`に関する資料です

サンプルコード: https://github.com/Shoryu-Y/ImagePresentationComponentExample
資料中の動画(そのうち消します): https://drive.google.com/file/d/14dLwAA3rkDw-TMsETTQWZOSvC9OKDWex/view?usp=drive_link

Transcript

1. Presented by 辰べえ 2025.09.24 Presented by 辰べえ visionOS 26と ImagePresentationComponentで 空間写真を楽しむ！
2. 自己紹介 • 23新卒 • 福岡生まれ 福岡育ち 東京在住 • 最近やっていること ◦ お絵描き ◦ テニス ◦ iOS 辰べえ iOSエンジニア 辰べえ iOSエンジニア 2
3. 空間写真/ビデオっていいよね！ 3
4. 空間写真 アプリ内で画像を表示する方法 • 今まで ◦ Image (SwiftUI) ◦ Entity + Texture (RealityKit) ◦ etc.. • visionOS 26+ ◦ Entity + ImagePresentationComponent (RealityKit) 4
5. ImagePresentationComponent 画像を表示するRealityKitのComponent 表示できる画像 • 従来の 2D 画像 • 5
6. ImagePresentationComponent 画像を表示するRealityKitのComponent 表示できる画像 • 従来の 2D 画像 • iPhone 15 Pro 以降および Apple Vision Pro で撮影された、空間メタデータ が追加された立体写真 • 6
7. ImagePresentationComponent 画像を表示するRealityKitのComponent 表示できる画像 • 従来の 2D 画像 • iPhone 15 Pro 以降および Apple Vision Pro で撮影された、空間メタデータ が追加された立体写真 • 既存の 2D 画像または写真から生成された 3D 画像 7
8. ImagePresentationComponent 画像を表示するRealityKitのComponent 表示できる画像 • 従来の 2D 画像 • iPhone 15 Pro 以降および Apple Vision Pro で撮影された、空間メタデータ が追加された立体写真 • 既存の 2D 画像または写真から生成された 3D 画像 8 ↑これを今回メインで話します
11. ImagePresentationComponent visionOS 2までは • 開発者のアプリで空間写真を表示することはできなかった(たぶん) • 写真アプリで ◦ 空間写真を表示できる ◦ 2D画像を空間写真に変換できる visionOS 26では • 開発者のアプリの中で空間写真の表示・空間写真への変換ができる！ 11
12. ImagePresentationComponen t を使って 空間写真表示を実装する 12
13. 空間写真表示を実装 13 RealityView { content in // ... } update: { content in content.add( Entity(components: [imagePresentationComponent]) ) } 使い方は他のRealityViewと一緒！
14. 空間写真表示を実装 14 ImagePresentationComponentには3つのイニシャライザがある • ImagePresentationComponent(contentsOf: URL) • ImagePresentationComponent(imageSource: CGImageSource) • ImagePresentationComponent( spatial3DImage: ImagePresentationComponent.Spatial3DImage )
15. 空間写真表示を実装 15 ImagePresentationComponentには3つのイニシャライザがある • ImagePresentationComponent(contentsOf: URL) • ImagePresentationComponent(imageSource: CGImageSource) • ImagePresentationComponent( spatial3DImage: ImagePresentationComponent.Spatial3DImage ) 従来の2D画像を3Dにしたい場合には ImagePresentationComponent(spatial3DImage:)
16. 空間写真表示を実装 16 func makeImagePresentationComponent() async throws-> ImagePresentationComponent { // 画像ファイルが存在するローカルの URLを指定 let imageFileURL: URL = // ... let spatial3DImage = try await ImagePresentationComponent.Spatial3DImage(contentsOf: imageFileURL) try await spatial3DImage.generate() return ImagePresentationComponent(spatial3DImage: spatial3DImage) }
17. 空間写真表示を実装 17 func makeImagePresentationComponent() async throws-> ImagePresentationComponent { let imageFileURL: URL = // … // URLを指定して、ImagePresentationComponentに表示する画像のオブジェクトを作成 let spatial3DImage = try await ImagePresentationComponent.Spatial3DImage(contentsOf: imageFileURL) try await spatial3DImage.generate() return ImagePresentationComponent(spatial3DImage: spatial3DImage) }
18. 空間写真表示を実装 18 func makeImagePresentationComponent() async throws-> ImagePresentationComponent { let imageFileURL: URL = // … let spatial3DImage = try await ImagePresentationComponent.Spatial3DImage(contentsOf: imageFileURL) // 2Dから3Dへと変換！ try await spatial3DImage.generate() return ImagePresentationComponent(spatial3DImage: spatial3DImage) }
19. 空間写真表示を実装 19 func makeImagePresentationComponent() async throws-> ImagePresentationComponent { let imageFileURL: URL = // … let spatial3DImage = try await ImagePresentationComponent.Spatial3DImage(contentsOf: imageFileURL) try await spatial3DImage.generate() var component = ImagePresentationComponent(spatial3DImage: spatial3DImage) // 表示したいモードを設定(デフォルト値は.mono) component.desiredViewingMode = .spatial3D return component }
20. 空間写真表示を実装 20 RealityView { content in // ... } update: { content in content.add( Entity(components: [imagePresentationComponent]) ) }
22. まとめ 22
23. まとめ • visionOS 2までは写真アプリでしか楽しめなかった空間写真の表示が visionOS 26からは自身のアプリ上で表示できるようになったよ！ • 使い方は今まで使っているRealityViewと一緒！ • 空間写真を楽しもう！ 23
24. 雑談 • iOS 26のロック画面で使えるようになった空間シーンも同じ仕組みだよね • 24
25. 雑談 • iOS 26のロック画面で使えるようになった空間シーンも同じ仕組みだよね • 25
26. ご清聴ありがとうございました！ 26