Generatiivinen tiedustelu

AR, VR ja malli 3D:lle HTML:ssä

Treffi:

Piilossa jonnekin Safari Technology Preview 161 julkaisutiedot on näennäisen harmiton rivi uuden HTML-elementin ja attribuutin tuesta:

Lisätty tuki kohteelle <model src> ja kunnia <source type> attribuutit ([sähköposti suojattu])

Aina kun näen maininnan jostakin elementistä, jota en tunnista, mieleni menee suoraan siihen Huh! Uutta minulle, mutta luultavasti vanhoja uutisia kaikille muille. Se on huono asento, tiedän, koska se voisi yhtä helposti olla:

  • Hmm, näyttää joltain omalta kokeelta.
  • Vau, todella uusi juttu!

Totuus on, se on tavallaan kaikki kolme.

Se on kehittyvä käsite

Kuten, ensimmäinen hieman viralliselta kuulostava asia, jonka löysin <model> ei ollut W3C-spesifikaatiossa, mutta sisällä WebKitin repo selittäjille. README:ssä on vain jättimäinen muistiinpano vuodelta 2021, että "The <model> elementti on siirtynyt Immersive Web CG:hen." Olin hyppäämässä yli, mutta katseeni osui siihen HistoryAndEvolution.md tiedosto, jossa on mukava yhteenveto varhaisesta kontekstista <model> konsepti:

<model> elementti syntyi halusta ottaa seuraava askel ja parantaa kokemusta Safarin integroinnista iOS:n kanssa AR Pikakatselu ominaisuus.

Minun piti katsoa Applen aloitussivulta AR Quick Lookia varten. Tiedätkö, että joissakin kaupoissa on uusi ominaisuus, jossa voit transponoida tuotteen 3D-mallinnuksen omassa kodissasi puhelimen kameran avulla? Juuri sellaisista asioista puhumme, ja Apple linkittää kivan tapaustutkimuksen Metropolitan Museum of Artista.

Kuten ymmärrän tämän rajoitetun kontekstin perusteella:

  • Pudota a <model> elementti asiakirjassa.
  • Lisää ulkoinen lähdetiedosto, esim <model src="assets/example.usdz">.

Alkuperäinen ehdotus on Immersive Web Committee Groupilta

Se on joukkue virtuaalitodellisuus (VR) ja lisätty todellisuus (AR) osana verkkoa. Apple yhdisti reponsa, joten hyppäsin ja menin suoraan selittäjälle. Tämä ei ole tekninen tai mikään muu, vaan alkuperäinen ehdotus. Paljon parempi määritelmä elementille!

HTML mahdollistaa useiden mediatyyppien näyttämisen elementtien, kuten esim <img><picture>tai <video>, mutta se ei tarjoa deklaratiivista tapaa näyttää 3D-sisältöä suoraan. 3D-sisällön upottaminen sivulle on suhteellisen hankalaa ja edellyttää <canvas> elementti. Uskomme, että on aika asettaa 3D-mallit tasa-arvoon muiden, jo tuettujen mediatyyppien kanssa.

[...]

HTML <model> elementin tarkoituksena on antaa verkkosivustolle upottaa interaktiivisia 3D-malleja yhtä kätevästi kuin mikä tahansa muu visuaalinen media. Mallien odotetaan luotavan 3D-luontityökaluilla tai dynaamisesti, mutta palvelin palvelee niitä itsenäisenä resurssina.

Perusesimerkki yhdistää tämän. Se todella tuntuu <video> or <picture> elementit:

<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? Ei sellaisia ​​tiedostoja, jotka tavallisesti kulkevat työpöydälläni. Minun täytyy päivittää niitä ja kaikkia muita tiedostotyyppejä <model> saattaa tukea. Jälleen tämä kaikki on vain alkuperäinen ehdotus.

Ehdotusluonnos ei ole vielä valmis

Mutta se tekee tarjoavat kauniin ääriviivan mihin asiat voisivat mennä:

  • Mallin lisääminen asiakirjaan
  • Vuorovaikutteisuuden mahdollistaminen
  • Tukee useita formaatteja
  • Varasisällön tarjoaminen
  • Sen tekeminen saataville

On paljon selvitettävää. Suurin osa niistä on dokumentoituja ongelmia, jotka kaipaavat käsittelyä. Se kuitenkin valaisee enemmän <model> kuten ehdotetut attribuutit, jotka saavat sen tuntumaan tasaiselta lisää pitää <video> kuten autoplay, controls, loop, muted, poster, Jne

Se palaa vielä pidemmälle

Varhaisin maininta 3D-mallinnuksesta, jonka löysin, oli Keith Clarkin vuoden 2018 postaus jossa hän prototyypit mukautetun elementin nimeltä <x-model>. Hän kuvailee sitä "paikkamerkiksi, joka tarjoaa pääsyn DOM:iin ja CSSOM:iin", jossa lataus ja renderöinti tapahtuu kolme.js.

Keithin ideaa seuraa <model-viewer> Joe Medley jaettu komponentti vuonna 2020 (ja seuraava päivitys siihen). Siellä on jopa a sen kotisivu ja on hauskaa vetää Neil Armstrongia avaruudessa.

Ehkä se on vain kokeilu?

Tarkoitan, että luonnosta ei ole tarkennettu. Apple näyttää olevan halukas pelaamaan palloa Safari TP 161 -ilmoituksen ansiosta. Siinä on täysin järkeä annettu kuinka nouseva Apple on AR:ssä kokonaisena. (Applen lasit, kukaan?)

Google näyttää olevan jalkansa oven takana, vaikkakin verkkokomponenttien puolella. On helppo nähdä, miten Applen ja Googlen AR:lta Webissä toivomusten välillä voi olla eturistiriita.


Nämä ovat kaikki vain muistiinpanojani yrittäessäni saada kaiken irti. Siinä täytyy olla paljon enemmän vivahteita kuin se, mitä tiedän siitä tähän mennessä. Olen varma, että joku viisaampi voi sitoa siistimmän rusetin ympärilleen <model> kommenteissa. 😉

Ja kun puhumme Safari Technology Previewista, 162 julkaistiin juuri toissapäivänä ja se mahdollistaa CSS sisäkkäinen ja CSS:n suhteellinen värisyntaksi.

spot_img

Uusin älykkyys

spot_img

Keskustele kanssamme

Hei siellä! Kuinka voin olla avuksi?