AR, VR i model 3D w HTML

Schowany gdzieś w Informacje o wersji Safari Technology Preview 161 to pozornie niewinna linijka o obsłudze nowego elementu i atrybutu HTML:

Dodano wsparcie dla <model src> i cześć <source type> atrybuty ([email chroniony])

Za każdym razem, gdy widzę wzmiankę o jakimś elemencie, którego nie rozpoznaję, mój umysł od razu kieruje się do tego ha! Nowość dla mnie, ale prawdopodobnie stara wiadomość dla wszystkich innych. Wiem, że to zła postawa, ponieważ równie dobrze mogłaby to być:

• Hmm, wygląda na jakiś autorski eksperyment.
• Wow, prawdziwa nowość!

Prawda jest taka, że ​​to trochę wszystkie trzy.

To rozwijająca się koncepcja

Jak w, pierwsza nieco oficjalnie brzmiąca rzecz, którą znalazłem <model> nie było w specyfikacji W3C, ale w Repozytorium WebKit dla wyjaśniających. Wszystko, co znajduje się w pliku README, to gigantyczna notatka z 2021 r., Że „The <model> element został przeniesiony do Immersive Web CG.” Już miałem skakać, ale mój wzrok przykuł HistoryAndEvolution.md plik, który ma ładne podsumowanie wczesnego kontekstu na <model> pojęcie:

Połączenia <model> element zrodziła się z chęci zrobienia kolejnego kroku i ulepszenia integracji Safari z iOS AR Szybki podgląd cecha.

Musiałem spojrzeć na powitalną stronę Apple dla AR Quick Look. Znasz nową funkcję, którą mają niektóre sklepy, dzięki której możesz transponować renderowanie 3D produktu we własnym domu za pomocą aparatu w telefonie? O takich rzeczach mówimy i Apple łączy fajne studium przypadku z Metropolitan Museum of Art.

Jak rozumiem to z tego ograniczonego kontekstu:

• Upuść <model> elementem w dokumencie.
• Dodaj zewnętrzny plik źródłowy, np <model src="assets/example.usdz">.

Oryginalna propozycja pochodzi od Immersive Web Committee Group

To jest zespół patrząc sprawiają, że rzeczywistość wirtualna (VR) i rzeczywistość rozszerzona (AR) stają się częścią sieci. Apple połączył swoje repozytorium, więc zrobiłem skok i poszedłem prosto do tłumacza. To nie jest specyfikacja ani nic, ale oryginalna propozycja. Znacznie lepsza definicja elementu!

HTML umożliwia wyświetlanie wielu typów mediów za pomocą elementów takich jak <img>, <picture>lub <video>, ale nie zapewnia deklaratywnego sposobu bezpośredniego wyświetlania zawartości 3D. Osadzanie treści 3D na stronie jest stosunkowo kłopotliwe i polega na pisaniu skryptów <canvas> element. Uważamy, że nadszedł czas, aby zrównać modele 3D z innymi, już obsługiwanymi typami mediów.

[...]

HTML <model> element ma na celu umożliwienie stronie internetowej osadzania interaktywnych modeli 3D tak wygodnie, jak w przypadku innych mediów wizualnych. Oczekuje się, że modele będą tworzone przez narzędzia autorskie 3D lub generowane dynamicznie, ale będą służyły jako samodzielne zasoby przez serwer.

Podstawowy przykład łączy to w całość. To naprawdę sprawia wrażenie <video> or <picture> elementy:

<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? Nie jest to typ plików, które zazwyczaj przechodzą przez moje biurko. Chyba będę musiał odświeżyć te i inne typy plików <model> może wspierać. Ponownie, wszystko to jest jedynie pierwotną propozycją.

Projekt wniosku nie jest jeszcze całkiem stłumiony

Ale tak jest podaj ładny zarys o tym, gdzie rzeczy mogą się potoczyć:

• Dodanie modelu do dokumentu
• Włączanie interaktywności
• Obsługa wielu formatów
• Dostarczanie treści zastępczych
• Uczynienie go dostępnym

Jest wiele do odkrycia. Większość z tego, co tam jest, to udokumentowane problemy, które wymagają rozwiązania. Rzuca jednak więcej światła <model> jak proponowane atrybuty, które sprawiają, że jest równy jeszcze lubić <video> jak na przykład autoplay, controls, loop, muted, poster, itp.

Cofa się jeszcze dalej

Najwcześniejsza wzmianka o modelowaniu 3D, jaką znalazłem, brzmiała: Post Keitha Clarka z 2018 roku w którym tworzy prototyp niestandardowego elementu o nazwie <x-model>. Opisuje to jako „symbol zastępczy, który zapewnia dostęp do DOM i CSSOM”, gdzie ładowanie i renderowanie odbywa się w trzy.js.

Po pomyśle Keitha następuje <model-viewer> komponent Joe Medley udostępniony w 2020 roku (i kolejny aktualizacja do tego). Jest nawet do tego strona główna i fajnie jest ciągnąć Neila Armstronga w kosmos.

Może to tylko eksperyment?

To znaczy, szkic specyfikacji nie został dopracowany. Apple wydaje się chętny do gry w piłkę dzięki ogłoszeniu Safari TP 161. To ma całkowity sens jak uparty jest Apple w AR jako całość. (Okulary Applektoś?)

Wydaje się, że Google stoi w drzwiach, choć po stronie komponentów sieciowych. Łatwo zauważyć, że może istnieć konflikt interesów między tym, czego Apple i Google chcą od AR w sieci.

To wszystko są tylko moje notatki z próby grokowania wszystkiego. Musi być w tym dużo więcej niuansów niż to, co wiem na ten temat do tej pory. Jestem pewien, że ktoś mądrzejszy może zawiązać ładniejszą kokardkę <model> w komentarzach. 😉

A skoro mówimy o Safari Technology Preview, 162 właśnie wydany na drugi dzień i umożliwia Zagnieżdżanie CSS oraz Względna składnia kolorów CSS.

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
• Źródło: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/