Erlebnisse mit Augmented Reality im Web schaffen
Okt. 20, 2020
--
Erlebnisse mit Augmented Reality im Web schaffen

Erlebnisse mit Augmented Reality im Web schaffen

Starten Sie mit Magnolia

Unser Expertenteam zeigt Ihnen gerne, was Magnolia kann.

Jetzt Demo buchen

Augmented Reality (AR) ist durch den Minicomputer in der Hosentasche, das Telefon, im Mainstream angekommen. Die "Killer-App" für AR ist eine unglaublich realitätsnahe Vorschau. Wenn man ein Produkt kauft, möchte man genau sehen, wie es aussieht und wie groß es wirklich ist. AR kann einen noch besseren Eindruck von einem Produkt vermitteln, als wenn man es im Laden sieht, denn man kann das Produkt in seinem eigenen Zuhause platzieren. Sie können es wirklich ausprobieren. Unmittelbar.

Aber abgesehen davon macht es einfach Spaß. Es ist eine Freude, etwas Neues auf dem Wohnzimmertisch stehen zu sehen, das eigentlich gar nicht da ist. Und es ist auch eine Freude, es Freunden, Kollegen und Kunden zu zeigen. Wie Arthur C. Clark bekanntlich sagte: "Jede hinreichend fortgeschrittene Technologie ist von Magie nicht zu unterscheiden". Wer ist also der Zauberer? Du bist es, mein Freund der Webtechnologie-Codierung!

QR Code

Das Beispiel zeigt ein interaktives 3D-Modell einer Schatztruhe im Browser eines beliebigen Geräts an. Auf AR-fähigen Geräten sehen Sie ein Anzeigesymbol zum Starten von AR. Wenn Sie darauf klicken, übernimmt das systemeigene AR-System des Geräts und fordert Sie auf, Ihre Umgebung zu scannen. Sie können dann das 3D-Modell der Schatztruhe direkt vor Ihnen platzieren.

Der Code

Das Tolle an diesem Trick ist, dass er so einfach zu bewerkstelligen ist. Das liegt an der erstklassigen Geräte- und Browserunterstützung von Apple und Google sowie an dem großartigen Model-Viewer-Skript von Google.

Der eingebettete HTML-Code ist wirklich einfach:

Java
  <model-viewer 
    poster="3dmodles/chest.png"
    src="3dmodels/chest.glb"
    ios-src="3dmodels/chest.usdz"
    alt="Chest"
    shadow-intensity="1"
    camera-controls
    ar ar-modes="webxr scene-viewer quick-look" ar-scale="auto"
    quick-look-browsers="safari chrome"
    auto-rotate 
>
</model-viewer>

Der Browser kümmert sich um den Rest.

Die folgende Datei enthält den vollständigen Quellcode einschließlich der benötigten Skripte:

Die 3D-Modelle

Der schwierigste Teil ist das 3D-Modell. Android unterstützt nur die Dateiformate .gltf und .glb, während Apple nur das .usdz-Format unterstützt. Das ist dasselbe wie bei Videos im Internet vor ein paar Jahren, wo man immer mehrere Versionen eines Videos bereitstellen musste, da nicht alle Browser dasselbe Format unterstützten.

Aber das ist nur ein Ärgernis und lässt sich im Moment leicht umgehen. Es gibt kostenpflichtige Dienste und Tools, um 3D-Modelle zwischen Formaten zu konvertieren.

Tipp: Sketchfab ist ein großartiger Ort, um kostenlose und bezahlte Modelle zu finden - und alle Modelle können in beiden benötigten Formaten heruntergeladen werden!

Sketchfab gibt Ihnen jedoch einen Ordner mit einer Reihe von Dateien für die .gltf-Datei, was bei der Arbeit unpraktisch sein kann. Sie können diese in eine einzige .glb-Datei packen, zum Beispiel mit dem glb-packer-Tool.

Integrieren Sie AR in ein CMS

Wenn Sie über ein flexibles CMS wie Magnolia verfügen, können Sie einen eigenen Zaubertrick entwickeln, indem Sie Ihren Inhaltsautoren und anderen technisch nicht versierten Benutzern die Möglichkeit geben, AR-Funktionen zu ihren Websites und mobilen Anwendungen hinzuzufügen.

Magnolia und einige andere CMS bieten einen visuellen "Page Builder", mit dem Autoren beliebige Komponenten auf einer Seite ablegen können. Ich werde zeigen, wie Sie dies in Magnolia tun können, aber die gleichen Prinzipien gelten auch für andere flexible CMS.

AR-Inhaltstyp

Befolgen wir von Anfang an die bewährten Verfahren. Was ist, wenn ein Autor eine AR-Liege auf vielen Seiten platzieren möchte, nicht nur auf einer? Er möchte sie nicht überall neu konfigurieren. Dies ist ein klassischer Fall von Wiederverwendung von Inhalten.

Wir werden also einen neuen Inhaltstyp für AR-Modelle in Magnolia erstellen. Autoren können dann ihre "funky couch" in der AR-Content-App erstellen und sie überall verwenden.

Wir behandeln die 3D-Modelle selbst als Assets, genau wie Bilder, Videos, PDFs oder andere Binärformate. Der Autor muss in der AR-Inhalts-App lediglich drei Assets hochladen oder referenzieren: eine .glb-Datei für Android, eine .usdz-Datei für Apple und eine Bilddatei, die als Fallback in Browsern oder anderen Kanälen dient, die keine 3D-Darstellung unterstützen.

Sie können den vollständigen Quellcode auf GitHub finden, aber lassen Sie uns die wichtigsten Teile betrachten.

Dies ist die Definition des Inhaltstyps:

3d-models.yaml

Java
  datasource:
  workspace: 3d-models
  autoCreate: true
  
model:
  nodeType: 3d-model
  properties:
    - name: image
      type: asset
      label: Image
    - name: glb
      type: asset
      label: GLB file
    - name: usdz
      type: asset
      label: USDZ file

Es ist ganz einfach, eine App für diesen Inhaltstyp zu erstellen:

3d-models-app.yaml

Java
  !content-type:3d-models name: 3d-models-app label: 3D-Modelle  

Mit dieser App können Autoren bereits AR-Modelle erstellen.

3D Models

AR-Komponente

Jetzt werden wir eine Komponente erstellen, die es dem Autor ermöglicht, AR-Inhaltselemente in seinen Erlebnissen zu platzieren.

Die Komponente verfügt über einen Dialog, in dem der Autor das Element auswählen kann.

augmentedReality.yaml

Java
  Bezeichnung: Augmented Reality form: properties: title: label: Titel $type: textField ARmodel: label: 3D-Modell $type: linkField chooser: workbenchChooser: appName: "3d-models-app"  

Dies ist das Vorlagenskript zur dynamischen Darstellung des erforderlichen HTML:

augmentedReality.ftl (Auszug)

Java
  [#if content.ARmodel?has_content] [#assign ARmodel = cmsfn.contentById(content.ARmodel, "3d-models")] [#assign image = (ARmodel.image??)?then(damfn.getAssetLink(ARmodel.image),'')] [#assign glb = (ARmodel.glb??)?then(damfn.getAssetLink(ARmodel.glb),'')] [#assign usdz = (ARmodel.usdz??)?then(damfn.getAssetLink(ARmodel.usdz),'')]  <h2>${ARmodel.jcrName}</h2>
  
  <model-viewer [#if glb?has_content] src="${glb}" [/#if] [#if usdz?has_content] ios-src="${usdz}" [/#if] [#if image?has_content] poster="${image}" [/#if] alt="${ARmodel.jcrName}" ar ar-modes="webxr scene-viewer quick-look" ar-scale="auto" quick-look-browsers="safari chrome" auto-rotate camera-controls shadow-intensity="1" 
></model-viewer>[/#if]
3D Model Chest

Magie

Das war's. Jetzt kann ein Autor AR-Inhalte hochladen und platzieren, wo immer er will - ganz ohne Programmierung. Sie können eine Zauberschule gründen.

Probieren Sie es aus!

Dann laden Sie dieses komplette "light module" von github herunter und legen es in das Verzeichnis "light-modules":

Presto.

Über den autor

Christopher Zimmermann

Product Manager, Magnolia

Christopher ist Produktmanager bei Magnolia mit Schwerpunkt auf Erfahrung und Produktivität der Entwickler. Er half bei der Einführung des 'Light Development'-Paradigmas und konzentriert sich nun auf Headless, Hybrid Headless und die einfachere Implementierung von Integrationen. Während seiner Ausbildung in Physik an der Universität zogen ihn der Schwung und die Wildwest-Offenheit der Software-Entwicklung zu einer Karriere als Programmierer in Produktfirmen, kreativen Web-Agenturen, als Freiberufler und Start-Up-Unternehmen. Christopher ist ein Outdoor-Enthusiast, der mit dem Camping im Hinterland der USA begonnen hat, aber langsam den Dreh raus hat, in einer rustikalen Hütte auf über 3000 Metern Höhe in den Schweizer Alpen Kaffee und Kuchen zu finden.