Огляд застосунків майбутнього крізь призму окулярів Apple Vision Pro
Вітаю всіх шанувальників продукції Apple! Мене звати Олександр, я iOS Developer в ІТ-компанії Customertimes з досвідом роботи більше як 4 років.
Уперше за каденції Тіма Кука компанія презентувала справді новий девайс. 6 червня на WWDC 2023 ми побачили окуляри з технологією доповненої реальності Vision Pro. А вже в серпні розробники почали власноруч тестувати свої застосунки в спеціальних «яблучних» лабораторіях (під суворим наглядом компанії, звісно).
Для мене це стало гарним приводом написати статтю та трохи нагадало романтику перших iOS-пристроїв від Apple, яка свого часу й надихнула мене стати розробником.
Авжеж, після цієї статті ти, любий читачу, не станеш тим міфічним програмістом на visionOS з
Способи тестування
Що робити тим, у кого немає доступу до девайсу? І як саме розробники можуть адаптувати старі застосунки та скористатися новими функціями доповненої реальності? 25 липня Apple випустила SDK, що дозволяє розробникам імітувати роботу visionOS на своїх Mac. Розгляньмо нові інструменти та їхні можливості.
Цікаво, що за чутками нова операційна система мала назву xrOS, що згодом отримало підтвердження, адже майже всі гайди на WWDC покликаються саме на таку назву.
Якщо говорити загально, то Vision Pro є доволі універсальним пристроєм, на якому можна запустити програми як з Mac, так і з iOS-пристроїв без додаткових налаштувань. За замовчуванням вони будуть запускатись як iPad-застосунок. Але якщо ви плануєте поліпшити досвід користувача, то в проєкт потрібно внести деякі зміни.
По-перше, треба додати visionOS до списку підтримуваних систем.
У деяких випадках цього буде достатньо — за умови, що ви не використовуєте якісь специфічні hardware-технології (наприклад, NFC) або застаріле API. Тому «простий перехід» забезпечений лише свіжим застосункам, що були написані на SwiftUI (з тими, що випущені
Але якщо все минуло добре, і ви змогли збілдити застосунок, то перше, що можна побачити: тло стало скляним, а для кнопок додались анімації при наведенні. У visionOS немає світлої або темної теми, натомість лише матове скло з окантуванням, що адаптується до зовнішнього середовища.
Віконні застосунки у просторі
На WWDC були наведені приклади того, що, найімовірніше, може зламатися, мати неприродний вигляд, та того, на що варто звернути увагу під час портування або під час розробки нового застосунку.
І перше, що зазвичай впадає в око, — це зображення, які потенційно можуть мати або низьку роздільну здатність, або непрозоре тло. Не знаю, чи буде хтось дивитися на картинки впритул або робити в кімнаті
У коді це робиться доволі просто та схоже на роботу з AsyncImage:
ZStack { Capsule(style: .continuous) .fill(.white) Model3D(named: "CT-Logo", bundle: realityKitContentBundle) { model in model .resizable() .aspectRatio(contentMode: .fit) .padding([.bottom], 20) .padding([.leading], 30) .padding([.top], 40) .padding([.trailing], 40) } placeholder: { ProgressView() } }
Навіть є вбудована можливість використання плейсхолдеру для важких Model3D або тих, що завантажуються з мережі.
На відміну від зображень, на об’єкти діє освітлення середовища, що буде змінювати їхній колір:
Тут можна побачити, що в темній кімнаті (можна обирати в симуляторі) об’єкти будуть мати темніший вигляд, а зображення (або капсула на тлі, як у прикладі) залишаться світлими, як є. Щоб фон не так палив очі, можна замінити суцільні однотонні кольори на так звані Vibrant materials («Яскраві матеріали»). Вони створюють додатковий контраст і яскравість, завдяки чому вміст на скляній поверхні залишається розбірливим, незалежно від того, що просвічується навколо. Усі вбудовані елементи керування та контейнери використовують ці матеріали за замовчуванням. Семантичні стилі SwiftUI автоматично набувають відповідний вигляд на кожній платформі.
Ось такий вигляд має тло капсули, якщо ми спробуємо використати ці Vibrant materials:
Взаємодія з інтерфейсом
Тепер обговоримо інтерактивні елементи. Загалом є 4 види взаємодії з інтерфейсом: за допомогою очей, рук, курсору та через спеціальні можливості.
Перший — це очі. Якщо управління виконується за допомогою зору, то умовний курсор розташовується в місці, куди дивиться користувач.
Особисто мене, як власника PSVR2, у якій є схожа фіча, це трохи бісить. Якщо коротко, то уявіть, що у вашому застосунку спрацьовує hover-ефект усюди, куди ви дивитеся. З одного боку — прикольно, але з іншого — наче хтось приліпив гумку до очей, яку не можеш відліпити та подивитись в інший бік. Наче за тобою хтось стежить... Тож дуже цікаво почути вашу думку в коментарях із цього приводу.
Варто зауважити, що ці способи працюють разом, а не окремо. Тобто якщо ви подивилися на кнопку і хочете її «клацнути», то для цього треба звести разом вказівний і великий пальці, а не кліпнути очима, як могло б здатися на перший погляд. Так, розділення рухів очима та руками на «перший» та «другий» спосіб буде досить умовним.
Я не знайшов функції, аби в симуляторі можна було додавати руки (тобто бачити їх безпосередньо, щоб тестувати взаємодію з 3D-об’єктами), але в симуляторі ми можемо імітувати деякі жести за допомогою миші.
У реальності з боку це виглядає, як у фантастичних фільмах, можливо, звідти дизайнери й отримали натхнення. Хоча здебільшого ці жести схожі на ті, що були представлені на iPhoneOS ще 15 років тому, тільки адаптовані під керування «у повітрі».
Контент також можна буде просто «тицьнути» пальцем, якщо він розташовується достатньо близько, або змінити на
Водночас на старті Vision Pro не буде підтримувати керування з миші. Але нещодавно був оновлений гайд Pointing devices, де продемонстровано керування з трекпаду. Там можна побачити, що курсор матиме вигляд кружечка-блискавки, що, на мій погляд, є гарним рішенням, завдяки якому він не загубиться.
Замість трекпаду можна використовувати введення на основі положення голови, зап’ястя або вказівного пальця. Користувачі можуть регулювати чутливість руху відповідно до своїх індивідуальних потреб.
Своєю чергою, Pointer дуже сильно пов’язаний з Accessibility, тож розділяти їх на окремі види також не бачу особливого сенсу.
Узагалі, режим доступності нагадує той, що є зараз на iOS. Тобто одним із варіантів є виведення жестів у окремому вікні.
Нові елементи інтерфейсу
Бонусом з додаткових рекомендацій можна виділити використання TabView. Apple рекомендує послуговуватися ним замість NavigationSplitView. Це матиме такий вигляд:
Тобто доступні для вибору табки будуть перебувати наче зовні, що додасть інтерфейсу об’єму.
Ще у visionOS є нова концепція: орнаменти. Вони дозволяють додавати різні види аксесуарів внизу вікна програми.
.ornament(attachmentAnchor: .scene(alignment: .bottom)) { ProgressView("Fast Sync, Stage 3/5", value: 50, total: 100) .padding() .progressViewStyle(LinearProgressViewStyle()) .tint(.mint) .glassBackgroundEffect(in: .capsule) }
Наприклад, там можна виводити статус завантаження або виводити повідомлення. Також .toolbar
є окремим різновидом орнаменту.
Наведені вище стандартні елементи мають ефекти наведення за замовчуванням. Тобто якщо ви подивитесь очима або наведете курсор на TabView, він автоматично розкриється, але якщо потрібно додати їх для кастомного view, то можна використати модифікатор .hoverEffect()
.
Є ще багато дрібниць, про які Apple зробила окремий гайд, з яким я рекомендую ознайомитись на порталі WWDC.
Відображення контенту
Як пише сама Apple: «Vision Pro пропонує нескінченне просторове полотно для дослідження, експериментів й ігор, що дає вам свободу повністю переосмислити свій досвід у 3D». Тому класичні вікна — далеко не єдиний варіант того, як можна будувати застосунок.
Для Vision існує три види примітивів для відображення контенту:
- Windows (Вікна) — класичні вікна, тільки в просторі, можливо, з об’ємними та багатошаровими елементами.
- Volumes (Об’єми) — дозволяють працювати з 3D-об’єктами, які можна переглядати під будь-яким кутом у спільному просторі разом з іншими спільними просторами (Shared Space) та вікнами або в повному просторі (Full Space).
- Spaces (Простори) — за замовчуванням програми запускаються у спільному просторі (Shared Space), де вони існують поруч (подібно до кількох програм на робочому столі Mac). Програми можуть використовувати вікна та об’єми для відображення вмісту, а користувач може змінювати розташування цих елементів у будь-якому місці. Для більшого ефекту занурення програма може відкрити спеціальний повний простір (Full Space), де відображатиметься лише вміст цієї програми. Усередині повного простору програма може використовувати вікна та об’єми, створювати необмежений 3D-контент, відкривати портал в інший світ або навіть повністю занурювати людей у середовище.
Обʼєми
Детальніше розглянемо об’єми та те, що з ними можна робити.
Припустимо, що в нас є сторінка товару, але замість звичайного зображення ми можемо використати імерсивний об’єкт. Є кілька варіантів, як це зробити.
Перший — це Volumetric Window. Вони створені для перегляду 3D-вмісту. На відміну від 2D-вікна, об’ємне вікно призначене для використання під будь-яким кутом, тому воно ідеально підходить для 3D-моделей. Об’ємне вікно також зберігає фіксований розмір, що відповідає величині реальних об’єктів. Можна масштабувати модель в об’ємному вікні до одного метра в діаметрі, і вона завжди відображатиметься саме в такому розмірі.
WindowGroup(id: "can-test") { TestVolumetricContent() } .windowStyle(.volumetric) .defaultSize(width: 0.5, height: 0.5, depth: 0.5, in: .meters)
Ми можемо відкривати безліч таких вікон, рухати їх за стрічку, але не взаємодіяти з об’єктом усередині нього.
Але для того, щоб «гратися» з об’єктами за межами їхніх вікон, потрібно вставити їх у другий тип відображення контенту — Immersive Space. Також необхідно зробити деякі налаштування безпосередньо із самою моделлю.
Варто зауважити, що, на відміну від вікон, позиція контенту всередині Immersive Space буде фіксованою, тоді як вікна можна рухати, використовуючи стрічку знизу за замовчуванням. Тому розглянемо, як можна переміщувати 3D-об’єкти в просторі.
Якщо ви створите порожню сутність з моделлю всередині вікна із коду, вона нічого не зробить. Щоб змусити її відтворювати або задавати поведінку, вона повинна мати компоненти. Кожен компонент забезпечує певні дії та екшени для сутності. Для прикладу, об’єкт банки у цій програмі реалізовано за допомогою двох компонентів: компонента моделі, яка надає об’єкту сітку та матеріали, і компонента трансформації, яка розміщує об’єкт у 3D-просторі.
Apple використовує спеціальний формат для своїх моделей — Universal Scene Description (USD). Для iOS-девайсів створена спеціальна версія USDZ ще у 2018 році у партнерстві з Pixar. Окрім того, що його дуже важко загуглити (бо якщо вводити «can usd», на запит видається курс долара, ціна банки алюмінія, що «може» долар, але точно не модель) головною особливістю є те, що він дозволяє містити всередині себе не просто моделі, а цілі сцени, анімації, звуки та ще багато чого.
Отже, модель бажано експортувати в USDZ-файл і завантажити в RealityView.
Окрім моделі, ці сутності мають компонент трансформації, що розміщує об’єкт у тривимірному просторі. Можна керувати її положенням, орієнтацією та масштабом, встановлюючи властивості компонента перетворення, а також батьківську сутність.
Все це можна зробити за допомогою Reality Composer Pro — нового інструмента розробника, який дозволяє створювати, редагувати та переглядати 3D-вміст.
Отож для того, щоб ми могли торкатися та взаємодіяти з нашою моделькою, нам потрібні два компоненти — це Input Target та Collision. Collision задає форму об’єкту, з якою можна взаємодіяти, а Input Target помічає для RealityView, що з об’єктом можна взаємодіяти.
Можливо, це через те, що я використовую бета-версію, але у мене не відображається форма колізії, тому наразі довіримося автоматично згенерованій.
Зберігаємо, білдимо та тиснемо кнопку, щоб відобразити Volume. На перший погляд може здатися, що нічого не змінилось:
Але якщо ми подивимось під ноги, то побачимо, що моделька з’явилась під нами. Це пов’язано з тим, що імерсивний простір бере початок координат з-під ніг користувача, тоді як координати інтерфейсу (тобто SwiftUI) починаються з верхнього лівого кута вікна.
Щоб це вирішити, RealityView має функції конвертації між просторами координат SwiftUI і RealityKit, яка перетворює точки і обмежувальні рамки з простору координат інтерфейсу в локальний простір об’єкта або навпаки.
RealityView { content in guard let can = try? await Entity(named: "CT-Can", in: realityKitContentBundle) else { fatalError("Unable to load Can model.") } self.can = can content.add(self.can) can.position = [0.2, 1.4, -1] configure() } update: { content in configure() } .gesture(DragGesture() .targetedToEntity(can) .onChanged { value in can.position = value.convert(value.location3D, from: .local, to: can.parent!) })
Уявімо, що у нас є сторінка товару. І натиснувши на кнопку «Переглянути», клієнт може подивитись, який вигляд має товар в реальному житті. Перед ним з’явиться моделька, з якою можна взаємодіяти. Потенційно, до жесту дотику можна додати, наприклад, анімації відкривання та звуки. Але так чи інакше, це дає новий безмежний простір для відображення та взаємодії з контентом.
І якщо звичайна баночка у повітрі не виглядає так цікаво та епічно, то Apple у своїх курсах на WWDC зробила низку окремих гайдів на прикладі створення цілих діорам у Reality Composer Pro. До об’єктів можна додавати точки інтересу, які будуть активуватись під час наведення. Також можливо використовувати різні шейдери, тобто впливати на матеріали, їх металевість, блиск, шорсткість тощо. А також додавати звуки пташок, що пролітають повз, анімації для хмарок та ще багато чого.
Кому цікаво, ознайомтесь із цим інструментом більш детально на сайті Apple.
Простори
Вікна і об’єми «живуть» у просторі. І коли ми його відкриваємо, він може «ділитися» місцем з іншими вікнами застосунків або повністю зайняти навколишнє середовище. Для цього були введені концепції Full Space і Shared Space.
У режимі повного простору всі інші застосунки ховаються, активною залишиться лише наша програма.
Також ми можемо впливати на рівень імерсивності через Digital Crown. Ця система називається Passthrough і дозволяє керувати навколишнім середовищем. Є 3 види глибини: Mixed, Progressive та Full. Змішаний (Mixed) стиль налаштовує простір для відображення наскрізного перегляду, але можна застосувати прогресивний або повний стиль, щоб збільшити занурення та мінімізувати відволікання користувача.
Варто зауважити, що поринаючи в повністю імерсивний світ, можна вимикати руки користувача за допомогою модифікатора .upperLimbVisibility(...)
, тому в таких випадках бажано створювати віртуальні рукавиці.
Цікаво, що в модифікаторі зазначені саме верхні кінцівки. Тоді який вигляд матимуть інші частини тіла?
Замість тла реального світу ми можемо зробити космос або якесь мальовниче місце.
Також у Full Space ми маємо можливість використати ARKit та додати трекінг рук і фізику до об’єктів. Теоретично, у нашому випадку ми можемо піти ще далі й використати ці фічі для банки, але без реальних окулярів симулювати руки та нормально взаємодіяти з гравітацією поки що неможливо.
Точніше кажучи, я не знайшов, чи можна це зробити в симуляторі, але вже можна уявити, як хтось будує з цих банок пірамідки, коли купує якийсь продукт.
Варто нагадати, що Apple піклується про приватність, тож, якщо ви хочете трекати пальці користувача або входити в імерсивний простір, то в Info.plist
потрібно прописувати на це дозвіл.
Але як і для рук, зараз немає інструментів для створення та симулювання Immersive Space. У симуляторі навіть відсутній Digital Crown, який регулює глибину занурення. Тож поки повіримо Apple, що воно так і працює, але було б цікаво спробувати Use Case, коли можна повністю замінити фон, наприклад, на шоурум, де можна потренувати презентацію товару перед клієнтами. Або кейс, де ви відсканували товар, занесли його в базу, а потім обрали із бази та можете приміряти або дивитися, який вигляд він матиме в руках.
Якщо подумати, то Vision може замінити водночас усі пристрої від Apple. Навіть iPhone, якщо в нього буде вбудований стільниковий зв’язок.
І на відміну від окулярів Meta, Vision показує обличчя користува. Apple назвала цю технологію EyeSight. Тож на вулиці або ж у розмові з іншими людьми не буде виникати ефекту моторошної долини. Або буде, хто знає...
Дуже цікаво, як у майбутньому буде використовуватись Vision. Групові презентації складних моделей, машинобудування, навчання молодих хірургів, віртуальні магазини?
З іншого боку, згадується сцена із повернення «Назад у майбутнє», де Док називає iPhone неймовірним кишеньковим суперкомп’ютером, де кожна людина може власноруч робити складні математичні розрахунки... Та-а-ак, ми ж це в тіктоці кожен день і робимо, чи ні?
Ще одним прикрим розчаруванням є те, що навіть у 2024 році планується випуск лише 150 000 пристроїв Vision Pro. Це дуже мала цифра, особливо, якщо згадати, що для iPhone це число становить приблизно 200 мільйонів!
Коли я шукав інформацію до статті, то натрапив на цікаву думку, що стратегія запуску та доля перших ревізій буде дуже схожою на Apple Lisa. Для відома, це був перший комп’ютер, який мав UI операційної системи, схожий на сучасний (а не просто командний рядок). Проблема була в тому, що на старті його ціна становила $10 000, і так само, як зараз із Vision, цей девайс був недоступний звичайному користувачу. Але за рік виходить легендарний Macintosh 1984, дешевший у чотири рази, і просто підриває ринок. Тож можливо, після невеликої обкатки, Apple випустить більш доступну версію за розумні (навіть за їхніми мірками) гроші.
До того ж, коли Стів Джобс презентував перший iPhone, він сказав, що його готували 2,5 роки. На той момент компанія зробила більше 200 патентів, а за кулісами напоготові було ще 5 резервних смартфонів на випадок, якщо основний дасть збій.
Висновки
Важко уявити, скільки інженерних та дизайнерських викликів треба подолати перед випуском повноцінного продукту. Тому не дивно, що набір інструментів зараз досить обмежений та надається порційно та поступово. Нещодавно вийшла третя бета операційної системи, куди інтегрували інструменти роботи з Optic ID та віртуальними сценаріями для оточень, а на презентації iPhone торкалися теми просторових відео, які можна буде переглядати лише на Vision Pro.
Тож особисто я з нетерпінням чекаю на новий продукт та доволі оптимістично налаштований з приводу його кінцевої реалізації. Щонайменше, за ним буде дуже цікаво стежити найближчі півтора року. А може, нові окуляри взагалі замінять iPhone в інфопросторі.
А як вважаєте ви? Поділіться в коментарях.
24 коментарі
Додати коментар Підписатись на коментаріВідписатись від коментарів