WWDC25：Meet SwiftUI spatial layout

SwiftUI による 3D レイアウトについて。

---

0:00 – Introduction

• visionOS 26 で SwiftUI の新しい Spatial Layout 機能について紹介
• 既存の 2D レイアウトツールとアイデアを使って 3D アプリケーションを構築可能
• アニメーション、リサイズ、状態管理の組み込みサポートを活用

2:47 – 3D views

• visionOS では全ての View が 3D になり、width, height に加えて depth, Z position も計算される
• カスタムの debugBorder3D modifier を用いて解説
• Model3D は Image と同様に固定の width, height, depth を持つ
• Image, Color, Text などは depth が 0 で iOS と同様の動作
• RealityView や GeometryReader3D は利用可能な depth を全て使用
  • 従来の SwiftUI と同じレイアウトシステム
• scaledToFit3D モディファイアでアスペクト比を維持しながら 3D 空間にフィット可能
  • Window では width-height のアスペクト比はユーザー操作によって代わるが、奥行きの提案はウインドウで固定されている
  • Volume は深さもサイズ変更可能
• ZStack の挙動

7:18 – Depth alignments

• visionOS 26 で DepthAlignments が追加され、既存の Layout タイプを 3D View に適応
  • VStackLayout などで depthAlignment モディファイアを適用して深度方向の配置を制御 (e.g. VStackLayout().depthAlignment(.center)  {…)
  • front, center, back の標準的な depth alignment を提供
• Custom Depth Alignment で DepthAlignmentID プロトコルに準拠した独自の配置を定義可能
  • e.g. .alignmentGuide(.customAlignment) { $0[DepthAlignment.center] }

11:41 – Rotation layout

• rotation3DLayout モディファイアで View の回転をレイアウトシステムに反映
  • 従来の rotation3DEffect は視覚効果のみでレイアウトには影響しなかったが、rotation3DLayout はレイアウトも変更
• 任意の角度と軸での回転をサポート
• 例：カスタム実装の RadialLayout と組み合わせて 3D カルーセルを構築可能
• 複数の rotation3DEffect を組み合わせて複雑な 3D 配置を実現

16:28 – Spatial containers

• SpatialContainer で複数の View を同じ 3D 空間に配置（入れ子人形方式）
• 3D alignment（bottomFront, topTrailingBack など）で配置を制御
• 選択状態の表示や UI 要素の重ね合わせに活用
• spatialOverlay で単一の View を別の View と同じ 3D 空間に重ねる
• debugBorder3D modifier の実装方法
  • spatialOverlay で実装