AR, VR und ein Modell für 3D in HTML

Versteckt irgendwo in der Versionshinweise zu Safari Technology Preview 161 ist eine scheinbar harmlose Zeile über die Unterstützung eines neuen HTML-Elements und -Attributs:

Unterstützung für hinzugefügt <model src> und Ehre <source type> Attribute ([E-Mail geschützt] )

Jedes Mal, wenn ich die Erwähnung eines Elements sehe, das ich nicht erkenne, gehen meine Gedanken direkt dorthin Huh! Neu für mich, aber wahrscheinlich alte Nachrichten für alle anderen. Es ist eine schlechte Haltung, ich weiß, wie es genauso gut sein könnte:

• Hmm, sieht aus wie ein eigenes Experiment.
• Wow, eine wirklich neue Sache!

Die Wahrheit ist, es sind irgendwie alle drei.

Es ist ein sich entwickelndes Konzept

Wie in, das erste etwas offiziell klingende Ding, das ich gefunden habe <model> war nicht in der W3C-Spezifikation, aber in WebKits Repo für Erklärer. Alles, was in der README steht, ist eine riesige Notiz aus dem Jahr 2021, dass „The <model> element wurde in das Immersive Web CG verschoben.“ Ich wollte gerade hinüberspringen, aber mein Blick fiel auf HistoryAndEvolution.md Datei, die einen schönen Überblick über den frühen Kontext auf der <model> Konzept:

Das <model> Element wurde aus dem Wunsch geboren, den nächsten Schritt zu tun und die Erfahrung der Integration von Safari mit iOS zu verbessern AR Schnellansicht -Funktion

Ich musste mir die Begrüßungsseite von Apple für AR Quick Look ansehen. Sie kennen die neue Funktion einiger Geschäfte, mit der Sie mit Ihrer Telefonkamera eine 3D-Darstellung eines Produkts in Ihrem eigenen Zuhause übertragen können? Das ist die Art von Sachen, über die wir reden, und Apple verlinkt eine schöne Fallstudie aus dem Metropolitan Museum of Art.

Wie ich es aus diesem begrenzten Kontext verstehe:

• Lass ein <model> Element im Dokument.
• Fügen Sie eine externe Quelldatei hinzu, z <model src="assets/example.usdz">.

Der ursprüngliche Vorschlag stammt von der Immersive Web Committee Group

Das ist das Team suchen machen Virtual Reality (VR) und Augmented Reality (AR) Teil des Webs. Apple hat ihr Repo verbunden, also habe ich den Sprung gemacht und bin gegangen direkt zum Erklärer. Dies ist nicht die Spezifikation oder so etwas, sondern der ursprüngliche Vorschlag. Eine viel bessere Definition des Elements!

HTML ermöglicht die Anzeige vieler Medientypen durch Elemente wie z <img>, <picture>, oder <video>, aber es bietet keine deklarative Möglichkeit, 3D-Inhalte direkt anzuzeigen. Das Einbetten von 3D-Inhalten in eine Seite ist vergleichsweise umständlich und erfordert Skripte <canvas> Element. Wir glauben, dass es an der Zeit ist, 3D-Modelle mit anderen, bereits unterstützten Medientypen gleichzustellen.

[...]

Der HTML <model> element zielt darauf ab, es einer Website zu ermöglichen, interaktive 3D-Modelle so bequem wie jedes andere visuelle Medium einzubetten. Es wird erwartet, dass Modelle von 3D-Authoring-Tools erstellt oder dynamisch generiert werden, aber vom Server als eigenständige Ressource bereitgestellt werden.

Das grundlegende Beispiel zieht dies zusammen. Es fühlt sich wirklich so an <video> or <picture> Elemente:

<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? Nicht die Art von Dateien, die normalerweise meinen Schreibtisch überqueren. Ich schätze, ich muss diese und alle anderen Dateitypen auffrischen <model> könnte unterstützen. Auch dies alles ist nur der ursprüngliche Vorschlag.

Der Vorschlagsentwurf ist noch nicht ganz fertig

Aber es tut einen schönen Umriss geben wohin die Dinge möglicherweise gehen könnten:

• Hinzufügen eines Modells zu einem Dokument
• Interaktivität ermöglichen
• Unterstützung mehrerer Formate
• Bereitstellen von Fallback-Inhalten
• Zugänglich machen

Es gibt viel herauszufinden. Das meiste, was es gibt, sind dokumentierte Probleme, die angegangen werden müssen. Es bringt jedoch mehr Licht ins Dunkel <model> wie vorgeschlagene Attribute, die es gleichmäßig erscheinen lassen mehr Gefällt mir <video> sowie autoplay, controls, loop, muted, poster, usw.

Es geht sogar noch weiter zurück

Die allererste Erwähnung von 3D-Modellierung, die ich gefunden habe, war Keith Clarks Post von 2018 in dem er ein benutzerdefiniertes Element namens prototypisiert <x-model>. Er beschreibt es als „einen Platzhalter, der Zugriff auf DOM und CSSOM bietet“, wo das Laden und Rendern erfolgt drei .js.

Keiths Idee folgt der <model-viewer> Komponente, die Joe Medley im Jahr 2020 geteilt hat (und eine nachfolgende Aktualisierung dazu). Es gibt sogar eine Homepage dazu und es macht Spaß, Neil Armstrong durch den Weltraum zu ziehen.

Es ist möglicherweise nur ein Experiment?

Ich meine, der Entwurf der Spezifikation wurde noch nicht ausgearbeitet. Apple scheint bereit zu sein, dank der Safari TP 161-Ankündigung mitzuspielen. Das ergibt absolut Sinn wie bullish Apple auf AR ist als Ganzes. (Apple Gläser, jemand?)

Google scheint seinen Fuß in der Tür zu haben, wenn auch auf der Seite der Webkomponenten. Es ist leicht zu erkennen, wie es zu einem Interessenkonflikt zwischen dem kommen kann, was Apple und Google von AR im Web erwarten.

Dies sind alles nur meine Notizen von dem Versuch, alles zu groken. Es muss viel mehr Nuancen geben als das, was ich bisher darüber weiß. Ich bin sicher, jemand, der klüger ist, kann eine schönere Schleife binden <model> in den Kommentaren. 😉

Und während wir gerade über Safari Technology Preview sprechen, 162 wurde gerade neulich veröffentlicht und es ermöglicht CSS-Verschachtelung und dem CSS relative Farbsyntax.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/