AR, VR en een model voor 3D in HTML

Ergens verscholen in de Safari Technology Preview 161 release-opmerkingen is een ogenschijnlijk onschuldige regel over ondersteuning voor een nieuw HTML-element en attribuut:

Ondersteuning toegevoegd voor <model src> en eer <source type> attributen ([e-mail beveiligd])

Telkens wanneer ik een element zie dat ik niet herken, gaat mijn geest er meteen naar toe Hé! Nieuw voor mij, maar waarschijnlijk oud nieuws voor iedereen. Het is een slechte houding, ik weet het, want het zou net zo goed kunnen zijn:

• Hmm, lijkt op een of ander eigen experiment.
• Wauw, echt iets nieuws!

De waarheid is dat het alle drie zo'n beetje is.

Het is een evoluerend concept

Zoals in, het eerste enigszins officieel klinkende ding dat ik tegenkwam <model> was niet in de W3C-specificatie maar in WebKit's opslagplaats voor uitleggers. Het enige dat in de README staat, is een gigantische opmerking uit 2021 dat “The <model> element is verplaatst naar de Immersive Web CG.” Ik stond op het punt om over te springen, maar mijn oog viel op de HistoryAndEvolution.md bestand met een mooi overzicht van de vroege context op het <model> idee:

De <model> element is geboren uit de wens om de volgende stap te zetten en de ervaring van Safari's integratie met iOS's te verbeteren AR Snel kijken kenmerk.

Ik moest naar de splash-pagina van Apple kijken voor AR Quick Look. Kent u de nieuwe functie die sommige winkels hebben waarmee u een 3D-weergave van een product in uw eigen huis kunt transponeren met behulp van de camera van uw telefoon? Dat is het soort dingen waar we het over hebben, en Apple koppelt een mooie casestudy van het Metropolitan Museum of Art aan elkaar.

Zoals ik het begrijp vanuit deze beperkte context:

• Laat een vallen <model> element in het document.
• Voeg een extern bronbestand toe, bijv <model src="assets/example.usdz">.

Het oorspronkelijke voorstel is van de Immersive Web Committee Group

Dat is de ploeg kijken maken Virtual Reality (VR) en Augmented Reality (AR) onderdeel van het web. Apple koppelde hun repo aan elkaar, dus ik waagde de sprong en ging direct naar de uitlegger. Dit is niet de specificatie of zoiets, maar het oorspronkelijke voorstel. Een veel betere definitie van het element!

Met HTML kunnen veel mediatypen worden weergegeven via elementen zoals <img>, <picture>of <video>, maar het biedt geen declaratieve manier om 3D-inhoud rechtstreeks weer te geven. Het insluiten van 3D-inhoud in een pagina is relatief omslachtig en is afhankelijk van scripting <canvas> element. Wij vinden dat het tijd is om 3D-modellen op gelijke voet te stellen met andere, reeds ondersteunde, mediatypes.

[...]

De HTML <model> element heeft tot doel een website in staat te stellen interactieve 3D-modellen net zo gemakkelijk in te sluiten als andere visuele media. Van modellen wordt verwacht dat ze worden gemaakt door 3D-ontwerptools of dynamisch worden gegenereerd, maar dat ze door de server als een op zichzelf staande bron worden gebruikt.

Het basisvoorbeeld trekt dit samen. Het voelt echt als de <video> or <picture> elementen:

<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? Niet het type bestanden dat normaal gesproken op mijn bureau ligt. Ik denk dat ik die en andere bestandstypen moet opfrissen <model> zou kunnen ondersteunen. Nogmaals, dit alles is slechts het oorspronkelijke voorstel.

Het conceptvoorstel is nog niet helemaal uitgedoofd

Maar het doet een mooi overzicht geven van waar dingen zouden kunnen gaan:

• Een model toevoegen aan een document
• Interactiviteit mogelijk maken
• Ondersteuning van meerdere formaten
• Terugvalinhoud aanbieden
• Toegankelijk maken

Er valt veel uit te zoeken. De meeste van wat er is, zijn gedocumenteerde problemen die moeten worden aangepakt. Het werpt echter meer licht op <model> zoals voorgestelde attributen die ervoor zorgen dat het gelijk aanvoelt meer als <video> zoals autoplay, controls, loop, muted, poster, Etc.

Het gaat nog verder terug

De allereerste vermelding van 3D-modellering die ik vond was Het bericht van Keith Clark uit 2018 waarin hij een prototype maakt van een aangepast element genaamd <x-model>. Hij beschrijft het als "een tijdelijke aanduiding die toegang biedt tot de DOM en CSSOM" waar het laden en weergeven wordt gedaan three.js.

Keith's idee wordt gevolgd door de <model-viewer> onderdeel dat Joe Medley in 2020 deelde (en een volgende -update eraan). Er is zelfs een startpagina ervoor en het is leuk om Neil Armstrong door de ruimte te slepen.

Misschien is het gewoon een experiment?

Ik bedoel, de ontwerpspecificatie is nog niet uitgewerkt. Apple lijkt bereid mee te spelen dankzij de aankondiging van Safari TP 161. Dat is volkomen logisch gegeven hoe optimistisch Apple is over AR Als geheel. (Apple-bril, iemand?)

Google lijkt een voet tussen de deur te hebben, zij het aan de kant van de webcomponenten. Het is gemakkelijk in te zien hoe er een belangenconflict kan zijn tussen wat Apple en Google willen van AR op internet.

Dit zijn allemaal slechts mijn aantekeningen van het proberen om alles te groken. Er moet veel meer nuance in zitten dan het weinige dat ik er tot nu toe over weet. Ik weet zeker dat iemand die slimmer is een mooiere strik kan knopen <model> in de commentaren. 😉

En terwijl we het hebben over Safari Technology Preview, 162 is onlangs vrijgegeven en het maakt het mogelijk CSS nesten en CSS relatieve kleurensyntaxis.

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
• Bron: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/