aditec WebGL 3D Produktkatalog

Die Firma aditec (www.aditec.net)entwickelt und produziert elektronische Mess-, Steuer- und Regeltechnik zur Prozessteuerung und -visualisierung in der Lebensmittelindustrie.

Um für die Fach-Nutzer der Website zusätzliche Informationen zu den elektronischen Modulen bereitzustellen, wurde eine eigene Plattform geschaffen, um die CAD 3D-Modelle in vereinfachter Form online im Webbrowser präsentieren zu können. Von den Produktseiten der Unternehmenswebsite kann direkt zur 3d-Ansicht verlinkt werden. z.B. 3d.aditec.net/02-MKA500/en/

Das Fundament bildet die WebGL Technologie, die es ermöglicht, 3D-Modelle in den gängigen modernen Browsern ohne Zusatzmodule direkt visualisieren zu können. Der Benutzer hat die Möglichkeit das 3D-Modell frei drehen und zoomen, und somit aus beliebiegem Winkel betrachten zu können. Der Viewer für dieses Projekt selbst implementiert eine Drittanbieterbibliothek zum Laden und Rendern der 3D-Daten. Die Benutzeroberfläche ist mit Vue 3 modular umgesetzt.

Wichtig ist, dass die gesamte Web-App im Browser out of the box ohne Zusatzmodule rein mit Javascript funktioniert. Damit läuft die Anwendung sofort in den halbwegs aktuellen Versionen der gängigen Browser unter Windows, Android und sogar Apple Safari sowohl auf Desktoprechnern als auch mobilen Endgeräten. Es gibt also keine Hemmschwelle, wie früher z.B. bei FLASH 3D, wo zuerst immer die aktuelle Version des FLASH Players verifiziert und/oder durch den Benutzer installiert werden musste.

Für den Hersteller soll es möglichst einfach sein, eigenständig neue oder aktualisierte 3D-Modelle aus seiner CAD Software zu exportieren und online verfügbar zu machen. Von den bestehenden Produktseiten des Herstellers wird direkt zur 3D Web-App verlinkt, so dass dort eine 3D-Ansicht bilschirmfüllend erfolgen kann. Ist der Benutzer schon auf der 3D-Plattform, ist es hilfreich, auch gleich zwischen allen verfügbaren Modellen hin- und herwechseln zu können. Deshalb ist die Anwendung als eine Art Katalog ausgebaut und von jedem Detailinfo kann auch zurück zur Hauptwebsite des Herstellers gesprungen werden. Jedes 3D-Modell kann zur Ansicht als absoluter URL aufgerufen und z.B. als Lesezeichen gespeichert werden.

Automatische Hero Startansicht

Die elektronischen Module variieren in ihrer Gehäusegröße und Ausdehnung in Z-Richtung einigermaßen stark. Um dennoch eine ansprechende, leicht schräg gestellte Startansicht für jedes 3D-Modell umzusetzen, gibt es zum einen eine automatische 3D-Kamerazentrierung beim Laden des Modells in den Viewport. Zudem kann für jedes Modell eine Kamerakorrektur in X/Y-Richtung definiert werden, um bei Bedarf das Objekt auch optisch ausgeglichener im Viewport zu zentrieren.

HDR-Umgebung

Die Gehäuse der elektronischen Module haben unterschiedliche Materialbeschaffenheit. Es gibt neben den spiegelnden Displaykomponenten auch Module, die komplett aus Edelstahl gefertigt sind. Bei spiegelnden Oberflächen besteht auch im realen Raum grundsätzlich das Problem, dass die Objekte selbst kaum ambiente Farbe zum Bild beisteuern, sondern fast nur die Umgebung spiegeln. Eine polierte Chromkugel in einem dunklen Fotostudio wird praktisch unsichtbar, da sich in ihrer Oberfläche nur Schwarz spiegelt.

Um dieses grundsätzliche Problem im 3D-Raum zu lösen, gibt es die Möglichkeit eine virtuelle Umgebung aus einer HDR Textur zu definieren, die sich als quasi unendliche Kugel um die gesamte Szene legt und in den Oberflächen der 3D-Objekte im Viewport spiegelt. Damit werden verchromte Bauteile oder solche aus stark spiegelndem Metallblech überhaupt erst im Viewport plastisch sichtbar. Für den vorliegenden Fall wurde eine möglichst allgemeine HDR Umgebungstextur zusammengestellt, die möglichst alle Modelle und Materialvarianten im Mittel plastisch visualisiert. Zudem gibt es eine allgemeine Dreipunktbeleuchtung, die relevante Bauteile an allen Seiten der Gehäuse möglichst hell genug plastisch zur Geltung bringt.

Mehrsprachigkeit

Die Hauptwebsite des Herstellers ist mehrsprachig. Da von den allgemeinen Produktseiten direkt zur 3D Web-App gesprungen wird, muss auch dort die aktuelle Benutzersprache weitergeführt werden.

Zu jedem 3D-Modell können durch den Hersteller lokalisierte Beschreibungstexte, Vorschaubild und Backlinks definiert und hinterlegt werden. Textbeschreibungen der Produkte erscheinen dann in der jeweiligen Benutzersprache und auch die Rücksprunglinks von der 3D-Plattform zurück zur allgemeine Website führen wieder zur aktuellen Benutzersprache.