3-D-Content begegnet Ihnen mittlerweile überall im Alltag, sei es auf Ihren Navigationsgeräten, in den Spielen und Apps auf Ihren Smartphones und Tablets oder in VR-Brillen, die Sie eine völlig neue virtuelle 3-D-Welt erleben lassen. Leider ist der Trend im Web noch nicht angekommen, doch warum ist das so? Kann 3-D-Content nicht die Art verändern, wie in Zukunft im Internet eingekauft wird?
Aktuell entwickeln sich AR & VR in den Mainstream unserer Gesellschaft und werden von der Masse langsam, aber sicher akzeptiert und adaptiert. Vor allem AR (Augmented Reality, erweiterte Realität) nimmt nicht zuletzt durch Apples Entwicklungen mit dem in iOS 11 integrierten „ARKit" (Framework zur Erstellung von AR-Apps) an Fahrt auf. Hierbei wird die Realität mit 3-D-Content angereichert, der dem Benutzer weitere Informationen zur Verfügung stellt – die Einsatzzwecke dafür sind unzählig. Es gibt bereits verschiedene Ansätze, 3-D-Content auch ins Web zu bringen. Bevor man aber dreidimensionale Inhalte im Web einbinden kann, muss der Content erst geschaffen werden. Im Folgenden beleuchten wir verschiedene Möglichkeiten, diese Art von Content zu erstellen.
Eine der Optionen, die bereits heute vielerorts eingesetzt werden, ist der sogenannte 360°-Foto-Betrachter wie zum Beispiel „360shots" (siehe www.360shots.de). Hierbei werden Produkte auf einem Drehteller und einem Stativ von allen Seiten auf der X-Achse abfotografiert und über ein JavaScript so angeordnet, dass beim Scrollen per Maus ein 3-D-artiger Effekt entsteht. Es handelt sich natürlich nicht um 3-D-Content im klassischen Sinne, es wird dem Kunden nur der Eindruck vermittelt.
Man kann Produktfotos so weiterverarbeiten, dass daraus 3-D-Modelle erstellt werden können. Die Technik dahinter nennt sich „Photogrammetrie". Als Photogrammetrie bezeichnet man Messmethoden und Auswerteverfahren, um aus Fotografien eines Objektes seine räumliche Lage und dreidimensionale Form zu ermitteln. Hierbei werden Einzelpunkte der verschiedenen Fotos per Interpolierung bestimmt, woraus eine dreidimensionale Oberfläche, das sogenannte Mesh, generiert wird. Je mehr Fotos hierfür verwendet werden, umso genauer ist das generierte Mesh. Zudem ist die Technik skalierbar, wodurch 3-D-Modelle von ganzen Städten erstellt werden können. Man benötigt nicht mehr als ein Set-up, bestehend aus DSRL/Spiegelreflex-Kamera, Drehteller, Stativ und Lichtwürfel sowie eine Photogrammetrie-Software, um die Fotos anzufertigen – somit ist die Einstiegshürde entsprechend gering.
Erstellt werden sollten viele Fotos aus verschiedenen Winkeln vom entsprechenden Objekt. Von oben, mittig, von unten und schräg von der Seite. Es wird empfohlen, mindestens 50 Fotos zu machen. Achten Sie darauf, dass der Winkel zwischen den Fotos nicht mehr als 15° beträgt, um ein möglichst genaues Mesh zu erhalten. Verwenden Sie indirektes Licht. Entweder Sie schaffen sich ein entsprechendes Set-up oder Sie gehen mit Ihrem Objekt nach draußen ins Licht. Aber beachten Sie, dass es bewölkt ist, denn diffuses Licht ermöglicht Ihnen eine gleichmäßige Ausleuchtung. Vermeiden Sie direkte Sonneneinstrahlung oder direkte Lichtquellen, um keinen Schattenwurf auf dem Objekt zu erhalten. Nachdem die Fotos erstellt wurden, entfernen Sie den Hintergrund samt allen Dingen, die vom eigentlichen Objekt ablenken könnten. Danach müssen die Fotos nur in eine Photogrammetrie-Software wie z. B. „Autodesk Recap360" (recap360.autodesk.com) oder „Agisoft Photoscan" (www.agisoft.com) geladen werden, um die Fotos in ein 3-D-Modell umzuwandeln.
Leider gibt es immer Einschränkungen. Alles, was Struktur und verschiedene Oberflächen hat, ist perfekt. Glatte oder spiegelnde Objekte, ebenso wie Artikel aus Glas oder mit sich wiederholenden Mustern, eignen sich hingegen nicht für die später zum Einsatz kommende Software, da die Einzelpunkte nicht eindeutig aus verschiedenen Winkeln zu erkennen sind. Ebenso sollten Ihre Objekte statisch sein, damit Abweichungen der Geometrie des Objektes zwischen den Fotos vermieden werden. Je nach Objektgröße dauert das Fotografieren aus den verschiedenen Winkeln ca. eine halbe Stunde. Für die Nachbearbeitung und das Erstellen des fertigen Mesh samt Textur können Sie noch mal ca. die gleiche Zeit einplanen, sodass Sie am Ende etwa eine Stunde für ein 3-D-Modell benötigen.
Wie man sehen kann, ist Photogrammetrie eine kostengünstige Variante, 3-D-Content zu erstellen, die aber viel Vorbereitungszeit und Nachbearbeitung benötigt. Eine signifikant schnellere, aber auch wesentlich kostenintensivere Variante sind 3-D-Scanner. Persönlich habe ich Erfahrungen mit den beiden Handscannern „Artec Eva“ und „Artec Spider“ sammeln können. Die Technik hinter 3-D-Scannern funktioniert ähnlich wie bei der Photogrammetrie. Der Scanner wirft ein strukturiertes Schwarz-Weiß-Bild auf das Objekt, wodurch über die Interpolierung der verschiedenen Fotos die Einzelpunkte der Oberfläche erstellt werden. Nachdem die Oberfläche erfasst wurde, wird das Objekt per LED beleuchtet und ein Foto angefertigt, welches wiederum im Nachgang auf das Objekt gelegt werden kann, so dass das Objekt durch die Software des 3-D-Scanners texturiert wird. Der 3-D-Scan ist ressourcenhungrig und benötigt entsprechend eine starke CPU und mindestens 16 GB RAM (32 GB RAM empfohlen). Mit einem entsprechenden Set-up erreicht der 3-D-Scanner 12-14 Bilder pro Sekunde, was deutlich schneller ist als eine manuelle Erstellung der Fotos, wie sie für die Photogrammetrie benötigt wird. Leider bestehen die gleichen Einschränkungen wie bei der Photogrammetrie, zudem sind weiße und schwarze Oberflächen im Mesh technikbedingt durch die Interpolierung der Einzelpunkte über ein Schwarz-Weiß-Bild schlichtweg nicht vorhanden. Es gibt die Möglichkeit, solche Objekte mit einem speziellen 3-D-Spray zu besprühen, was aber wiederum den Nachteil hat, dass die Textur nicht komplett erfasst werden kann und entsprechend eine Nachbearbeitung mit einem Fotobearbeitungsprogramm wie Photoshop oder Gimp auf dem PC notwendig wird.
Natürlich gibt es eine Vielzahl an weiteren Möglichkeiten, 3-D-Content zu erstellen. Man kann per 3-D-Software wie „AutoDesk Maya“, „AutoDesk 3ds Max“ oder „Blender“ eigenständig 3-D-Modelle erstellen. Je nach Objekt arbeitet man mit Fotoaufnahmen als Orientierung, um die Geometrie am PC freihändig nachzubauen. Fotos von Autos gibt es meist auf Blaupausen, die das Fahrzeug von vorne, hinten, oben, unten, links und rechts zeigen. Trotz dieser Hilfsmittel ist das Modellieren und Texturieren von Objekten sehr zeitaufwendig und bedarf eines tiefen Verständnisses der Software.
Nachdem wir unseren 3-D-Content erstellt und für das Web aufbereitet haben, stellt sich natürlich die Frage, wie man diesen Content überhaupt in die eigene Webseite einbinden und seinen Besuchern präsentieren kann. Mittlerweile gibt es viele Technologien, die man dafür verwenden kann. Es gibt komplette 3-D-Bibliotheken wie „Three.js“ (threejs.org) oder „Babylon.js“ (www.babylonjs.com), die die Realisierung beschleunigen. Diese eignen sich vor allem für die individuelle Implementierung, um das bestmögliche Ergebnis zu erzielen. Diese Frameworks bieten nicht nur die Möglichkeit, 3-D-Modelle anzuzeigen, sondern man kann auch Sound einbringen. Zudem ist es möglich, VR Headsets wie die HTC Vive, die Oculus Rift oder auch Google Cardboard zur Anzeige zu verwenden. Auch steht ein Gamepad, falls gewünscht, zur Navigation innerhalb der 3-D-Welt zur Verfügung. Falls man die Kontrolle über die Ausgabe haben möchte, sich aber nicht mit der komplexen API des Frameworks und deren Tools auseinandersetzen möchte, besteht auch die Möglichkeit, das sogenannte „A-Frame"-Framework (www.aframe.io) zu verwenden. Hierbei handelt es sich um ein Web-Framework, welches eigene HTML-Elemente zur Verfügung stellt. Das Framework baut auf die „Custom Tags" der „Web Components"-Spezifikation auf (W3C Web Standard, siehe www.w3.org/TR/2016/WD-custom-elements-20161013/). Hierdurch kann die Ausgabe der 3-D-Modelle über HTML-Tags gesteuert werden. Diese Lösung hat im Vergleich zur Fullstack 3-D-Bibliothek eine Limitierung der Anpassbarkeit, bietet aber dennoch für viele Einsatzzwecke die richtige Balance zwischen einfacher Einbindung in bestehende Projekte und Steuerung der Ausgabe.
Natürlich dürfen die traditionellen Game-Development-Plattformen wie „Unity3D“ oder „Unreal Engine“ nicht vergessen werden. Beide Engines bieten einen Export als „WebGL"-Projekt an. WebGL ist die technische Basis für die Bereitstellung von 3-D-Content im Web und baut auf „OpenGL" auf, eine offene Grafikbibliothek zur plattform- und programmiersprachenübergreifenden Entwicklung von 2-D- und 3-D-Computergrafiken. Zur Ausführung des Programmcodes nutzen die beiden oben genannten Engines „WebAssembly". WebAssembly oder auch „wasm" genannt, ist eine Technologie zum Ausführen von Bytecode im Browser. Unterstützt werden aktuell die Programmiersprachen C und C++. WebAssembly soll eine schnellere Alternative zu JavaScript sein, was sowohl die Ladezeiten als auch die Ausführung betrifft. Bei der Verwendung von 3-D-Engines können im Handumdrehen 3-D-Welten mit eigenen Modellen erstellt werden, was vor allem für Mediengestalter interessant ist. Leider sind die WebGL Exports der Engines noch sehr ressourcenhungrig und haben noch keinen großen Support von Browsern.
Es gibt zudem auch die Möglichkeit, die 3-D-Modelle über einen Web-Service wie zum Beispiel „Sketchfab“ (www.sketchfab.com) einzubinden. Diese Plattformen stellen in der Regel eine API (Application Programming Interface, Programmierschnittstelle) für den automatischen Upload aus 3-D-Programmen wie Blender zur Verfügung. Alternativ kann natürlich auch eine eigene Einbindung auf Basis der API geschrieben werden.
Wie gesehen, gibt es bereits viele Möglichkeiten, eigenen 3-D-Content zu erstellen und diesen im Web einzubinden. Leider hat jede Möglichkeit ihre Vor- und Nachteile sowie Einschränkungen bzgl. des 3-D-Contents. Falls man die Anschaffungskosten eines 3-D-Scanners scheut, bietet sich auch noch die Möglichkeit, einen Dienstleister einzuschalten, der die 3-D-Modelle erstellt. Hier ist abzuwägen, wie viele 3-D-Modelle erstellt werden sollen. Man kann grob sagen, dass sich ab ca. 100 Objekten ein eigener Scanner lohnt – natürlich abhängig davon, welches Modell man haben möchte. Die Einbindung in die eigene Webseite stellt zudem auch kein Problem dar. Je nach technischem Verständnis kann eine der oben beschriebenen Lösungen gewählt werden.
Letztendlich steht 3-D-Content im Web nichts mehr im Weg. Sie müssen lediglich abwägen, ob Sie bereit sind, sich intensiver mit der Materie zu beschäftigen und entsprechend Zeit und Geld aufzuwenden, um die vorgestellten Technologien zu adaptieren. Die benötigten Programme sind kostengünstig oder teilweise sogar kostenlos zu erhalten. Wenn Sie Ihren Besuchern einen Mehrwert bieten möchten, dann ist 3-D-Content die perfekte Möglichkeit dazu.