So entwickelt man eigene Shader für WebGL
Mit WebGL-Shadern lassen sich nicht nur Texturen und Lichteffekte dreidimensionaler Objekte berechnen, man kann sie 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 und Your Majesty entwickelte Wolfmother 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 – aufgenommen mit einer an einem Helm montierten Action-Camera.
Um die subjektive Wahrnehmung visuell zu vermitteln, wurde der Videostream mit verschiednen Effekten manipuliert, die sich in Echtzeit im Browser berechnet wurden. Für diese Verfremdung kann man die Shader der Grafikbibliothek WebGL nutzen – Rechenroutinen, die in der Regel Licht und Schatten von 3D-Objekten berechnen. Darüber hinaus sind aber auch weitere Manipulationseffekte machbar, indem man in der Programmiersprache OpenGL Shading Language (GLSL) eigene Shader programmiert. Mattias Ottosson, Director of Technology und Gründer der Stockholmer Digitalagentur Wolfmother, erklärt wie drei Effekte des Projekts mit WebGL-Shadern umgesetzt wurden – inklusive Beipiel-Code zum Download:
Video einfärben per Fragment-Shader
Das auffälligste Gestaltungselement der Videos in diesem Projket ist eine 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
Unseren Bericht über die ganze Kampagne und Erläuterungen zum kompletten technischen Setup lesen Sie in der PAGE Ausgabe 06.2017.
Das könnte dich auch interessieren
