AR, VR и модель для 3D в HTML

Спрятался где-то в Примечания к выпуску Safari Technology Preview 161 на первый взгляд безобидная строка о поддержке нового HTML-элемента и атрибута:

Добавлена ​​поддержка <model src> и честь <source type> атрибуты ([электронная почта защищена])

Всякий раз, когда я вижу упоминание о каком-то незнакомом мне элементе, я сразу же вспоминаю Хм! Новое для меня, но, вероятно, старые новости для всех остальных. Я знаю, что это плохая осанка, и с таким же успехом это может быть:

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

Правда в том, что это вроде как все три.

Это развивающаяся концепция

Например, первая несколько официально звучащая вещь, которую я нашел на <model> не было в спецификации W3C, но в Репозиторий WebKit для объяснителей. Все, что есть в README, — это гигантская заметка от 2021 года о том, что «The <model> элемент переместился в иммерсивную веб-компьютерную графику». Я уже собирался перепрыгнуть, но мой взгляд уловил 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> element позволяет веб-сайту встраивать интерактивные 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», где загрузка и рендеринг выполняются в три.js.

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

Может это просто эксперимент?

Я имею в виду, черновая спецификация не была конкретизирована. Apple, похоже, готова играть в мяч благодаря анонсу Safari TP 161. Это имеет смысл, учитывая насколько бычьи планы Apple на AR в целом. (Apple Glasses, кто-нибудь?)

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

Это всего лишь мои заметки, сделанные в результате попытки все вкопаться. В этом должно быть гораздо больше нюансов, чем то немногое, что я знаю об этом до сих пор. Я уверен, что кто-то умнее может завязать более аккуратный бант <model> в комментариях. 😉

И пока мы говорим о Safari Technology Preview, 162 только что вышел на днях и это позволяет Вложение CSS и Синтаксис относительного цвета CSS.

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