WebGL & Three.js – FAQ – Frequently Asked Questions

 

WebGL & Three.js

webgl_100px_june16_180_75 WebGL ist die Abkürzung für Web Graphics Library und ist ein fester Bestandteil moderner Webbrowser. Ohne zusätzliche Erweiterungen (Plugins) können nun hardwarebeschleunigte 3D-Grafiken direkt im Browser dargestellt werden. Auf der Website caniuse.com können Sie den aktuellen Entwicklungsstand einsehen.
  • Echtzeit-3D-Darstellung von Produkten im Web auf allen Computersystemen
  • 3D-Onlinekonfiguratoren (z. B. Bauanleitungen, Produktkonfiguratoren, ...)
  • einfache und komplexe Animation und Simulation von Funktionsabläufen (z. B. Explosionsdarstellung, Bauanleitung,...)
  • On- und Offline Präsentationen von Produkten im Vertrieb auf Baisis von in sich geschlossenen WebAPP's
Online-Konfiguratoren haben in den letzten Jahren immer mehr an Bedeutung gewonnen. Die Möglichkeit der Produktindividualisierung gehört in fast allen Bereichen zum Standard, und hat einen wesentlichen Anteil von Kaufentscheidungen. Hier bietet WebGL eine perfekte Ergänzung, um individualisierte Produkte nahezu fotorealistisch in 3D-Realtime darzustellen. In den meisten Fällen läßt sich der 3D-Darstellungsbereich in bestehende Lösungen einbauen, ohne in systemrelevante Schnittstellen eingreifen zu müssen. Einsatzgebiete von Online-Konfiguratoren:
  • Technische Konfiguratoren: Automobilindustrie, Zusammenstellung von Systemkomponenten, Fahrräder, Motorräder, Werkzeuge,...
  • Produktgestaltung: Bad-Armaturen, Bekleidung, Taschen, T-Shirts, Leinwände, Teppiche, Möbel, Inneneinrichtung, Türen, Fenster
  • Mischen: Farben, Müsli, Tee, Parfüm,...
  • Sets: Fertighäuser, Gartenhäuser, Kleidung, Zäune, Mülltonnensysteme, Tisch-, Regal- und Schranksysteme,...
In der Vergangenheit wurden viele 3D-Online-Konfiguratoren mit SVG-Grafiken so gestaltet, das der Eindruck einer echten 3D-Darstellung simuliert wurde. Allerdings war und ist der Aufwand für die Erstellung der SVG-Grafiken sehr hoch. Aus diesem Grund portieren die ersten Unternehmen ihre alten 3D-SVG-Anwendungen auf WebGL, da hier der Aufwand für Aktualisierungen und Änderungen erheblich niedriger ist. Ebenfalls liegen die Entwicklungskosten meist unter denen der SVG-Konfiguratoren.
  1. Animationen lassen sich problemlos aus klassischen 3D-Programmen mit Hilfe von geeigneten Exportformaten wie Collada (DAE) erstellen. Diese lassen sich dann per JavaScript gezielt abspielen und kontrollieren. Da der Export von Animationsdaten hierbei per Keyframes erfolgt, können selbst komplexeste Zusammenhänge dargestellt werden (z. B. inverse Kinematik in der Robotik).
  2. Sofern es sich um einfache Animationsabläufe handelt, können diese über ein eigenes JavaScript erstellt werden. Dies betrifft die gängigen Funktionen wie Rotation, Skalierung und Bewegung. Für komplexere Animationen ist es aus wirtschaftlicher Sicht sinnvoller, die Animationen wie im Schritt 1 zu erstellen.
  3. Ebenfalls möglich ist die Darstellung komplexer Charakteranimationen für Spiele, Lehrfilme, oder Werbetrailer.

TECHNISCHES HINTERGRUNDWISSEN – WebGL & Three.js

Auf der Website caniuse.com können Sie den aktuellen Entwicklungsstand der wichtigsten Browseranbieter einsehen. Dazu zählen zur Zeit folgende Browserversionen EDGE 14 (Supported) IE11 (Supported) Firefox 49 (Partial support ) Chrome 54 (Supported) Safari 10 (Supported) Opera 41 (Partial support ) Opera Mobile 37 (Supported) iOS Safari 10 (Supported) Android Browser 53 (Partial support ) Chrome for Android 53 (Partial support ) Firefox for Android 49 (Partial support ) IE Mobile 11 (Supported) Blackberry Browser 10 (Supported) UC Browser for Android 11 (Supported) Samsung Internet (Supported) Darüber hinaus bietet die Website webglstats.com einen tiefergehenden Einblick. Im Juni 2015 hatten insgesamt 89% der Besucher bereits WebGL Unterstützung (aufgeteilt in 79% stabil und 10% experimentell).
Für 3D-Realtime-Anwendungen sollten 3D-Objekte in Bezug auf Ladezeit und Objektgröße optimiert werden. Das bedeutet einen erheblichen Aufwand, wobei es oft wirtschaftlich sinnvoll ist, die 3D-Objekte gleich neu zu erstellen (in Low Poly), bevor bestehede 3D-Objekte per Hand optimiert werden müssen. Für Projekte, wo mehrere hundert 3D-Objekte vorzubereiten sind, bedeutet dies einen erheblichen finanziellen Aufwand. Für diese Fälle haben wir ein eigenes Tool entwickelt, einen sogenannten Polygonreducer bzw. Polygonreduzierer, der Optimierungsaufgaben für hunderte von 3D-Objekten automatisiert abwickeln kann. Dabei unterstützen wir die gängigsten Exportformate aus der Industrie (u. a. STP, STEP, STL, ...). Selbstverständlich gibt es auch kommerzielle Lösungen, die in Ihrer Leistung auch nicht zu unterschätzen sind (z. B. vizup.com, RightHemisphere, MeshLab, ....). Dabei reduziert unser Polygonreducer-Tool die 3D-Objekte exakt nach Vorgabe, und behält die optisch wesentlichen Informationen bei. Zusätzliche Features erlauben es, interne Informationen aus 3D-Meshes, die teils geheim gehalten werden sollen, zu entfernen (Entkernen von 3D-Modellen). Zusätzlich haben wir weitere Regulierungsmöglichkeiten, systemrelevante Daten so abzuändern, das Ihre Innovationen geschützt bleiben. Selbstverständlich kann eine Optimierung nie zu 100% funktionieren, dafür sind die Anforderungen zu vielfältig, allerdings redzuieren sich die Investitionen für die Optimierung im Schnitt um 40-60%.
3D-Realtime-Daten sind grundsätzlich nicht schützbar. Alles was in 3D-Realtime auf dem Bildschirm zu sehen ist, lässt sich durch überschaubaren Aufwand auslesen. Ebendso ist es zur Darstellung auf einem Client technisch zwingend, die 3D-Daten dem Client/Kunden zur Verfügung zu stellen, damit die 3D-Objekte auch angezeigt werden können. Damit folgt, dass im Internet nur 3D-Daten bereitsgestellt werden sollten, die keinen wirtschaftlichen Vorteil für Dritte bringen. Aus diesem Grund wandeln wir per Hand, oder unter Einsatz unseres Polygonreducer-Tool's, die 3D-Objekte so um, das sie für Dritte wirtschaftlich nicht nutzbar sind. Der Aufwand ist abhängig von Ihren Wünschen. Folgende Sicherheitsmaßnahmen sind denkbar:
  • alle Details, die nicht sichtbar sind, sollten entfernt werden (Entkernen von 3D-Modellen)
  • optisch nicht relevante Details und Bohrlöcher sollten entfernt, oder zumindest versetzt werden
  • Umskalierung der 3D-Modelle in vorgegebenem Rahmen unter Zuhilfenahme eines Zufallsgenerators, der sich auch auf die Umskalierung von kleineren Unterobjekten bezieht. Am Ende sind alle Maße so abgeändert, das eine wirtschaftliche Verwertung durch Dritte nicht in Frage kommt.
  • Abweichen von Konstruktionsvorgaben (z. B. Versatz der Lager von Hydraulikzylindern, Ändern von Maßen, Umdimensionierung von Gelenkelementen, ....) etc...
Prinzipiell sind alle 3D-Rohdaten aus CAD-Systemen geeignet. Häufig bekommen wir z. B. STL, STEP, STP, 3DS oder OBJ Daten. Es empfiehlt sich dringend, vorab intensiv 3D-Exporte sowie genaue Export-Einstellungen durchzutesten, um in der Weiterverarbeitung keine unnötigen Mehraufwände zu generieren. Dieser Punkt wird oft unterschätzt, entscheidet am Ende aber oft über die Wirtschaftlichkeit von Projekten.
Three.js ist eine JavaScript 3D-Bibliothek (3D-Libary), welche die Rendere "canvas", "svg" , "CSS3D" und "WebGL" unterstützt. Three.js ermöglicht die Erstellung von GPU-beschleunigten 3D-Animationen, die in einer Website integriert werden können. Dabei ist hervorzuheben, das keine proprietäre Browser-Plugins notwendig sind, sondern moderne Browser WebGL bereits von Hause aus unterstützen. Auf der Website von GitHub können Sie das aktuelle Entwicklerpaket herunterladen. Unter dem Link finden Sie die Entwicklerseite mit zahlreichen beeindruckenden Beispielen: Website ThreeJS