AR, VR och en modell för 3D i HTML

Nedstoppad någonstans i Safari Technology Preview 161 versionsinformation är en till synes ofarlig rad om stöd för ett nytt HTML-element och attribut:

Lagt till stöd för <model src> och ära <source type> attribut ([e-postskyddad])

Varje gång jag ser omnämnande av något element som jag inte känner igen, går mitt sinne direkt till Va! Nytt för mig, men förmodligen gamla nyheter för alla andra. Det är dålig hållning, jag vet, eftersom det lika gärna kan vara:

• Hmm, ser ut som något eget experiment.
• Wow, en helt ny grej!

Sanningen är att det är typ alla tre.

Det är ett koncept under utveckling

Som i, det första något officiellt klingande jag hittade på <model> fanns inte i W3C-specifikationen men i WebKits repo för förklarare. Allt som finns i README är en gigantisk anteckning från 2021 om att "The <model> elementet har flyttats till Immersive Web CG." Jag höll på att hoppa över men mitt öga fångade det HistoryAndEvolution.md fil som har en bra genomgång av tidiga sammanhang på <model> begrepp:

Smakämnen <model> elementet föddes ur en önskan att ta nästa steg och förbättra upplevelsen av Safaris integration med iOS AR Snabb titt särdrag.

Jag var tvungen att titta på Apples splash-sida för AR Quick Look. Du vet den nya funktionen som vissa butiker har där du kan överföra en 3D-rendering av en produkt i ditt eget hem med hjälp av din telefonkamera? Det är den sortens grejer vi pratar om, och Apple länkar till en trevlig fallstudie från Metropolitan Museum of Art.

Som jag förstår det från detta begränsade sammanhang:

• Släpp a <model> element i dokumentet.
• Lägg till en extern källfil, t.ex <model src="assets/example.usdz">.

Det ursprungliga förslaget är från Immersive Web Committee Group

Det är laget ser gör Virtual Reality (VR) och Augmented Reality (AR) till en del av webben. Apple länkade deras repo, så jag hoppade och gick direkt till förklararen. Detta är inte specen eller något, utan det ursprungliga förslaget. En mycket bättre definition av elementet!

HTML tillåter visning av många mediatyper genom element som t.ex <img>, <picture>, eller <video>, men det ger inte ett deklarativt sätt att direkt visa 3D-innehåll. Att bädda in 3D-innehåll på en sida är jämförelsevis besvärligt och bygger på skript <canvas> element. Vi anser att det är dags att ställa 3D-modeller på samma villkor med andra, redan stödda, mediatyper.

[...]

HTML <model> element syftar till att tillåta en webbplats att bädda in interaktiva 3D-modeller lika bekvämt som alla andra visuella medier. Modeller förväntas skapas av 3D-författarverktyg eller genereras dynamiskt, men tjänas som en fristående resurs av servern.

Grundexemplet drar ihop detta. Det känns verkligen som <video> or <picture> element:

<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? Inte den typ av filer som vanligtvis passerar mitt skrivbord. Antar att jag måste fräscha upp de och andra filtyper som <model> kan stödja. Återigen, allt detta är bara det ursprungliga förslaget.

Utkastet till förslaget är inte helt klart ännu

Men det gör det ge en fin kontur om var saker kan tänkas ta vägen:

• Lägga till en modell i ett dokument
• Möjliggör interaktivitet
• Stöder flera format
• Tillhandahåller reservinnehåll
• Att göra det tillgängligt

Det finns mycket att ta reda på. Det mesta som finns är dokumenterade problem som behöver åtgärdas. Det kastar dock mer ljus över <model> som föreslagna attribut som får det att kännas jämnt mer tycka om <video> såsom autoplay, controls, loop, muted, posterEtc.

Det går ännu längre tillbaka

Det allra tidigaste omnämnandet av 3D-modellering jag hittade var Keith Clarks inlägg 2018 där han prototyper ett anpassat element som kallas <x-model>. Han beskriver det som "en platshållare som ger åtkomst till DOM och CSSOM" där laddningen och renderingen görs i Three.js.

Keiths idé följs av <model-viewer> komponent Joe Medley delade 2020 (och en efterföljande uppdatering till det). Det finns till och med en hemsida för det och det är kul att dra runt Neil Armstrong i rymden.

Det är kanske bara ett experiment?

Jag menar, utkastet till specifikationen har inte utvecklats. Apple verkar villigt att spela boll tack vare Safari TP 161-meddelandet. Det är helt vettigt givet hur hausse Apple är på AR som helhet. (Äppleglasögon, någon?)

Google verkar ha foten i dörren, om än på webbkomponentsidan. Det är lätt att se hur det kan finnas en intressekonflikt mellan vad Apple och Google vill ha från AR på webben.

Dessa är alla bara mina anteckningar från att försöka groka allt. Det måste finnas mycket mer nyans i det än det lilla jag vet om det hittills. Jag är säker på att någon smartare kan knyta en snyggare rosett <model> i kommentarerna. 😉

Och medan vi pratar om Safari Technology Preview, 162 släpptes precis häromdagen och det möjliggör CSS-kapsling och CSS relativ färgsyntax.

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/