AR, VR și un model pentru 3D în HTML

Ascuns undeva în Note de lansare Safari Technology Preview 161 este o linie aparent inofensivă despre suportul pentru un nou element și atribut HTML:

Suport adăugat pentru <model src> si onoare <source type> atribute ([e-mail protejat])

Ori de câte ori văd menționarea unui element pe care nu-l recunosc, mintea mea merge direct la Huh! Nou pentru mine, dar probabil știri vechi pentru toți ceilalți. Este o postură proastă, știu, așa cum ar putea fi la fel de ușor:

• Hmm, pare un experiment propriu.
• Wow, un lucru cu adevărat nou!

Adevărul este că sunt cam toate trei.

Este un concept în evoluție

Ca și în, primul lucru oarecum oficial pe care l-am găsit <model> nu era în specificațiile W3C, dar în Repositorioul WebKit pentru explicatori. Tot ceea ce este în README este o notă uriașă din 2021 că „The <model> elementul s-a mutat în Immersive Web CG.” Eram pe punctul de a sări peste, dar privirea mi-a atras HistoryAndEvolution.md fișier care are o scurtă prezentare a contextului timpuriu pe <model> idee:

 <model> element s-a născut din dorința de a face pasul următor și de a îmbunătăți experiența integrării Safari cu iOS. Privire rapidă AR caracteristică.

A trebuit să mă uit la pagina de start a Apple pentru AR Quick Look. Știți noua funcție pe care o au unele magazine prin care puteți transpune o redare 3D a unui produs în propria casă folosind camera telefonului? Acesta este genul de lucruri despre care vorbim și Apple conectează un studiu de caz frumos de la Metropolitan Museum of Art.

După cum am înțeles din acest context limitat:

• Aruncă a <model> element din document.
• Adăugați un fișier sursă extern, de ex <model src="assets/example.usdz">.

Propunerea originală este de la Immersive Web Committee Group

Asta e echipa căutând face Realitatea Virtuală (VR) și Realitatea Augmentată (AR) parte din web. Apple și-a conectat depozitul, așa că am făcut saltul și am plecat direct la explicator. Aceasta nu este specificația sau altceva, ci propunerea originală. O definiție mult mai bună a elementului!

HTML permite afișarea multor tipuri de media prin elemente precum <img>, <picture>, Sau <video>, dar nu oferă o modalitate declarativă de a afișa direct conținutul 3D. Încorporarea conținutului 3D într-o pagină este relativ greoaie și se bazează pe scriptarea <canvas> element. Credem că este timpul să punem modelele 3D pe picior de egalitate cu alte tipuri de media deja acceptate.

[...]

HTML <model> element urmărește să permită unui site web să încorporeze modele 3D interactive la fel de convenabil ca orice alt suport vizual. Se așteaptă ca modelele să fie create de instrumente de creație 3D sau generate dinamic, dar servite ca resursă autonomă de către server.

Exemplul de bază reunește acest lucru. Chiar se simte ca <video> or <picture> elemente:

<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? Nu tipul de fișiere care de obicei traversează biroul meu. Presupun că va trebui să perfectionez acelea și orice alte tipuri de fișiere care <model> ar putea sprijini. Din nou, toate acestea sunt doar propunerea originală.

Proiectul de propunere nu a fost încă eliminat

Dar o face ofera un contur frumos despre unde ar putea merge lucrurile:

• Adăugarea unui model la un document
• Permiterea interactivității
• Suportă mai multe formate
• Furnizarea de conținut alternativ
• Făcându-l accesibil

Sunt multe de înțeles. Cele mai multe dintre ceea ce există sunt probleme documentate care trebuie abordate. Totuși, face mai multă lumină <model> ca niște atribute propuse care îl fac să se simtă uniform mai mult ca <video> precum autoplay, controls, loop, muted, poster, Etc

Se întoarce și mai departe

Cea mai veche mențiune despre modelarea 3D pe care am găsit-o a fost Postarea lui Keith Clark din 2018 în care prototipează un element personalizat numit <x-model>. El îl descrie ca „un substituent care oferă acces la DOM și CSSOM” unde încărcarea și redarea se fac în trei.js.

Ideea lui Keith este urmată de <model-viewer> componentă distribuită de Joe Medley în 2020 (și un ulterior actualizare la el). Există chiar și un pagina de start pentru el și e distractiv să-l târăști pe Neil Armstrong în spațiu.

Este posibil doar un experiment?

Adică, proiectul de specificații nu a fost concretizat. Apple pare dispus să joace mingea datorită anunțului Safari TP 161. Asta are un sens total dat cât de optimist este Apple în AR ca un intreg, per total. (Ochelari de oaie, oricine?)

Google pare să aibă piciorul în ușă, deși din partea componentelor web a lucrurilor. Este ușor de văzut cum poate exista un conflict de interese între ceea ce Apple și Google își doresc de la AR pe web.

Toate acestea sunt doar notițele mele de la încercarea de a ști totul. Trebuie să fie mult mai multe nuanțe decât puținele pe care le știu până acum. Sunt sigur că cineva mai deștept poate lega o fundă mai îngrijită <model> în comentarii. 😉

Și în timp ce vorbim de Safari Technology Preview, 162 tocmai a fost lansat zilele trecute și permite Imbricare CSS si Sintaxa de culoare relativă CSS.

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/