Mit WebGL-Shadern lassen sich nicht nur Texturen und Lichteffekte dreidimensionaler Objekte berechnen, man kann sich auch nutzen, um Video-Clips zu verfremden.
● WebGL eignet sich nicht nur für die Darstellung dreidimensionaler Objekte im Browser, mit den Shadern der Grafikbibliothek lassen sich auch Video-Clips und sogar Livestreams rendern und gleichzeitig manipulieren, so wie es die Stockholmer Digitalagentur Wolfmother in einer Kampagne für den schwedischen Telekommunikationsanbieter Tele2 umgesetzt hat.
Gemeinsam mit Edelman Deportivo, Wolfmother und Your Majesty entwickelten die Schweden das Setup, bei dem man sich am Desktop-Rechner live in die subjektive Wahrnehmung von Sportlern, Künstlern oder Schauspielern zappen kann. So konnte man wie in unserem Beispiel hier am heimischen PC den Videostream live aus dem Cockpit des Rennwagens der palästinensischen Motorsportlerin Noor Daoud verfolgen.
Um die subjektive Wahrnehmung visuell zu vermitteln, wurde der Videostream Bild mit verschiednen Effekten manipuliert, die sich in Echtzeit im Browser berechnen lassen. Für diese Verfremdung kann man die Shader der Grafikbibliothek WebGL nutzen. Diese Rechenroutinen berechnen in der Regel Licht und Schatten von 3D-Objekten. Darüber hinaus sind aber auch weitere Manipulationseffekte machbar: In der Programmiersprache OpenGL Shading Language (GLSL) ist es möglich, eigene Shader auf dem Grafikprozessor auszuführen. Mattias Ottosson, Director of Technology und Gründer der Stockholmer Digitalagentur Wolfmother, erklärt wie drei dieser Effekte mit WebGL-Shadern umgesetzt wurden:
Video einfärben per Fragment-Shader
Das auffälligste Gestaltungselement des Videos ist die farbliche Verfremdung. Um das Bild in die der Verfassung des Protagonisten entsprechende Farbe zu tauchen, färben wir jeden einzelnen Pixel, während WebGL ihn auf das Canvas-Element mappt, entsprechend ein. Hierfür nutzen wir die Pixel- oder auch Fragment-Shader.
Download Code
Herzschlag-Effekt anlegen
Auch für diesen Effekt haben wir einen eigens programmierten Shader eingesetzt, der den Herzschlag des Akteurs in einen in Herfrequenz pumpenden visuellen Effekt umsetzen soll. Dafür lassen wir WebGL zunächst in der Mitte des Bilds einen (für den Nutzer unsichtbaren) Kreis zeichnen. Das Bild innerhalb dieses Kreises lassen wir im Herzrhythmus auf 115 Prozent vergrößern und wieder auf normale Grtöße schrumpfen, sodass ein pumpender Effekt entsteht.
Download Code
Fokus-Effekt einrichten
In diesem Fall wollen wir die konzentrierte Haltung des Protagonisten visuell nachempfinden. Unsere Idee: Der Blick konzentriert sich auf das Zentrum des Videos, alles Umliegende verschwimmt etwas und wird unscharf. Dies funktioniert ähnlich wie beim Herzschlag-Effekt. Für diesen Effekt ziehen wir einen Kreis im Zentrum des Bilds, und wenden auf den Bereich außerhalb des Kreises einen Filter an, der ihn etwas verzerrt und undeutlich macht.
Download Code
