Verwirklichen Sie das Virtuelle Mit Erweiterter Realität

Verwirklichen Sie das Virtuelle Mit Erweiterter Realität

Erweiterte Realität taucht immer häufiger auf, aber was genau ist das und wie wird es gemacht?

Written by Ben Douglas

6 min read

Erweiterte Realität taucht immer häufiger auf, aber was genau ist das und wie wird es gemacht? Dank Videospielen und Filmen wie Ready Player One ist jeder mit Virtueller Realität vertraut. In der Virtuellen Realität ziehst du ein VR-Brille an und erlebst eine vollständig synthetische Realität, die dich aus der physischen Welt entfernt und es dir ermöglicht, in eine völlig andere Welt einzutauchen. In der Zwischenzeit verwischt Erweiterte Realität die Grenze zwischen virtuell und real. Es ermöglicht dem Benutzer, künstliche Inhalte als Teil seiner physischen Umgebung zu erleben und wird den E-Commerce im Sturm erobern, da Shopify die Technologie nutzt, um E R für seine Ladenbesitzer zu ermöglichen.

Vor kurzem hat Shopify die Verwendung von E RKit von Apple integriert, um E R-Inhalte für seine Benutzer bereitzustellen, und wir von Eastside Co haben seitdem damit experimentiert. Zuletzt haben wir mit Lazy Oaf zusammengearbeitet, um Erweiterte Realitäts-Versionen ihrer neuen Schuhlinie zu liefern, die in Zusammenarbeit mit dem legendären Doc Martens entwickelt wurden. Die einzigartige Ästhetik der Entwürfe von Lazy Oaf durch 3D-Modellierung in die erweiterte Realität zu bringen, war eine unterhaltsame Herausforderung und hat meiner Meinung nach dem Online-Einkauf ein Maß an Interaktivität verliehen, das in etwa dem entspricht, das bisher nur in Einzelhandelsgeschäften erhältlich war.

Was macht ein virtuelles Produkt für E R aus und welche Probleme treten dabei auf?

Vorbereitungen

Lazy Oaf war so freundlich, uns die tatsächlichen Produkte vor der Markteinführung zuzusenden, damit ich ein gutes Gefühl dafür bekommen konnte, wie die Produkte waren. Dies kann von großem Vorteil sein, da Fotos manchmal einfach nicht die Art oder Haptik der im Produkt verwendeten Materialien erfassen können und dies wichtig sein kann, damit das Produkt später richtig aussieht. Unser Fotograf und Videograf Dave hat freundlicherweise jeden Doc Marten-Schuh von vorne, hinten, von beiden Seiten, von oben und unten sowie aus verschiedenen Winkeln fotografiert, um einige Details der Oberflächen festzuhalten, bevor ich mit dem 3D-Modellierungsprozess begann.

Nachdem ich die Fotos zugeschnitten und aufeinander abgestimmt hatte, legte ich sie in 3DS Max 2018 als Blaupausen an.

Grundlegende Modellierung

Ab hier beginnt die Modellierung mit einfachen Formen. Der Schuh entstand als eine einzige Ebene, die extrudiert und so manipuliert wurde, dass sie der Form der Sohle entsprach.

Sobald die Grundform fertig ist, schneide ich die Kanten der Sohle ein und extrudiere sie, gefolgt vom Rest der Sohle. Dabei wende ich einige Modifikatoren an, um den abgerundeten Boden der Sohle als Ganzes zu erhalten. Nach einigen weiteren grundlegenden Modellierungen war die Sohle bereit, für die hochauflösende Arbeit zu übernehmen.

Hochauflösende 3D-Modellierung

Wenn Sie ein Modell mit niedriger Auflösung nehmen und die Anzahl der Polygone erhöhen, wird das Modell geglättet. Dieser Prozess wurde in einigen Stufen durchgeführt, um eine viel glattere Oberfläche zu erhalten, die es mir ermöglichte, Stiche entlang der Sohlenkante einzufügen und die Stichlöcher manuell in die Oberfläche zu formen, damit sie so aussehen, als wären sie richtige Stiche.

Sobald die Sohle geglättet und poliert war, begann ich am oberen Teil des Schuhs, um eine Grundform zu schaffen, die dem Umriss des Schuhs selbst folgte.

Unter Verwendung dieser groben Version als Basis konnte ich die Formen aller Teile extrahieren, aus denen das Detail des Schuhs bestand. Alle überlappenden Materialstücke, aus denen die Form bestand, wurden aus dieser Form gezogen und entsprechend angeordnet. Der geschnürte Bereich an der Vorderseite des Zehs wurde eingemeißelt.

Ab diesem Zeitpunkt ging es darum, das Zubehör wie die Schnallen und Schnürsenkel und natürlich weitere kleine Details wie die Stiche für die Paneele hinzuzufügen.

Der schwierige Teil

Mit etwas Farbe ist das Modell sicher fertig, oder? Leider nicht. Das 3D-Modell des Doc Marten-Schuhs besteht insgesamt aus knapp 10 Millionen Polygonen. Obwohl die Smartphones, die wir jetzt in unseren Taschen haben, unglaublich leistungsfähige Computergeräte sind, würde es ihnen sehr schwer fallen, so viele Polygone auf einmal wiederzugeben. Ähnlich wie bei einem Filmeditor müssen Sie die wichtigen Teile auswählen, die Sie präsentieren möchten. Sie werden feststellen, dass die Innenseite des Schuhs noch nicht fertig ist. Dies war das erste Stück, das sozusagen auf den Boden des Schneideraums traf. Das Innere des Schuhs hatte keine wesentliche Bedeutung für die Gesamtästhetik und so verringerte sich die Komplexität des Modells (und ich konnte Zeit sparen), wenn es nicht modelliert wurde. Wir haben aber immer noch fast 10 Millionen Polygone.

Da Erweiterte Realität das Modell in Echtzeit darstellt, müssen wir die Komplexität reduzieren. Dabei wird die Anzahl der Polygone auf ein überschaubares Maß reduziert. Dies ist ein unglaublich langwieriger Prozess. Glücklicherweise begannen die meisten Teile als Low-Polygon-Versionen, und ich konnte zu diesen Teilen zurückkehren und sie für diese Aufgabe neu verwenden. In der Abbildung unten sehen Sie, dass die Form zwar für den Schuh selbst repräsentativ ist, aber die feineren Details wie Stiche, leicht abgeschrägte Kanten und die allgemeine Glätte, die all diese Polygone bieten, fehlen. Sie können jedoch auch feststellen, dass die Anzahl der Polygone von fast 10 Millionen auf etwas mehr als 6000 verringert wurde und bei Bedarf sogar noch ein bisschen weiter verringert werden kann. 6000 Polygone liegen jedoch im Rahmen des Budgets, und die Geometrie zur Unterstützung der Form kann nützlich sein für die nächste Stufe.

Die Details zurückbringen

Wir haben jetzt zwei Versionen des Schuhs: eine Version mit extrem hoher Auflösung und eine Version mit niedriger Auflösung, die auf mobiler Hardware schnell und reibungslos funktioniert. Aber jetzt fehlen uns die Details, von denen ich behaupten würde, dass sie den Schuh einzigartig machen.

Um die hochauflösenden Details in die niedrigauflösende Version zu übertragen, müssen wir sie in verschiedene Textur-Maps „backen“, die dem virtuellen Licht in unserer Erweiterten Realität Informationen liefern. Dazu müssen wir zuerst unser Modell auspacken und es glätten, um eine UV-Karte zu erstellen. Was ist eine UV-Karte? Es ist eine 2D-Darstellung unseres Modells, wenn es wie ein Origami-Modell entfaltet wurde. Es ermöglicht das Projizieren von Texturen auf die Oberfläche später.

Um die Details klar und sauber zu halten, habe ich beschlossen, das Modell in zwei Teile zu teilen. Die Sohle, Schnallen und Riemen in einem Teil und dann das Oberteil in ein anderes Stück. Dies ermöglichte mir die Verwendung von 2 kleinen Texturkarten anstelle einer einzigen großen, was zu einer kleineren Dateigröße führt, so dass diese schneller geladen werden kann.

Unten sehen Sie die UV-Karten - die abgeflachten Versionen beider Teile.

Sobald dies erledigt ist, können wir unsere Karten backen und an den Texturen arbeiten, indem wir die Materialinformationen hinzufügen, die das Produkt wie das Produkt aussehen lassen.

Das Purpur im obigen Screenshot mag seltsam aussehen, aber auf diese Weise bringen wir die Details wieder in unser Modell. Die Oberfläche des Modells mit hoher Auflösung wird auf das Modell mit niedrigerer Auflösung projiziert und in den Werten Rot, Grün oder Blau aufgezeichnet, je nachdem, in welche Richtung die Oberfläche zeigt. Wenn eine Lichtquelle auf das Modell angewendet wird, bestimmt die Farbe des Pixels, auf das das Licht auftrifft, die Richtung, in die das Licht reflektiert wird. Dadurch wird eine künstliche 3D-Oberfläche ohne die Polygonkosten erstellt. Dies ist am offensichtlichsten bei den Stichen.

Nachdem diese Karten erstellt wurden, müssen nur noch Materialien und Texturen auf die Oberfläche aufgebracht werden.

Körperlich werden

Moderne Echtzeit-Render verwenden ein System namens PBR oder Physical Based Rendering. Dies bedeutet, dass die Beleuchtungs- und Rendering-Engine versucht, das Verhalten des Lichts beim Auftreffen auf die Oberfläche eines Modells basierend auf dem Material dieser Oberfläche genau abzubilden. Moderne Texturierungssoftware hat das Erstellen realistischer Materialien sehr einfach gemacht. Substance Painter war maßgeblich daran beteiligt, dass die Oberflächen dieser realen Objekte digital nachgebildet werden konnten. Wir verwenden hauptsächlich 5 verschiedene Texturabbildungen, um verschiedene Eigenschaften auf das Modell anzuwenden:

Color Map Dies ist , wie es klingt, es ist die Grundfarbe des Materials.

Metallizität Dies ist eine Schwarz-Weiß-Karte, die bestimmt, welcher Teil des Modells aus Metall oder Nichtmetall besteht.

Rauheit So wie es sich anhört, definiert es, wie rau oder glatt die Oberflächen des Modells ist.

Ambiente Eine Graustufenkarte, die die winzigen Kontaktschatten imitiert, bei denen sich zwei Oberflächen in der Ecke treffen, und der Beleuchtung zusätzliche Tiefe verleiht.

Normale Karte Dies ist die violette Karte, die zuvor gezeigt wurde, und die für die Darstellung der Oberflächendetails verantwortlich ist. Wie unten gezeigt, sind beim Ausschalten der normalen Karte auf der Sohle und dann im oberen Teil des Schuhs kaum Details zu erkennen.

Sobald der Texturierungsprozess abgeschlossen ist, haben wir etwas, das ziemlich überzeugend aussieht. Die letzten Schritte bestehen darin, das Modell und die Texturen zu exportieren und in ein E R-freundliches Format zu konvertieren. In diesem Fall ist es USDZ, da dies das von Apple ARKit verwendete Format ist.

Wenn du noch bei mir bist, gut gemacht! Das Ergebnis von E R ist weitaus faszinierender als der Herstellungsprozess, aber ich hoffe, dieser kleine Blick hinter die Kulissen zeigt, wie viel Aufwand für die manuelle Erstellung einer virtuellen Darstellung eines realen Produkts erforderlich ist. Neue Technologien wie 3D-Scannen und Fotogrammetrie werden den Prozess in Zukunft vereinfachen. Derzeit ist die Qualität jedoch nur dann optimal, wenn Sie viel Geld in die Technologie investieren.

Wir befinden uns noch in den Anfängen der Erweiterten Realität-Technologie. Mit fortschreitender Weiterentwicklung und zunehmender Leistungsfähigkeit und Leistungsfähikeit von Mobiltelefonen werden wir diese Technologie zunehmend in alltäglichen Situationen einsetzen. Während Ready Player One und andere Science-Fiction-Filme Virtuelle Realität populär machten, glaube ich, dass VR im Bereich Unterhaltung und Bildung bleiben wird, während E R so allgegenwärtig sein wird wie das Internet - vor allem, wenn wir alle unsere kybernetischen Augen-Upgrades erhalten. Vielleicht ist das ein bisschen abwegig, aber bis dahin kann ich wenigstens ein paar Schuhe auf den Tisch legen und werde nicht verraten.

Besuchen Sie Lazy Oaf und sehen Sie sich die Dr Marten-Schuhe auf Ihrem eigenen iPhone oder iPad mit iOS und Safari 12 an.

Wer wir sind

Wir sind einer der weltweit zuverlässigsten und erfahrensten Shopify Plus Partner. Als Full-Service-Agentur mit über 50 talentierten Mitarbeitern haben wir hunderten von ehrgeizigen Marken geholfen, ihre Ziele zu übertreffen.

Über Eastside Co

Was wir machen

Eastside Co ist führend bei UX-fokussiertem Shopify-Webdesign, ergebnisorientierten Marketingstrategien und erstklassigen Shopify-Anwendungen und -Software. Wir helfen Online-Unternehmen, sich vom Alltäglichen zu lösen und E-Commerce-Erfolg zu erzielen.

Lerne über unsere Dienstleistungen/ Services
Über 500 Shopify E-Commerce Webseiten.

Lass uns zusammenarbeiten, um dein E-commerce Shop aufzubauen.

Kontaktiere uns