Κρυμμένο κάπου στο Σημειώσεις έκδοσης Safari Technology Preview 161 είναι μια φαινομενικά αθώα γραμμή σχετικά με την υποστήριξη για ένα νέο στοιχείο και χαρακτηριστικό HTML:

Προστέθηκε υποστήριξη για <model src> και τιμή <source type> ιδιότητες ([προστασία μέσω email])

Κάθε φορά που βλέπω να αναφέρεται κάποιο στοιχείο που δεν αναγνωρίζω, το μυαλό μου πηγαίνει κατευθείαν στο Χα! Νέα για μένα, αλλά πιθανώς παλιά νέα για όλους τους άλλους. Είναι κακή στάση, το ξέρω, όπως θα μπορούσε να είναι το ίδιο εύκολα:

• Χμμ, μοιάζει με ιδιόκτητο πείραμα.
• Ουάου, ένα πραγματικά νέο πράγμα!

Η αλήθεια είναι ότι είναι και τα τρία.

Είναι μια εξελισσόμενη έννοια

Όπως και στο, το πρώτο κάπως επίσημο πράγμα που βρήκα <model> δεν ήταν στις προδιαγραφές του W3C αλλά στο Αποθήκη WebKit για επεξηγητές. Το μόνο που υπάρχει στο README είναι μια γιγάντια σημείωση από το 2021 ότι «Το <model> Το στοιχείο έχει μετακινηθεί στο Immersive Web CG." Ήμουν έτοιμος να πηδήξω πάνω αλλά το μάτι μου τράβηξε το HistoryAndEvolution.md αρχείο το οποίο έχει μια ωραία σύνοψη του αρχικού πλαισίου για το <model> έννοια:

Η <model> στοιχείο γεννήθηκε από την επιθυμία να κάνει το επόμενο βήμα και να βελτιώσει την εμπειρία της ενσωμάτωσης του Safari με το iOS AR Quick Look χαρακτηριστικό.

Έπρεπε να κοιτάξω τη σελίδα splash της Apple για το AR Quick Look. Γνωρίζετε τη νέα δυνατότητα που διαθέτουν ορισμένα καταστήματα όπου μπορείτε να μεταφέρετε μια τρισδιάστατη απόδοση ενός προϊόντος στο σπίτι σας χρησιμοποιώντας την κάμερα του τηλεφώνου σας; Αυτά είναι τα πράγματα που μιλάμε, και Η Apple συνδέει μια ωραία μελέτη περίπτωσης από το Μητροπολιτικό Μουσείο Τέχνης.

Όπως καταλαβαίνω από αυτό το περιορισμένο πλαίσιο:

• Ρίξτε α <model> στοιχείο στο έγγραφο.
• Προσθέστε ένα εξωτερικό αρχείο προέλευσης, π.χ <model src="assets/example.usdz">.

Η αρχική πρόταση προέρχεται από την ομάδα Immersive Web Committee

Αυτή είναι η ομάδα αναζητώντας κάνουν την Εικονική Πραγματικότητα (VR) και την Επαυξημένη Πραγματικότητα (AR) μέρος του ιστού. Η Apple συνέδεσε το αποθετήριο της, οπότε έκανα το άλμα και πήγα κατευθείαν στον εξηγητή. Αυτή δεν είναι η προδιαγραφή ή τίποτα, αλλά η αρχική πρόταση. Ένας πολύ καλύτερος ορισμός του στοιχείου!

Η HTML επιτρέπει την εμφάνιση πολλών τύπων μέσων μέσω στοιχείων όπως <img>, <picture>, ή <video>, αλλά δεν παρέχει δηλωτικό τρόπο για την απευθείας εμφάνιση τρισδιάστατου περιεχομένου. Η ενσωμάτωση τρισδιάστατου περιεχομένου σε μια σελίδα είναι σχετικά δυσκίνητη και βασίζεται στη δέσμη ενεργειών του <canvas> στοιχείο. Πιστεύουμε ότι είναι καιρός να τεθούν τα τρισδιάστατα μοντέλα σε ίση βάση με άλλους, ήδη υποστηριζόμενους, τύπους μέσων.

[...]

Το HTML <model> Το στοιχείο έχει ως στόχο να επιτρέψει σε έναν ιστότοπο να ενσωματώνει διαδραστικά τρισδιάστατα μοντέλα τόσο βολικά όσο οποιοδήποτε άλλο οπτικό μέσο. Τα μοντέλα αναμένεται να δημιουργούνται από εργαλεία συγγραφής 3D ή να δημιουργούνται δυναμικά, αλλά να χρησιμεύουν ως αυτόνομος πόρος από τον διακομιστή.

Το βασικό παράδειγμα συνδυάζει αυτό. Αισθάνεται πραγματικά σαν το <video> or <picture> στοιχεία:

<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? Όχι ο τύπος των αρχείων που συνήθως διασχίζουν το γραφείο μου. Υποθέτω ότι θα χρειαστεί να αναλύσω αυτούς και άλλους τύπους αρχείων <model> μπορεί να υποστηρίξει. Και πάλι, όλα αυτά είναι απλώς η αρχική πρόταση.

Το προσχέδιο της πρότασης δεν έχει ακόμη τελειώσει

Αλλά το κάνει παρέχει ένα ωραίο περίγραμμα για το πού θα μπορούσαν να πάνε τα πράγματα:

• Προσθήκη μοντέλου σε έγγραφο
• Ενεργοποίηση διαδραστικότητας
• Υποστήριξη πολλαπλών μορφών
• Παροχή εναλλακτικού περιεχομένου
• Κάνοντάς το προσβάσιμο

Υπάρχουν πολλά να καταλάβουμε. Τα περισσότερα από αυτά που υπάρχουν είναι τεκμηριωμένα ζητήματα που χρήζουν αντιμετώπισης. Ωστόσο, ρίχνει περισσότερο φως <model> σαν προτεινόμενα χαρακτηριστικά που το κάνουν να νιώθει ομοιόμορφο περισσότερο Μου αρέσει <video> όπως autoplay, controls, loop, muted, posterΚ.λπ.

Πηγαίνει ακόμα πιο πίσω

Η πρώτη αναφορά στην τρισδιάστατη μοντελοποίηση που βρήκα ήταν Η ανάρτηση του Keith Clark το 2018 στο οποίο πρωτοτυπώνει ένα προσαρμοσμένο στοιχείο που ονομάζεται <x-model>. Το περιγράφει ως "ένα σύμβολο κράτησης θέσης που παρέχει πρόσβαση στο DOM και το CSSOM" όπου η φόρτωση και η απόδοση γίνεται σε τρία.js.

Η ιδέα του Keith ακολουθείται από το <model-viewer> συστατικό Joe Medley κοινόχρηστο το 2020 (και ένα επόμενο ενημέρωση σε αυτό). Υπάρχει ακόμη και ένα αρχική σελίδα για αυτό και είναι διασκεδαστικό να σέρνεις τον Neil Armstrong στο διάστημα.

Είναι ίσως απλώς ένα πείραμα;

Θέλω να πω, το σχέδιο προδιαγραφών δεν έχει διευκρινιστεί. Η Apple φαίνεται πρόθυμη να παίξει μπάλα χάρη στην ανακοίνωση του Safari TP 161. Αυτό είναι απολύτως λογικό δεδομένου πόσο ανοδική είναι η Apple στο AR ως σύνολο. (Γυαλιά της Apple, ο καθενας?)

Η Google φαίνεται να έχει το πόδι της στην πόρτα, αν και στην πλευρά των πραγμάτων Web Components. Είναι εύκολο να δούμε πώς μπορεί να υπάρχει σύγκρουση συμφερόντων μεταξύ του τι θέλουν η Apple και η Google από το AR στον ιστό.

---

Όλα αυτά είναι μόνο οι σημειώσεις μου από την προσπάθεια να τα μαλακώσω όλα. Πρέπει να έχει πολύ περισσότερες αποχρώσεις από ό,τι λίγα ξέρω για αυτό μέχρι στιγμής. Είμαι σίγουρος ότι κάποιος πιο έξυπνος μπορεί να δέσει πιο προσεγμένο φιόγκο <model> στα σχόλια. 😉

Και ενώ μιλάμε για την προεπισκόπηση τεχνολογίας Safari, Το 162 μόλις κυκλοφόρησε τις προάλλες και δίνει τη δυνατότητα Ένθεση CSS και την Σχετική χρωματική σύνταξη CSS.

• SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
• πηγή: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/