3D-Modelle für’s Web mit WebGL-Publisher

webgl-titel WebGL in der Technischen Dokumentation – dieser Beitrag zeigt, wie man mit Hilfe der Software WebGL-Publisher aus nativen CAD-Modellen einfach und schnell ein web-fähiges 3D-Modell erstellt.

Im Artikel WebGL – 3D-Inhalte direkt im Internet Browser darstellen haben wir gelernt, was WebGL eigentlich ist und welche Erstellungsmöglichkeiten es gibt. Wir erinnern uns:

  • Native Entwicklung
  • Frameworks
  • Tool-Framework-Kombination

Die letzte Möglichkeit zur Erstellung eines WebGL-Modells, eine Tool-Framework-Kombination, schauen wir uns heute genauer an. Dieser Ansatz zur Erstellung von WebGL-Inhalten ist für eine web-basierte Technischen Dokumentation der Sinnvollste. Die Gründe, die zu dieser Empfehlung führen, werden später erläutert. Zunächst ein paar Worte zur Software WebGL-Publisher, die als Tool für die Erstellung des WebGL-Modells verwendet wird.

WebGL-Publisher

Der WebGL-Publisher stammt aus dem Hause CADMAI Software GmbH , welche die Entwicklung von Software zur Erstellung von 2D- und 3D-Konstruktionen fokussiert und seit Jahren die CAD-Software CADMAI veröffentlicht. Der WebGL-Publisher wurde im Jahr 2012 in der Version 1.0 vorgestellt und wird seither stetig weiterentwickelt, aktuell in der Version 2.4 (Stand: März 2015). Die Grundfunktion der Software liegt darin, native 3D-Geometriedaten für eine direkte Verwendung im Web als WebGL-Modell aufzubereiten. Weitere Technische Informationen zum Produkt sowie Testversionen und Lizenzmodelle finden sich auf der WebGL-Publisher-Website .

Ziel dieses Artikels

Dieser Artikel soll allem voran den grundsätzlichen Prozess veranschaulichen, der es ermöglicht, mit Hilfe des WebGL-Publishers ein natives 3D-Modell für eine Web-Anwendung aufzubereiten. Die Ausführungen zeigen, dass es vom nativen 3D-Modell zum web-fähigen WebGL-Modell nur ein kleiner Schritt ist. Auch wenn hin und wieder ein Screenshot der Software gezeigt wird, stellt dieser Artikel kein Tutorial dar, welches Schritt für Schritt die Bearbeitung im WebGL-Publisher dokumentiert.

Ergebnis

Bevor wir auf den Prozess genauer eingehen, vorweg schon mal das Ergebnis. Die Ausgangsdatei ist ein CAD-Modell einer Federgabel im STEP-Format. Dieses Modell wird im WebGL-Publisher so aufbereitet, dass am Ende ein interaktives, web-fähiges 3D-Modell entsteht, dessen einzelne Komponenten auf weiterführende Informationen verlinken. Neben der Verlinkung besitzt das Modell alle Eigenschaften eines gewöhnlichen CAD-Modells. Das nachfolgende 3D-Modell ist das Ergebnis des Prozesses und kann mit der Maus bedient werden.

Prozess: vom nativen zum web-basierten 3D-Modell

Welche Schritte zum oben gezeigten Ergebnis führen, werden nachfolgend beleuchtet. Folgende Abbildung visualisiert den Prozess und teilt diesen in 4 Schritte auf.

  • Natives CAD-Modell
  • Bearbeitung im WebGL-Publisher
  • Export zu web-fähigem CAD-Modell
  • Darstellung des WebGL-Modells in einer HTML-Seite

WebGL-Prozess

Schritt 1 – Natives CAD-Modell

Die Grundlage für ein WebGL-Modell ist ein natives CAD-Modell. Um das CAD-Modell im WebGL-Publisher bearbeiten zu können, muss das CAD-Modell in einem der folgenden Formate vorliegen: DXF Geometrie, Step, IGES, OBJ, 3DS, STL, CMI. In der Regel sind die gängigen CAD-Programme dazu in der Lage, Modelle in systemneutrale Formate wie STEP oder IGES zu exportieren. Somit stellt das Format des nativen CAD-Modells kein Problem dar. Weiterhin sollten die CAD-Modelle „sauber“ sein. Sauber bedeutet, dass das Modell nicht aus einem Block besteht, sondern aus einzelnen Baugruppen zusammengesetzt ist (sonst können diese später nicht im WebGL-Publisher bearbeitet werden). Zudem muss das CAD-Modell logisch aufgebaut sein (nur sinnvolle, nachvollziehbare Gruppierung von Baugruppen). Unser Beispielmodell liegt im STEP-Format vor und stammt von der Online-CAD-Datenbank GrabCAD (siehe Fundgrube): Federgabel

Schritt 2 – Bearbeitung im WebGL-Publisher

In Schritt zwei wird das native CAD-Modell im WebGL-Publisher bearbeitet. Abhängig von der Aufbereitung des nativen CAD-Modells werden im WebGL-Publisher optische Eigenschaften der Baugruppen wie Oberflächenstrukturen oder Farben dargestellt. Diese können im WebGL-Publisher angepasst werden. Folgende Abbildung zeigt, wie das CAD-Modell der Federgabel im WebGL-Publisher dargestellt wird. Rechts neben dem Modell ist das Menü „Design“ geöffnet. WebGL-Publisher Funktionen Mit Hilfe der Design-Funktionen können typische, optische Eigenschaften der Baugruppen angepasst werden:

  • Farbe
  • Texturen
  • Transparenz
  • Shader
  • Generischer Shader

Neben den Design-Funktionen versteckt sich in diesem Menü die Funktion „3D Selektion“. Diese hat primär nichts mit der optischen Erscheinung des CAD-Modells zu tun, sondern ermöglicht es, Baugruppen „interaktiv zu machen“. Dazu muss die entsprechende Baugruppe zunächst selektiert werden, um sie dann mit einem Tooltip und/oder einem Link auf eine weiterführende Information auszustatten. Dem ein oder anderen wird schon aufgefallen sein, dass in unserem Beispiel die einzelnen Baugruppen der Federgabel verlinkt sind und auf eine Informationsseite weiterleiten. Beim Positionieren des Mauszeigers über einer Komponente wird einerseits als Tooltip die Benennung der Baugruppe angezeigt, andererseits wird die Baugruppe rot eingefärbt, um deren Verlinkung auf eine weiterführende Information zu visualisieren.

3D-Selektion

3d-selektion-pfeil Der Screenshot zeigt die Funktion 3D-Selektion. Über die Schaltfläche Elementselektion wird eine Baugruppe des CAD-Modells gewählt, die verlinkt werden soll, im Beispiel die Baugruppe {s4}. Um den Tooltip und das Linkziel zu definieren, müssen nur noch die Felder Angezeigter Tooltip und URL ausgefüllt werden. Mit Hinzufügen wird die Verlinkung der Baugruppe gespeichert.

Shader

shader-pfeil Der Screenshot zeigt die Funktion Shader. Nach der Auswahl einer Baugruppe über Elementselektion kann die Auswahl mit einem Shader belegt werden. Es kann aus 35 Shadern gewählt werden (in Version 2.4). Mit Hinzufügen wird der Shader der Baugruppe zugeordnet und gespeichert.

Der Menüaufbau der übrigen Design-Funktionen (Farbe, Texturen, Transparenz, Generischer Shader) unterscheidet sich nicht von den beiden dargestellten. Die zwei Screenshots verdeutlichen, dass die optische Bearbeitung sowie die Verlinkung einzelner Baugruppen im WebGL-Publisher mit wenigen Einstellungen und Mausklicks umgesetzt werden kann. Es werden dazu keine Programmierfähigkeiten oder spezielles Wissen im Bereich CAD-Modellierung benötigt. Hier geht es zu einem Video-Tutorial der CADMAI Software GmbH, dass einige Design-Funktionen wie die Anwendung von Farbe oder Shader auf Bauteilen zeigt. Im Video-Tutorial wird eine frühere WebGL-Publisher-Version verwendet, die noch keine 3D-Selektion ermöglicht. Die Design-Funktionen sind ansonsten im Allgemeinen gleich.

Schritt 3 – Export zu web-fähigem CAD-Modell

Sobald das Modell optisch sowie interaktiv vollständig bearbeitet wurde, steht dem Export in ein WebGL-Modell nichts mehr im Wege. Aus dem Export heraus resultieren verschiedene Dateien, welche die korrekte Darstellung des WebGL-Modells im Browser definieren. Dazu gehören:

  • JavaScript-Bibliotheken
  • Texturbilder
  • WebGL-Modell als WPM-Datei (WebGL-Publisher-Model)
  • HTML-Seite

Schritt 4 – Darstellung des WebGL-Modells in einer HTML-Seite

Die exportierten Dateien werden in ein Zielverzeichnis geschrieben, das zuvor vom Anwender definiert wurde. Die generierte HTML-Seite beinhaltet das WebGL-Modell, welches über ein canvas-Element im Quellcode eingebunden ist. Neben der Darstellung des Modells können verschiedene Modi gewählt werden, um das Modell zu erforschen. Die generierte HTML-Seite sieht wie folgt aus: Default-HTML-Seite Der Screenshot zeigt das Default-Design der HTML-Seite, die beim Export durch den WebGL-Publisher generiert wird. Die Darstellung und Funktionen der Default-HTML-Seite kann in den Exporteinstellungen in bestimmten Bereichen angepasst werden:

  • Hintergrundfarbe/ Hintergrundbild/ Hintergrundtext
  • Ansichtswinkel
  • Fenstergröße (fest oder prozentual)
  • Modi (Angabe, welche Modi der Benutzer zur Verfügung hat)
  • Anzeige von enthaltenen Baugruppen
  • Initialer Mausmodus (Modell verschieben, zoomen oder rotieren)

Mit Hilfe dieser Einstellungen lässt sich schnell eine individuelle HTML-Ausgabe generieren. Die getätigten Einstellungen können als HTML-Vorlage gespeichert und immer wieder verwendet werden. Möchte man das Modell in eine bestehende, HTML-basierte Anwendung einpflegen, sind HTML-Kenntnisse von Vorteil. Dabei muss der relevante Quellcode des WebGL-Modells aus der generierten HTML-Seite in die bestehende, HTML-basierte Anwendung eingefügt werden (kein Hexenwerk: Copy&Paste der relevanten Quellcode-Schnipsel in den bestehenden Quellcode). Je nach Anwendung muss der ein oder andere Faktor dabei beachtet werden (bspw. Fenstergröße bei responsiver Anwendung), die resultierenden Anpassungen sind allerdings überschaubar. Mit sehr kleinem manuellen Aufwand wurde aus der Default-HTML-Seite unsere kleine Beispiel-Seite: Vergleich

Zusammenfassung der Schritte 1 bis 4

Wir haben nun unser natives CAD-Modell im STEP-Format in ein web-fähiges 3D-Modell im WPM-Format transformiert und können das 3D-Modell über eine HTML-Seite im Browser darstellen. Betrachtet man die Schritte 1 bis 4, wird deutlich, dass der Prozess sehr überschaubar und von der Komplexität her sehr niedrig ist. Das liegt vor allem an der programmierfreien Transformation durch die einfache Handhabung von Design-Funktionen und Generierung von interaktiven Elementen per Mausklick. Zudem erschlägt einen der WebGL-Publisher nicht mit einer unüberblickbaren Anzahl an Funktionen, was üblicherweise bei CAD-Programmen der Fall ist. Der Funktionsumfang konzentriert sich einzig und allein auf die Transformation natives CAD-Modell zu web-fähigem 3D-Modell, was zu einer intuitiven Handhabung führt.

Tipps und Wissenswertes für ein gutes Gelingen

Aufgrund eigener Erfahrungen mit dem WebGL-Publisher sollen an dieser Stelle ein paar Tipps genannt werden, die zu einer zufriedenstellenden Umsetzung führen.

Sauberes CAD-Modell

Eine wesentliche Voraussetzung sind sauber aufgearbeitete CAD-Modelle mit einem logischen Aufbau. Der WebGL-Publisher erkennt die Baugruppen des nativen CAD-Modells. An diesen Baugruppen werden die Design-Funktionen angewendet. Ist ein CAD-Modell grobgranular aufgebaut oder die Baugruppen sind in besonderem Maße gruppiert, kann im WebGL-Publisher folglich nicht detailliert gearbeitet werden. Ist das CAD-Modell sehr feingranular aufgebaut, kann es umgekehrt dazu kommen, dass einige Anpassung relativ zeitintensiv sind, da viele kleine Baugruppen gewählt werden müssen.

CAD-Modell bereinigen

Die Performanz eines web-fähigen 3D-Modells hängt sehr von der Ausgangsdatei ab. Im Beispiel wird das CAD-Modell einer Federgabel verwendet, das keinen komplexen Aufbau besitzt und somit sehr flüssig funktioniert. Ein komplexeres Modell mit einer größeren Menge an CAD-Daten kann die Performanz negativ beeinflussen, speziell bei Anwendern, die das web-fähige 3D-Modell auf leistungsschwachen Endgeräten bedienen. Da in den wenigsten Fällen das Endgerät beeinflusst werden kann, muss das Problem anderweitig angegangen werden. Ein Ansatz ist die Bereinigung des nativen CAD-Modells. Wenn das web-fähige 3D-Modell bspw. nur von außen dargestellt werden soll, könnten verdeckte Baugruppen, die nicht visualisiert werden, aus dem nativen CAD-Modell entfernt werden. Dadurch verringert sich die Datenmenge und die Performanz verbessert sich.

JavaScript API

Für all diejenigen, die sich etwas mehr mit dem generierten Quellcode beschäftigen möchten und etwas an den Schrauben drehen möchten, denen sei die JavaScript API in der Online-Hilfe des WebGL-Publishers empfohlen. Dort werden alle relevanten JavaScript-Befehle definiert, wodurch der generierte Quellcode weiter beeinflusst werden kann. Gerade wenn es um responsive Anwendungen geht, findet man in der API wichtige Informationen, die meist zu einem zufriedenstellenden Ergebnis führen.

WPM-Datei

Die WPM-Datei, also das Format des web-fähigen 3D-Modells, basiert auf dem Datenformat JSON. Es ist von Seiten der CADMAI Software GmbH nicht vorgesehen, am Quellcode der WPM-Datei etwas zu ändern, es ist allerdings möglich, direkt im WPM-Quellcode bspw. Verlinkungen auf einzelne Baugruppen zu setzen. Dieser Workaround entwickelte sich aufgrund eines CAD-Modells mit nicht nachvollziehbaren Gruppierungen von Baugruppen, sodass die einzelnen Baugruppen im WebGL-Publisher nicht bearbeitet werden konnten. Dieser Schritt ist allerdings nur zu wählen, wenn eine Bearbeitung des nativen CAD-Modells nicht möglich ist.

Fazit

Eingangs diesen Artikels wurde die Behauptung aufgestellt, eine Tool-Framework-Kombination sei für WebGL-Anwendungen innerhalb der Technischen Dokumentation die beste Lösung. Als Begründung dazu eignet sich das Fazit, denn es werden nochmals alle wichtigen Informationen des Artikels auf den Punkt gebracht, die gleichzeitig die Begründung dieser Behauptung darstellen.

  • Transformation statt Konstruktion: Es werden bereits vorhandene 3D-Modelle verwendet. Somit ist keine redundante, zeitintensive Entwicklung web-fähiger 3D-Modelle nötig, sondern bestehende Daten müssen nur aufbereitet werden.
  • Keine Kenntnisse in 3D-Modellierung: Da nur transformiert wird, ist kein Spezialwissen im Bereich 3D-Modellierung nötig.
  • Keine Programmierkenntnisse: Der WebGL-Publisher generiert alle wichtigen JavaScript-Bibliotheken (die sogenannten Frameworks), um das Modell im Browser richtig darstellen zu können.
  • Schnelle Umsetzung mit WebGL-Publisher: Die intuitive Bedienung und der klare Aufbau der Software ermöglicht eine schnelle Transformation.

Die folgenden Screenshots zeigen zum Abschluss dieses Artikels einige WebGL-Anwendungen, die im Rahmen diverser Projektarbeiten entstanden sind. Dabei handelt es sich ausschließlich um WebGL-Modelle innerhalb mobiler Dokumentation. beispiele

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.