Was wäre das moderne Internet ohne WebGL? Diese fortschrittliche Technologie wird in immer mehr Bereichen eingesetzt, von 3D-Visualisierungen in Spielen und virtueller Realität über physikalische und Datensimulationen bis hin zu künstlerischen Arbeiten. Lassen Sie uns tiefer in dieses Thema eintauchen, um zu verstehen, wie wichtig WebGL für die Zukunft des Webdesigns ist.
Was ist WebGL?
WebGL lässt sich am besten als eine JavaScript-API beschreiben, die es ermöglicht, interaktive 2D- und 3D-Vektorgrafiken im Browser zu implementieren, indem die Grafikverarbeitungseinheit (GPU) des Clients genutzt wird. Sie basiert auf der OpenGL-Bibliothek, die seit 2002 existiert. Praktische Beispiele für den Einsatz von WebGL sind die 3D-Funktion von Google Maps und die Spiele-Engine von Unity.
Anwendung von WebGL: Schritt-für-Schritt-Anleitung
Für unseren Kunden Health Maniacs haben wir für das Projekt „Healthcare in France“ eine Animation erstellt. Das Ziel war nicht unbedingt, dem Benutzer zu helfen, sondern die Webseite visuell ansprechender zu gestalten. Bei der Gestaltung wollten wir ein grafisches oder visuelles Element integrieren, das an Medizintechnik erinnert.
Der Beginn
Zuerst erstellten wir eine wellenförmige Grafik in Adobe Illustrator und speicherten sie als .svg-Datei ab. Diese svg-Datei wurde in das Design (eine Figma-Datei) importiert, was uns eine gute Vorstellung davon gab, wie das endgültige Design aussehen sollte.
6 Optionen für Webanimationen
Um aus einem statischen Design eine Animation zu machen, hatten wir mehrere Möglichkeiten:
- Die bereits konstruierte .svg-Datei aus dem Design nehmen und mit einer Animationsbibliothek wie animeJs animieren.
- HTML-Elemente wie Spann verwenden und mit einer Animationsbibliothek wie animeJs animieren.
- Das native HTML-Canvas-Element verwenden, um die Linien zu zeichnen und mit einer Animationsbibliothek wie animeJs zu animieren.
- Eine Abstraktion des nativen HTML-Canvas wie PixiJs oder p5Js verwenden.
- Eine WebGL-Bibliothek wie ThreeJs verwenden.
- Unsere eigene native WebGL-Implementierung schreiben.
Wir haben uns für eine eigene native WebGL-Implementierung entschieden. Warum? Die Verwendung von nativem WebGL hat gegenüber nativem Canvas den Vorteil, dass wir teilweise GLSL-Code verwenden können, der auf der GPU ausgeführt wird. Im Vergleich dazu erfordern alle anderen Optionen, dass die gesamte Arbeit (einschließlich des nativen Canvas) auf der CPU ausgeführt wird. Da die Wellengrafik relativ einfach zu erstellen war (sie ist nicht einmal 3D, so dass keine komplizierten Berechnungen erforderlich sind), entschieden wir uns für die Erstellung mit nativem WebGL. Das bedeutete, so wenig JS wie möglich zu schreiben und gleichzeitig die bestmögliche Performance bei der Verwendung von Shadern (geschrieben in GLSL) zu erzielen.
Gestalten Sie WebGL nach Ihren Wünschen
Das Erstellen von schönen Animationen mit WebGL kann auch einige Herausforderungen mit sich bringen. Hier sind einige Tipps, um diese zu überwinden:
- Das Zeichnen von Linien in WebGL ist einfach, aber nicht sehr flexibel. Nicht alle Browser erlauben es uns, die Breite der Linie festzulegen. Anstelle von Linien könnten Sie daher Rechtecke verwenden. Auf diese Weise könnten Sie die Breite jeder „Linie“ (1, 2 oder eine beliebige Größe in Pixeln) definieren.
- Das Zeichnen von beispielsweise 100 Rechtecken erfordert 100 Draw-Calls in WebGL, was recht leistungsintensiv ist. Eine bessere Option wäre die Verwendung einer Methode namens instanziiertes Zeichnen. Dabei wird eine Quellform kopiert und in verschiedenen Positionen platziert, sodass nur ein Draw-Call erforderlich ist.
- Verwenden Sie die GPU für alle schweren Animationsberechnungen, indem Sie Shader (in GLSL geschrieben) verwenden. Versuchen Sie außerdem, die CPU-Berechnungen (JS) auf ein Minimum zu beschränken.
Unser Ansatz
Wir begannen mit der Erstellung einer Vue-Komponente, die eine Anzahl von horizontal gleichmäßig verteilten Rechtecken auf einem Canvas-Element rendert. Dann berechneten wir die Anzahl der Instanzen neu, wenn sich der verfügbare Platz änderte (Browsergröße änderte sich). Anschließend wurde jede Instanz kontinuierlich transformiert (Skalierung auf der Y-Achse), um die Wellenform zu erhalten. Wir verwendeten Perlin-Noise (eine Art Gradientenrauschen, das verwendet wird, um den Realismus zu erhöhen), um die zufällige Wellenform zu erhalten. Schließlich gab es noch den Vertex-Shader-Code, der die Position und Transformation für jedes Rechteck individuell berechnet.
WebGL eröffnet ungeahnte Möglichkeiten im Webdesign und ermöglicht eine völlig neue Ebene der visuellen Kommunikation und Interaktivität. Durch die effiziente Nutzung der GPU lassen sich komplexe Grafiken und Animationen realisieren, die das Nutzererlebnis auf Webseiten deutlich bereichern und gleichzeitig performant bleiben. WebGL ist zweifellos ein nicht mehr wegzudenkendes Werkzeug in der modernen Webentwicklung.