SwiftUI × RealityKitの進化で変わる！空間体験開発のこれから

WWDC25 Recap - Japan-\(region).swiftでの発表資料です
https://japan-region-swift.connpass.com/event/353002/

Transcript

1. タイトル TAAT TAAT SwiftUI × RealityKitの 進化で変わる！空間体験 開発のこれから WWDC25 Recap - Japan-\(region).swift
2. タイトル 目次 1. 自己紹介 2. SwiftUIで3D Viewを表示 3. 空間レイアウト 4. SwiftUIとRealityKitの連携 5. まとめ
3. タイトル TAAT TAAT626 taatn0te Software Engineer at Cluster, Inc. iOS, visionOS, Unity Metaverse, Spatial Computing
4. タイトル My Apps Space Time Attack 去年リリースしたハンドトラッキン グを使った空間ゲーム どこキャン Apple Vision Pro Hackathonで作ったバーチャ ルキャンプアプリ Spatial Monster Magic VisionDevCamp Tokyoで 作ったモンスターバトルゲーム Released today! 🎉 Coming soon…
5. タイトル visionOSでの2D / 3D体験 visionOSではSwiftUI × RealityKitで2D・3D体験作れるが、visionOS 26 でSwiftUIに新APIが追加され、 RealityKitとの連携も強化されて、さらに空 間体験を作りやすくなった！ Window Volume Immersive Space
6. タイトル 関連セッション https://youtu.be/VtenPKrvPOU?si=jJguhLMWeOFVgG-P https://youtu.be/hmWUjEORePM?si=TKfxWaV2HS4Lp0XC
7. タイトル 目次 1. 自己紹介 2. SwiftUIで3D Viewを表示 3. 空間レイアウト 4. SwiftUIとRealityKitの連携 5. まとめ
8. タイトル SwiftUIで3D Viewを表示 visionOSでは、SwiftUIはwidth, height以外に も、depthやz positionを計算している WindowにViewを配置すると、デフォルトでは depth 0で2Dと同じように見えるが、 frame(depth:alignment)を使えば、Viewを空間 的に配置できる
9. タイトル SwiftUIで3D Viewを表示 HStack(spacing: 40) { RoundedRectangle(cornerRadius: 8) .fill(Color.red) .frame(width: 200, height: 300) // depth 0 by default .debugBorder3D(.white) // Custom 3D border extension RoundedRectangle(cornerRadius: 8) .fill(Color.blue) .frame(width: 200, height: 300) .frame(depth: 200) .debugBorder3D(.white) RoundedRectangle(cornerRadius: 8) .fill(Color.green) .frame(width: 200, height: 300) .frame(depth: 200, alignment: .front) // front-aligned .debugBorder3D(.white) }
10. タイトル SwiftUIで3D Viewを表示 2Dと同様に利用可能な領域いっぱいに広がるView もある RealityView { content in let entity = ModelEntity( mesh: .generateSphere(radius: 0.1), materials: [SimpleMaterial(color: .red, isMetallic: false)] ) content.add(entity) } .debugBorder3D(.white) GeometryReader3D { proxy in Text("GeometryReader3D") .frame(width: proxy.size.width, height: proxy.size.height) .frame(depth: proxy.size.depth) } .debugBorder3D(.white)
11. タイトル SwiftUIで3D Viewを表示 SwiftUIでは親Viewが子Viewに対してサイズを提 案するが、WindowやVolumeはリサイズ可能で、 提案されるroot width, heightも変わる 一方、depthはWindowでは固定値、 Volumeで は可変値として提案される
12. タイトル SwiftUIで3D Viewを表示 ZStack Model3D + Model3D ZStack RealityView + Model3D HStack Model3D + Model3D
13. タイトル 目次 1. 自己紹介 2. SwiftUIで3D Viewを表示 3. 空間レイアウト 4. SwiftUIとRealityKitの連携 5. まとめ
14. タイトル visionOS 26から、任意のLayoutに対してdepth alignmentを指定できる ように Depth Alignment VStackLayout().depthAlignment(.front) { Model3D(...) { model in ... } .scaledToFit3D() .debugBorder3D(.white) Text("Toy Robot") .padding() .font(.largeTitle) .glassBackgroundEffect() }
15. タイトル Depth Alignment depthAlignment(.front) depthAlignment(.center) depthAlignment(.back)
16. タイトル DepthAlignmentIDに準拠したcustom alignmentを 定義すれば、alignmentGuideを使ってもっと複雑なレ イアウトができる Depth Alignment HStackLayout(spacing: 40).depthAlignment(.depthPodium) { ToyView().alignmentGuide(.depthPodium) { $0[DepthAlignment.front] } ToyView().alignmentGuide(.depthPodium) { $0[DepthAlignment.back] } ToyView().alignmentGuide(.depthPodium) { $0[DepthAlignment.center]} } struct DepthPodiumAlignment: DepthAlignmentID { static func defaultValue(in context: ViewDimensions3D) -> CGFloat { context[.front] } } extension DepthAlignment { static let depthPodium = DepthAlignment(DepthPodiumAlignment.self) }
17. タイトル rotation3DEffectでViewを空間内で回転できる が、あくまでvisual effectなのでレイアウトには影響 しない 新しいrotation3DLayout modifierは回転後の Viewに合わせてframeも調整してくれる Rotation Layout
18. タイトル iOSでもお馴染みだが、SwiftUIのLayoutプロトコ ルに準拠したRadial Layoutを定義すれば、要素を 円形に配置できる Layoutとrotation3DLayoutと組み合わせれ ば、空間レイアウトへと拡張できる！ Radial Layout
19. タイトル Radial Layoutで要素を並べただけでは、垂直方向 の円形レイアウトになる Radial Layout RadialLayout { ForEach(items, id: \.self) { item in ToyRobotView() } }
20. タイトル Radial Layoutにrotation3DLayoutを付与して、 x軸まわりに90°回転させれば、水平方向のレイアウ トになる Radial Layout RadialLayout { ForEach(items, id: \.self) { item in ToyRobotView() } } .rotation3DLayout(Rotation3D(angle: .degrees(90), axis: .x))
21. タイトル さらに、Layoutの回転を打ち消すように、各要素をx 軸まわりで-90°回転させれば、水平方向に要素を 円形で配置できる Radial Layout RadialLayout { ForEach(items, id: \.self) { item in ToyRobotView() .rotation3DLayout(Rotation3D(angle: .degrees(-90), axis: .x)) } } .rotation3DLayout(Rotation3D(angle: .degrees(90), axis: .x))
22. タイトル DragGestureを追加して、ドラッグの変化量に応じ てRadila Layoutの回転を更新すれば、空間カルー セルができる Radial Layout RadialLayout(angleOffset: angleOffset) { ForEach(items, id: \.self) { item in ToyRobotView() .rotation3DLayout(Rotation3D(angle: .degrees(-90), axis: .x)) } } .rotation3DLayout(Rotation3D(angle: .degrees(90), axis: .x)) .gesture( DragGesture() .onChanged { value in　/* angleOffsetを更新 */　} .onEnded{ value in snapCarousel() } )
23. タイトル SpatialContainer, spatialOverlayを使えば、同 じ空間にViewを重ねて配置することができる Spatial container, spatial overlay SpatialContainer(alignment: .bottomFront) { ToyRobotView() ToyCarView() } ToyCarView() .spatialOverlay(alignment: .center) { ToyRobotView() }
24. タイトル 目次 1. 自己紹介 2. SwiftUIで3D Viewを表示 3. 空間レイアウト 4. SwiftUIとRealityKitの連携 5. まとめ
25. タイトル RealityViewは利用可能な領域に広がるが、 realityViewLayoutBehavior(.fixedSize)を使え ば、中のコンテンツをラップできる RealityView Layout RealityView { content in if let robot = try? await Entity( ... ) { content.add(robot) } } .realityViewLayoutBehavior(.fixedSize)
26. タイトル RealityView Layout .realityViewLayoutBehavior (.flexible) .realityViewLayoutBehavior (.centered) .realityViewLayoutBehavior (.fixedSize)
27. タイトル visionOS 26でEntityをピックアップして操作（移 動・回転・拡大縮小）できる APIが追加された • SwiftUI: manipulable modifier • RealityKit: ManipulationComponent Object manipulation
28. タイトル Object manipulation // SwiftUI Model3D(url: url) .manipulable(operations: [ .translate, .primaryRotation, .secondaryRotation, .scale, ]) // RealityKit RealityView { content in if let robot = try? await Entity(named: "Toy_Robot", in: realityKitContentBundle) { ManipulationComponent.configureEntity( robot, hoverEffect: .spotlight(.init(color: .red)), allowedInputTypes: .all, collisionShapes: [.generateBox(size: .init(0.5, 0.5, 0.5))] ) content.add(robot) } } .realityViewLayoutBehavior(.centered) ManipulationComponent CollisionComponent InputTargetComponent HoverEffectComponent を自動で追加してくれる
29. タイトル Object manipulation RealityView { content in if let robot = try? await Entity(named: "Toy_Robot", in: realityKitContentBundle) { ManipulationComponent.configureEntity(...) content.add(robot) willBegin = content.subscribe(to: ManipulationEvents.WillBegin.self) { event in print("WillBegin: \(event)") } } } .realityViewLayoutBehavior(.centered) public enum ManipulationEvents { public struct WillBegin: Event { } public struct DidUpdateTransform: Event { } public struct WillRelease: Event { } public struct WillEnd: Event { } public struct DidHandoff: Event { } } ManipulationEventsを購読して、操作時にサウンドを再生するなどができる
30. タイトル visionOS 26でRealityKit entityでSwiftUIのい くつかの機能が使えるように ViewAttachmentComponent EntityにSwiftUI.Viewをアタッチして表示できる PresentationComponent EntityからSwiftUI.Viewをモーダル表示できる GestureComponent SwiftUI.GestureをEntityに追加してジェスチャーをハンドリング できる SwiftUI components
31. タイトル RealityView { content in guard let robot = try? await Entity(...) else { return } let attachment = ViewAttachmentComponent(rootView: NameSignView()) let nameSign = Entity(components: attachment) robot.addChild(nameSign) let presentation = PresentationComponent( isPresented: $isPresented, configuration: .popover(arrowEdge: .top), content: DescriptionView() ) robot.components.set(presentation) robot.components.set(CollisionComponent(shapes: [...])) robot.components.set(InputTargetComponent()) robot.components.set(GestureComponent( TapGesture().onEnded { isPresented.toggle() }) ) content.add(robot) } SwiftUI components
32. タイトル @State private var nameSign: Entity? RealityView { content, attachments in guard let robot = try? await Entity(...) else { return } if let nameSign = attachments.entity(for: "NameSign") { robot.addChild(nameSign) self.namesign = nameSign } ... content.add(robot) } attachments: { Attachment(id: "NameSign") { NameSignView() } } .gesture( TapGesture().targetedToAnyEntity().onEnded { _ in nameSign?.isEnabled.toggle() } ) SwiftUI components @State private var isNameSignPresented: Bool = false RealityView { content in guard let robot = try? await Entity(...) else { return } let attachment = ViewAttachmentComponent(rootView: NameSignView()) let nameSign = Entity(components: attachment) robot.addChild(nameSign) let presentation = PresentationComponent(...) robot.components.set(presentation) ... robot.components.set(GestureComponent( TapGesture().onEnded { isNameSignPresented.toggle() }) ) content.add(robot) } visionOS 26 ~ visionOS 1 ~ 2
33. タイトル extension Entity { public var observable: Entity.Observable public struct Observable { public var name: String public var isEnabled: Bool public var children: Entity.ChildCollection public var transform: Transform public var position: SIMD3<Float> public var scale: SIMD3<Float> public var orientation: simd_quatf public var components: Components } } Observable entity visionOS 26でEntityはobservableになり、positionやorientationなどの プロパティの変化を監視できるように
34. タイトル Observable entity struct ImmersiveView: View { @State private var entity: Entity = .init() var body: some View { Minimap(position: entity.observable.position) RealityView { content in self.entity = ModelEntity(...) entity.components.set(OrbitComponent(...)) content.add(entity) } } } struct Minimap: View { var entity: Entity var body: some View { ZStack { Circle()... // Circle with dashed line Circle()... // Red circle .offset(x: CGFloat(position.x * 200), y: CGFloat(position.z * 200)) } } } Observable stateをView bodyで 参照すると、プロパティが変更された 時にView.bodyが再実行される
35. タイトル Unified coordinate conversion // Model3D in Window Model3D(named: "Toy_Robot") .onGeometryChange3D(for: Point3D.self, of: { proxy in if let robot = appModel.robot { try! proxy .coordinateSpace3D() // 現在の座標系の原点を相手の座標系での座標に変換 .convert(value: Point3D.zero, to: robot) } else { Point3D.zero } }, action: { _, newValue in // 上の差分ベクトルの長さが距離となる appModel.distance = newValue.magnitudeSquared }) .manipulable() // RealityView in Volume RealityView { content in ... }
36. タイトル 目次 1. 自己紹介 2. SwiftUIで3D Viewを表示 3. 空間レイアウト 4. SwiftUIとRealityKitの連携 5. まとめ
37. タイトル まとめ • visionOSではSwiftUIで3D Viewを表示でき 、これまで慣れ親しんだ仕組 みでレイアウトを構築できる • 2Dで培ったSwiftUIのノウハウを活かして、 空間レイアウトも構築できるよう になった！ • SwiftUIとRealityKitの連携が強化され、2Dと3Dをシームレスに統合した体 験をより作りやすくなった！ SwiftUI × RealityKitを使って、 空間体験の未来を作っていこう！
38. タイトル Thank you for listening!
39. タイトル 補足
40. タイトル debugBorder3D (1/3) extension View { func debugBorder3D(_ color: Color, width: CGFloat) -> some View { spatialOverlay { ZStack { Color.clear.border(color, width: width) Spacer() Color.clear.border(color, width: width) } } } }
41. タイトル debugBorder3D (2/3) extension View { func debugBorder3D(_ color: Color, width: CGFloat) -> some View { spatialOverlay { ZStack { Color.clear.border(color, width: width) Spacer() Color.clear.border(color, width: width) } .rotation3DLayout(.degrees(90), axis: .y) } } }
42. タイトル debugBorder3D (3/3) extension View { func debugBorder3D(_ color: Color, width: CGFloat) -> some View { spatialOverlay { ZStack { Color.clear.border(color, width: width) ZStack { Color.clear.border(color, width: width) Spacer() Color.clear.border(color, width: width) } .rotation3DLayout(.degrees(90), axis: .y) Color.clear.border(color, width: width) } } } }
43. タイトル 座標軸