AR, VR og en modell for 3D i HTML

Gjemt et sted i Safari Technology Preview 161 versjonsnotater er en tilsynelatende uskyldig linje om støtte for et nytt HTML-element og -attributt:

Lagt til støtte for <model src> og ære <source type> egenskaper ([e-postbeskyttet])

Hver gang jeg ser omtale av et element jeg ikke kjenner igjen, går tankene mine rett til Hu h! Nytt for meg, men sikkert gammelt nytt for alle andre. Det er dårlig holdning, jeg vet, som det like gjerne kan være:

• Hmm, ser ut som et eget eksperiment.
• Wow, en helt ny ting!

Sannheten er at det er alle tre.

Det er et konsept i utvikling

Som i, den første noe offisielle klingende tingen jeg fant på <model> var ikke i W3C-spesifikasjonen, men i WebKits repo for forklarere. Alt som er i README er et gigantisk notat fra 2021 om at "The <model> element har flyttet til Immersive Web CG." Jeg holdt på å hoppe over, men blikket fanget HistoryAndEvolution.md fil som har en fin oversikt over tidlig kontekst på <model> konsept:

De <model> element ble født ut av et ønske om å ta neste steg og forbedre opplevelsen av Safaris integrasjon med iOS AR Rask titt funksjonen.

Jeg måtte se på Apples splash-side for AR Quick Look. Vet du den nye funksjonen som enkelte butikker har der du kan transponere en 3D-gjengivelse av et produkt i ditt eget hjem ved hjelp av telefonkameraet? Det er den typen ting vi snakker om, og Apple kobler opp en fin casestudie fra Metropolitan Museum of Art.

Slik jeg forstår det fra denne begrensede konteksten:

• Slipp a <model> element i dokumentet.
• Legg til en ekstern kildefil, f.eks <model src="assets/example.usdz">.

Det opprinnelige forslaget er fra Immersive Web Committee Group

Det er laget ser gjør Virtual Reality (VR) og Augmented Reality (AR) til en del av nettet. Apple koblet opp repoen deres, så jeg hoppet og gikk rett til forklareren. Dette er ikke spesifikasjonen eller noe, men det opprinnelige forslaget. En mye bedre definisjon av elementet!

HTML tillater visning av mange medietyper gjennom elementer som f.eks <img>, <picture>eller <video>, men det gir ikke en deklarativ måte å vise 3D-innhold direkte på. Å bygge inn 3D-innhold på en side er relativt tungvint og er avhengig av skripting av <canvas> element. Vi mener det er på tide å sette 3D-modeller på lik linje med andre, allerede støttede, medietyper.

[...]

HTML <model> element har som mål å la et nettsted bygge inn interaktive 3D-modeller like praktisk som alle andre visuelle medier. Modeller forventes å bli opprettet av 3D-redigeringsverktøy eller generert dynamisk, men tjent som en frittstående ressurs av serveren.

Det grunnleggende eksemplet trekker dette sammen. Det føles virkelig som <video> or <picture> elementer:

<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? Ikke den typen filer som vanligvis krysser skrivebordet mitt. Antar at jeg må friske opp de og andre filtyper som <model> kan støtte. Igjen, alt dette er bare det opprinnelige forslaget.

Utkastet til forslaget er ikke helt ferdig ennå

Men det gjør det gi en fin oversikt om hvor ting kan gå:

• Legge til en modell i et dokument
• Aktiverer interaktivitet
• Støtter flere formater
• Levere reserveinnhold
• Gjøre det tilgjengelig

Det er mye å finne ut av. Det meste av det som finnes er dokumenterte problemer som må løses. Det kaster imidlertid mer lys på <model> som foreslåtte attributter som får det til å føles jevnt mer i likhet med <video> slik som autoplay, controls, loop, muted, posterOsv

Det går enda lenger tilbake

Den aller tidligste omtalen av 3D-modellering jeg fant var Keith Clarks 2018-innlegg der han prototyper et tilpasset element kalt <x-model>. Han beskriver det som "en plassholder som gir tilgang til DOM og CSSOM" der lasting og gjengivelse gjøres i tre.js.

Keiths idé blir fulgt av <model-viewer> komponent Joe Medley delte i 2020 (og en påfølgende Oppdater til det). Det er til og med en hjemmeside for det og det er morsomt å dra Neil Armstrong rundt i verdensrommet.

Det er muligens bare et eksperiment?

Jeg mener, utkastet til spesifikasjonen har ikke blitt konkretisert. Apple virker villig til å spille ball takket være Safari TP 161-kunngjøringen. Det gir fullstendig mening gitt hvor bullish Apple er på AR som helhet. (Apple Glasses, hvem som helst?)

Google ser ut til å ha foten i døra, om enn på nettkomponentsiden. Det er lett å se hvordan det kan være en interessekonflikt mellom det Apple og Google ønsker fra AR på nettet.

Dette er bare mine notater fra å prøve å grok alt. Det må være mye mer nyanser enn det lille jeg vet om det så langt. Jeg er sikker på at noen smartere kan knytte en penere sløyfe rundt <model> i kommentarfeltet. 😉

Og mens vi snakker Safari Technology Preview, 162 ble nettopp sluppet her om dagen og det muliggjør CSS-hekking og CSS relativ fargesyntaks.

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
• kilde: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/