AR, VR і модель для 3D у HTML

Захований десь у Примітки до випуску Safari Technology Preview 161 це, здавалося б, нешкідливий рядок про підтримку нового елемента та атрибута HTML:

Додана підтримка <model src> і честь <source type> атрибути ([захищено електронною поштою])

Кожного разу, коли я бачу згадку про якийсь елемент, який я не впізнаю, я відразу переходжу до нього ха! Нова для мене, але, мабуть, стара новина для всіх інших. Це погана постава, я знаю, оскільки це так само легко може бути:

• Хм, схоже на якийсь приватний експеримент.
• Ого, справді нова річ!

Правда в тому, що це як би всі три.

Це поняття, що розвивається

Як у першій дещо офіційно звучачій речі, яку я знайшов <model> не було в специфікації W3C, але в Репозиторій WebKit для пояснювачів. Усе, що міститься в README, — це величезна нотатка від 2021 року про те, що «The <model> елемент переміщено до Immersive Web CG». Я збирався перескочити, але мій погляд зачепив HistoryAndEvolution.md файл, який містить гарний виклад раннього контексту на <model> концепція:

Команда <model> елемент виникла з бажання зробити наступний крок і покращити досвід інтеграції Safari з iOS AR Quick Look функцію.

Мені довелося переглянути сторінку-заставку Apple для AR Quick Look. Ви знаєте про нову функцію деяких магазинів, за допомогою якої ви можете транспонувати 3D-візуалізацію продукту у вашому власному домі за допомогою камери телефону? Це те, про що ми говоримо, і Apple посилається на гарний приклад із Метрополітен-музею.

Як я розумію з цього обмеженого контексту:

• Скинь а <model> елемент у документі.
• Додайте зовнішній вихідний файл, наприклад <model src="assets/example.usdz">.

Оригінальна пропозиція надійшла від Immersive Web Committee Group

Ось така команда шукають зробити віртуальну реальність (VR) і доповнену реальність (AR) частиною Інтернету. Apple зв’язала своє репо, тому я стрибнув і пішов прямо до пояснювача. Це не специфікація чи щось інше, а оригінальна пропозиція. Набагато краще визначення елемента!

HTML дозволяє відображати багато типів медіа за допомогою таких елементів, як <img>, <picture>або <video>, але він не забезпечує декларативний спосіб прямого відображення 3D-вмісту. Вбудовування 3D-контенту на сторінку є порівняно громіздким і покладається на сценарії <canvas> елемент. Ми вважаємо, що настав час поставити 3D-моделі нарівні з іншими, уже підтримуваними, типами медіа.

[...]

HTML <model> елемент має на меті дозволити веб-сайту вбудовувати інтерактивні 3D-моделі так само зручно, як і будь-який інший візуальний медіа. Очікується, що моделі створюватимуться за допомогою інструментів 3D-авторингу або генеруватимуться динамічно, але будуть служити сервером як окремий ресурс.

Базовий приклад об’єднує це. Це дійсно схоже на <video> or <picture> елементи:

<model style="width: 400px; height: 300px"> <source src="assets/example.usdz" type="model/vnd.usdz+zip"> <source src="assets/example.glb" type="model/gltf-binary">
</model>

.usdz? .glb? Не той тип файлів, який зазвичай перебуває на моєму столі. Гадаю, мені потрібно буде освіжити ці та будь-які інші типи файлів <model> може підтримати. Знову ж таки, все це лише оригінальна пропозиція.

Проект пропозиції ще не заглушено

Але це так надайте гарний контур куди все може піти:

• Додавання моделі до документа
• Включення інтерактивності
• Підтримка кількох форматів
• Надання резервного вмісту
• Роблячи його доступним

Потрібно багато чого з’ясувати. Більшість із того, що є, є задокументованими проблемами, які потребують вирішення. Однак це проливає більше світла <model> як запропоновані атрибути, які роблять його рівномірним більше як <video> такий як autoplay, controls, loop, muted, poster, І т.д.

Це повертається ще далі

Найперша згадка про 3D-моделювання, яку я знайшов, була Публікація Кіта Кларка за 2018 рік у якому він прототипує настроюваний елемент під назвою <x-model>. Він описує це як «заповнювач, який надає доступ до DOM і CSSOM», де завантаження та рендеринг виконується в three.js.

За ідеєю Кіта слідує <model-viewer> компонент, яким поділився Джо Медлі у 2020 році (і наступний оновлення до нього). Є навіть a домашня сторінка для нього і весело перетягувати Ніла Армстронга в космос.

Можливо, це просто експеримент?

Я маю на увазі, що чернетка специфікації не була конкретизована. Apple, здається, готова грати в м’яч завдяки анонсу Safari TP 161. Це має повний сенс наскільки Apple налаштована на AR в цілому. (Окуляри Apple, хто?)

Google, схоже, ступив у двері, хоча й на стороні веб-компонентів. Легко зрозуміти, як може виникнути конфлікт інтересів між тим, що Apple і Google хочуть від AR в Інтернеті.

Це все лише мої нотатки, які я намагався все перекопати. У цьому має бути набагато більше нюансів, ніж те небагато, що я знаю про це досі. Я впевнений, що хтось розумніший зможе зав’язати акуратніший бант <model> в коментарях. 😉

І поки ми говоримо про Safari Technology Preview, 162 щойно вийшов днями і це дозволяє Вкладеність CSS і Синтаксис відносного кольору CSS.

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
• джерело: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/