WebGL & Three.js – FAQ – Frequently Asked Questions

Was ist WebGL?
- 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.
Einsatzmöglichkeiten von WebGL
- 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 für Desktops, Tablets und Smartphones mit WebGL
- 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.
- Möglioche 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
  - Schmuck, Lebensmittel-Variationen, Müsli, Tee, Parfüm,…
  - Sets: Fertighäuser, Gartenhäuser, Kleidung, Zäune, Mülltonnensysteme, Tisch-, Regal- und Schranksysteme,…
Animationen mit WebGL und Three.js
- 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).
- 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.
- Ebenfalls möglich ist die Darstellung komplexer Charakteranimationen für Spiele, Lehrfilme, oder Werbetrailer.