Захований десь у Примітки до випуску 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/
- 1
- 11
- 2018
- 2021
- 3d
- 3D-рендерінг
- 7
- 9
- 98
- a
- МЕНЮ
- про це
- доступ
- адресація
- Цілі
- ВСІ
- дозволяє
- вже
- та
- Оголошення
- будь
- Apple
- AR
- Армстронг
- навколо
- Атрибути
- збільшено
- Доповнена реальність
- доповнена реальність (ар)
- авторство
- назад
- м'яч
- основний
- Вірити
- Краще
- між
- народжений
- Бичачий
- званий
- кімната
- випадок
- тематичне дослідження
- спійманий
- color
- коментарі
- комітет
- порівняльно
- компонент
- Компоненти
- концепція
- конфлікт
- зміст
- контекст
- може
- створений
- Перетинати
- виготовлений на замовлення
- DEV
- безпосередньо
- дисплей
- документ
- DOM
- Не знаю
- Двері
- вниз
- проект
- Рано
- легко
- елементи
- дозволяє
- і т.д.
- Навіть
- все
- все
- еволюціонує
- приклад
- очікуваний
- досвід
- експеримент
- зовнішній
- очей
- особливість
- Рисунок
- філе
- Файли
- Перший
- потім
- ніжка
- знайдений
- від
- від 2021
- веселощі
- генерується
- гігант
- GitHub
- даний
- Go
- йде
- висота
- Головна
- Як
- Однак
- HTML
- HTTPS
- Я БУДУ
- ідея
- занурення
- удосконалювати
- in
- інтеграція
- інтерактивний
- інтерес
- питання
- IT
- JOE
- стрибати
- Знати
- світло
- обмеженою
- Лінія
- пов'язаний
- зв'язку
- трохи
- погрузка
- подивитися
- шукати
- ВИГЛЯДИ
- серія
- макроруми
- made
- зробити
- РОБОТИ
- манера
- багато
- Медіа
- просто
- може бути
- mind
- модель
- Моделі
- більше
- найбільш
- множинний
- музей
- Необхідність
- Нові
- новини
- наступний
- примітки
- Nuance
- Старий
- оригінал
- Інше
- власний
- частина
- телефон
- заповнювач
- plato
- Інформація про дані Платона
- PlatoData
- Play
- бідні
- попередній перегляд
- ймовірно
- Product
- пропозиція
- запропонований
- захищений
- Прототипи
- забезпечувати
- забезпечує
- Тягне
- put
- Швидко
- Реальність
- визнавати
- звільнити
- випущений
- надання
- ресурс
- Safari
- Здається,
- сенс
- загальні
- сторона
- розумнішими
- So
- так далеко
- деякі
- Хтось
- кілька
- десь
- Source
- Простір
- автономні
- Крок
- магазинів
- прямий
- Вивчення
- наступні
- такі
- підтримка
- Підтриманий
- Приймати
- говорити
- Технологія
- Команда
- їх
- річ
- речі
- три
- через
- TIE
- час
- до
- разом
- інструменти
- Усього:
- правда
- Типи
- типово
- розуміти
- Віртуальний
- Віртуальна реальність
- візуальні медіа
- vr
- W3
- Web
- веб -компоненти
- веб-комплект
- веб-сайт
- Що
- який
- в той час як
- готовий
- в
- Ти
- вашу
- зефірнет