Code

AR, VR e un modello per 3D in HTML

Data e ora: 27 gennaio 2023 9: 15 AM
Nodo sorgente: 2372624

Ripubblicato da Platone

Nascosto da qualche parte nel Safari Technology Preview 161 note di rilascio è una riga apparentemente innocua sul supporto per un nuovo elemento e attributo HTML:

Aggiunto supporto per <model src> e onore <source type> attributi ([email protected])

Ogni volta che vedo menzione di qualche elemento che non riconosco, la mia mente va dritta a Eh! Nuovo per me, ma probabilmente vecchie notizie per tutti gli altri. È una cattiva postura, lo so, come potrebbe facilmente essere:

Hmm, sembra un esperimento proprietario.
Wow, una cosa davvero nuova!

La verità è che è più o meno tutti e tre.

È un concetto in evoluzione

Come in, la prima cosa dal suono un po' ufficiale che ho trovato su <model> non era nelle specifiche del W3C ma in Il repository di WebKit per gli esplicatori. Tutto ciò che c'è nel README è una nota gigante del 2021 che “The <model> l'elemento è passato a Immersive Web CG. Stavo per saltarci sopra ma il mio occhio ha catturato il HistoryAndEvolution.md file che ha una bella carrellata del contesto iniziale sul file <model> concetto:

I <model> elemento è nato dal desiderio di fare il passo successivo e migliorare l'esperienza dell'integrazione di Safari con iOS AR Quick Look caratteristica.

Ho dovuto guardare la splash page di Apple per AR Quick Look. Conosci la nuova funzionalità che alcuni negozi hanno in cui puoi trasporre un rendering 3D di un prodotto a casa tua usando la fotocamera del tuo telefono? Questo è il genere di cose di cui stiamo parlando, e Apple collega un bel case study del Metropolitan Museum of Art.

A quanto ho capito da questo contesto limitato:

Rilasciare a <model> elemento nel documento.
Aggiungi un file di origine esterno, ad es <model src="assets/example.usdz">.

La proposta originale proviene dall'Immersive Web Committee Group

Questa è la squadra cercando di rendere la Realtà Virtuale (VR) e la Realtà Aumentata (AR) parte del web. Apple ha collegato il loro repository, quindi ho fatto il salto e sono andato direttamente al spiegatore. Questa non è la specifica o altro, ma la proposta originale. Una definizione molto migliore dell'elemento!

L'HTML consente la visualizzazione di molti tipi di media attraverso elementi come <img>, <picture>, o <video>, ma non fornisce un modo dichiarativo per visualizzare direttamente i contenuti 3D. L'incorporamento di contenuto 3D all'interno di una pagina è relativamente ingombrante e si basa sullo scripting <canvas> elemento. Riteniamo che sia giunto il momento di mettere i modelli 3D su un piano di parità con altri tipi di media già supportati.

[...]

HTML <model> element mira a consentire a un sito Web di incorporare modelli 3D interattivi in modo conveniente come qualsiasi altro supporto visivo. I modelli dovrebbero essere creati da strumenti di creazione 3D o generati dinamicamente, ma serviti come risorsa autonoma dal server.

L'esempio di base lo mette insieme. Sembra davvero il <video> or <picture> elementi:

<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? Non il tipo di file che di solito attraversano la mia scrivania. Immagino che dovrò rispolverare quelli e qualsiasi altro tipo di file che <model> potrebbe supportare. Ancora una volta, tutto questo è semplicemente la proposta originale.

La bozza della proposta non è stata ancora stroncata

Ma lo fa fornire un bel contorno di dove potrebbero andare le cose:

Aggiunta di un modello a un documento
Abilitare l'interattività
Supporto di più formati
Fornire contenuti di riserva
Rendendolo accessibile

C'è molto da capire. La maggior parte di ciò che c'è sono problemi documentati che devono essere affrontati. Tuttavia, fa più luce <model> come gli attributi proposti che lo fanno sentire uniforme Scopri di più piace <video> ad esempio autoplay, controls, loop, muted, poster, ecc.

Torna ancora più indietro

La primissima menzione della modellazione 3D che ho trovato è stata Il post del 2018 di Keith Clark in cui prototipa un elemento personalizzato chiamato <x-model>. Lo descrive come "un segnaposto che fornisce l'accesso al DOM e al CSSOM" in cui vengono eseguiti il caricamento e il rendering tre.js.

L'idea di Keith è seguita dal <model-viewer> componente Joe Medley condiviso nel 2020 (e un successivo update ad esso). C'è anche un home page per esso ed è divertente trascinare Neil Armstrong nello spazio.

È forse solo un esperimento?

Voglio dire, la bozza delle specifiche non è stata arricchita. Apple sembra disposta a giocare a palla grazie all'annuncio di Safari TP 161. Questo ha un senso totale dato quanto Apple è rialzista su AR nel complesso. (Bicchieri di mela, qualcuno?)

Google sembra avere il piede nella porta, anche se sul lato dei componenti Web delle cose. È facile vedere come potrebbe esserci un conflitto di interessi tra ciò che Apple e Google vogliono dall'AR sul web.

Questi sono solo i miei appunti dal tentativo di groccare tutto. Devono esserci molte più sfumature rispetto a quel poco che ne so finora. Sono sicuro che qualcuno più intelligente può legare un fiocco più ordinato <model> nei commenti. 😉

E mentre parliamo dell'anteprima della tecnologia Safari, 162 appena rilasciato l'altro giorno e lo abilita Nidificazione CSS e la Sintassi relativa ai colori CSS.