Разбираемся, как использовать Volume для создания иммерсивного 3D-опыта в visionOS.
Контент в visionOS-приложениях может быть представлен в виде окон (Windows) или объемных фигур (Volumes), и каждый из этих способов имеет свои отличительные особенности. Как правило, в окнах отображается 2D- или 3D-контент, как, например, медиагалерея в Photos, а объемы идеально подходят для представления иммерсивных 3D-объектов и контента.
Volume (или “объем”) представляет 3D-контент, не занимающий все доступное пространство, который пользователи могут наблюдать в любом удобном для них ракурсе. Объемы служат контейнерами для иммерсивного опыта, позволяя исследовать реалистичные представления 3D-объектов.
Добавление Volume в проект
В этой статье я хочу продемонстрировать вам пару шагов, которые вам необходимо будет совершить в рамках разработки приложения для visionOS с использованием Volume. Мы создадим простое visionOS-приложение, состоящее из PrimaryWindowView, которое по нажатию кнопки открывает SecondaryVolumeView.
Наше путешествие начинается с создания нового проекта в visionOS. Убедитесь, что вы настроили все необходимые конфигурации и присвоили проекту соответствующее имя.
При настройке Immersive Space Renderer (рендерер иммерсивного пространства) выберите опцию None. Хотя Apple и предлагает шаблоны для всех возможных иммерсивных пространств, выбор опции None сейчас позволит нам разобраться в основных концепциях с нуля.
Мы будем использовать файл 3D-модели .usdz — единый, самодостаточный формат файла, который содержит всю необходимую информацию для отображения 3D-объекта или сцены без каких-либо внешних зависимостей.
Перенести файл в Xcode проще простого — нужно перетащить его в основную папку проекта. Не забудьте убедиться, что при появлении окна импорта в Xcode выбрана опция "copy item if needed" (копировать элемент при необходимости).
Для начала создадим новый файл SwiftUI под названием CubeView:
import SwiftUI import RealityKit struct CubeView: View { @State private var angle: Angle = .degrees(0) var body: some View { VStack(spacing: 18.0) { Model3D(named: "GlassCube") { model in switch model { case .empty: ProgressView() case .success(let resolvedModel3D): resolvedModel3D .scaleEffect(0.4) .rotation3DEffect(angle, axis: .x) .rotation3DEffect(angle, axis: .y) .animation(.linear(duration: 18).repeatForever(), value: angle) .onAppear { angle = .degrees(359) } case .failure(let error): Text(error.localizedDescription) @unknown default: EmptyView() } } } } } #Preview { CubeView() }
CubeView использует SwiftUI и RealityKit для создания представления, отображающего вращающийся 3D-куб. Он использует представление Model3D для загрузки 3D-модели с именем GlassCube. Этот куб будет непрерывно вращаться вокруг своих осей x и y.
Изначально превью куба будет отображаться в окне. В дальнейшем мы изменим код так, чтобы куб отображался в Volume.
Прежде чем двигаться дальше, давайте добавим в нашу общую ViewModel переменную secondaryVolumeIsShowing. Эта переменная будет выступать в качестве нового контроллера, определяющего, будет ли отображаться наш вторичный объем (secondaryVolume).
import Foundation @Observable class ViewModel { var secondaryVolumeIsShowing: Bool = false }
Сначала создадим SecondaryVolumeView. Это представление будет служить в качестве вторичного объема, обособленного от первичного окна, предоставляя дополнительное пространство для отображения контента или взаимодействия.
import SwiftUI struct SecondaryVolumeView: View { @Environment(ViewModel.self) private var model var body: some View { ZStack(alignment: .bottom) { CubeView() Text("This is a volume") .padding() .glassBackgroundEffect(in: .capsule) } .onDisappear { model.secondaryVolumeIsShowing.toggle() } } } #Preview { SecondaryVolumeView() .environment(ViewModel()) }
После создания SecondaryVolumeView, мы переключим наше внимание на создание PrimaryWindowView. Это основной интерфейс, который служит главным центром взаимодействия. Нам понадобится простая кнопка, способная открывать/закрывать SecondaryWindowView, который мы только что создали.
import SwiftUI struct PrimaryWindowView: View { @Environment(ViewModel.self) var model @Environment(\.openWindow) private var openWindow @Environment(\.dismissWindow) private var dismissWindow var body: some View { @Bindable var model = model VStack(spacing: 18.0) { Image(systemName: "1.circle.fill") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 100,height: 100) .fontWeight(.light) .padding() Text("this is the primary window") .font(.title) .fontWeight(.light) Toggle("Open the secondary volume", isOn: $model.secondaryVolumeIsShowing) .toggleStyle(.button) .onChange(of: model.secondaryVolumeIsShowing) { _, isShowing in if isShowing { openWindow(id: "secondaryVolume") } else { dismissWindow(id: "secondaryVolume") } } } } } #Preview(windowStyle: .automatic) { PrimaryWindowView() .environment(ViewModel()) }
И последний шаг — обновление структуры, соответствующей протоколу App, файла, автоматически генерируемого Xcode и обеспечивающего точку входа в ваше приложение.
import SwiftUI @main struct ImplementingWindowsAndVolumesApp: App { @State private var model = ViewModel() var body: some Scene { WindowGroup { PrimaryWindowView() .environment(model) } WindowGroup(id: "secondaryVolume") { SecondaryVolumeView() .environment(model) } .windowStyle(.volumetric) .defaultSize(width: 0.1, height: 0.1, depth: 0.1, in: .meters) } }
Мы немного изменим стиль этого окна с помощью .windowStyle(.volumetric). Эта строчка изменит не только внешний вид, но и поведение окна. Вместо того чтобы быть плоским, как большинство обычных окон, это окно будет иметь некоторую глубину и объем, что придает ему 3D-подобный вид.
С помощью .defaultSize(width: 0.1, height: 0.1, depth: 0.1, in: .meters) мы устанавливаем размер этого окна по умолчанию. Мы определяем начальный размер окна в 3D-пространстве.
Вот таким нехитрым образом мы создали полностью готовую структуру для открытия 3D-объектов в Volume в нашем приложении. Следуя этой схеме, вы можете реализовать в своем приложении столько Volume-объемов, сколько вам нужно.
Соображения по поводу объемов
Объемы и окна имеют некоторые общие характеристики, но обладают отличительными чертами, которые и определяют их роль в пространственных интерфейсах.
Объемы содержат 3D-объект с углом обзора 360°.
Объемы не отображают рамки вокруг 3D-объектов.
Объемы предоставляют те же элементы управления для изменения положения или закрытия, что и окна.
В общем пространстве (Shared Space) как объем, так и окно имеют начальное положение, определяемое системой.
Объем также может иметь стеклянный фон.
Окна достаточно универсальны для отображения 3D-элементов, но для демонстрации трехмерного контента предпочтение обычно отдается объемам.
В заключение приглашаем всех желающих на открытую онлайн-встречу «Будущее мобильной разработки на iOS», которая пройдет 20 мая в рамках курса «iOS Developer. Professional». Записаться можно по ссылке.
