HTML5: Dekorative WebGL-Shader für jedermann mit pavoq

Bewegte Grafik auf Websites ist in. Dabei stehen dir verschiedene Methoden zur Verfügung. Der Marktplatz pavoq.com konzentriert sich auf WebGL als Werkzeug der Attraktivitätssteigerung. Schauen wir uns das mal genauer an.

Bewegte Grafik auf Websites muss nicht mit Videos erzeugt werden. Das liegt zwar im Trend, ist aber nicht in jedem Fall erforderlich. Gerade, wenn es nur darum geht, den Hintergrund interessant zu animieren, zum Beispiel mittels einer rotierenden Farbwolke, wäre ein Video Overkill. Das gilt nicht zuletzt für das Dateigewicht, das der Besucherbrowser handhaben muss. Nicht selten sprechen wir hier über mehrere Megabyte zu übertragender Daten.

Viel schneller, im Sinne von performanter und leichtgewichtiger, erledigst du solche Tasks unter Zuhilfenahme von WebGL-Shaders, die in der Regel unter zehn Kilobytes wiegen. Wenn dir der Begriff Assoziationen mit böhmischen Dörfern ins Gedächtnis ruft, sei unbesorgt, wir schauen kurz auf die Basics.

Was ist WebGL?

WebGL, in Langform „Web Graphics Library”, ist eine JavaScript-API, die das Rendern von 2D- und 3D-Grafik nativ in unterstützten Browsern ermöglicht. Dabei lehnt sich die API nah an OpenGL an und kann im Canvas-Element des HTML5-Standards verwendet werden.

WebGL wird derzeit von jedem aktuellen Browser verstanden. Eine Ausnahme bildet der ewig nicht aktualisierte Opera Mini. Ansonsten darfst du davon ausgehen, dass deine BesucherInnen WebGL auf allen Geräten und Betriebssystemen und mit allen Browsern einwandfrei konsumieren können.

WebGL-Anwendungen bestehen aus JavaScript-Code, der zur Steuerung der Ausgabe verwendet wird und den eigentlichen optischen Effekten, dem Shader-Code, der direkt vom Grafikprozessor (GPU) des Gerätes, mit dem deine BesucherInnen dich aufsuchen, interpretiert wird. Dadurch, dass du WebGL und sonstige HTML-Elemente frei mischen kannst, ist es möglich, sehr abwechslungsreiche Websites zu erstellen.

Was ist ein Shader?

Der Shader, genau genommen ein Shader-Paar, sorgt für den eigentlichen optischen Effekt. Lediglich die Steuerung des Aufrufes erfolgt mittels JavaScript.

Ein Shader-Programm besteht aus einem Funktions-Paar eines Vertex Shaders und eines Fragment Shaders. Shader programmierst du mit einer stark a C/C++ erinnernden Sprache namens GLSL (GL Shader Language), deren Syntax nicht sehr fehlertolerant ist. Du dachtest dir sicherlich schon, dass Mathematik zu deinen Stärken gehören sollte, wenn du dich mit dem Entwickeln von Shader-Programmen befassen möchtest.

Zwischenfazit für den Webdesigner

Auch wenn du dein HTML, CSS und JavaScript aus dem Effeff beherrscht, befähigt dich das nicht im Ansatz, interessante Shader zu entwickeln. Das bleibt letztlich spezialisierteren Fachleuten vorbehalten.

Das bedeutet jedoch nicht, dass dir der Einsatz von WebGL verwehrt bleiben würde. Lass mich dir pavoq.com vorstellen.

WebGL-Shader für jedermann mit Pavoq.com

pavoq.com ist ein recht neuer Marktplatz, auf dem Shader-Entwickler ihre Entwicklungen zum Kauf anbieten können. Dabei kümmert sich pavoq nicht nur um das Wrapping des Shader-Codes in das erforderliche JavaScript. pavoq verspricht zudem, sich um die lizenzrechtliche Seite des Einsatzes insoweit zu kümmern, als dass der Diebstahl von Shader-Code weitestgehend unterbunden wird.

pavoq.com wird von der deutschen CurrySoftware GmbH aus Nürnberg betrieben. Der Fokus des Marktplatzes liegt klar auf Shadern, die dekorativen Zwecken dienen, wie etwa diesem hier:

Der Vorteil für Shader-Entwickler ist offensichtlich, können sie sich doch voll auf die eigentliche Entwicklung konzentrieren, während der gesamte restliche Weg zum Kunden und in den Einsatz auf der konkreten Website über pavoq abgewickelt wird. Sogar einen GLSL-Editor bietet pavoq kooperierenden Developern. Dafür teilen sich Entwickler und Marktplatz den Erlös im Verkaufsfalle. Die Anteile gestalten sich in Größenordnungen, wie man sie auch von anderen Marktplätzen kennt.

Zum Zeitpunkt des Erscheinens dieses Beitrags verfügt der Marktplatz über mehr als ein Dutzend hochwertiger Shader, die vielfach durch den Kunden vor dem Kauf personalisiert werden können, etwa im Rahmen einer Farb- oder Geschwindigkeitsanpassung oder anderer Parametrisierungen. Der Einbau ist überall da möglich, wo du Zugriff auf den HTML-Code hast.

Bislang ist es noch nicht erforderlich, pavoq mit ausgefeilten Suchfunktionen auszustatten. Das manuelle Durchstöbern des Angebots reicht völlig aus und bringt nicht zuletzt auch inspirative Effekte mit sich. Stößt du während des Stöbern auf einen dich interessierenden Shader, klickst du ihn an und kommst auf dessen Detailseite.

Shader-Detailseite auf pavoq.com (Screenshot: Dr. Web)

Von hier aus nimmst du die Anpassung vor und erwirbst letztlich die Lizenz. Was du von hier jedoch auch anstoßen kannst, ist ein Test des jeweiligen Shaders für deine eigene Website. So siehst du schon vorher, was dich hinterher erwartet. Die Anweisungen zur Durchführung des Tests werden dir an deine E-Mail-Adresse gesendet.

Fazit: Shader für jedermann sind machbar

pavoq.com ist ein Nischenangebot und so ist zu erwarten, dass das Portfolio recht langsam wachsen wird. Für denjenigen, der auf der Suche nach WebGL-Elementen statt riesiger Videos ist, ist der Dienst bereits jetzt ein Juwel im Werkzeugkasten.

Bevor du künftig für Animationen auf Videos setzt, schau auf jeden Fall zunächst bei Pavoq vorbei. Das Testen ist einfach und kostenlos, sowie für jeden der angebotenen Shader möglich. Benutze einfach den Button mit der Aufschrift „Test for Free”, gib eine gültige E-Mail-Adresse an und schau dir den gewählten Shader 14 Tage risikofrei an.

Schreibe einen Kommentar