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 Tele­kom­munikationsanbieter 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 Wahr­nehmung von Sportlern, Künstlern oder Schauspielern zappen kann. So konnte man, wie in unserem Beispiel hier, am heimischen PC den Videostream live aus dem Cock­pit 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 Echt­zeit im Browser berechnet wurden. Für diese Verfrem­dung 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 mach­bar, 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.


Schlagworte: , , ,




Branding, Corporate Design, Design, Strategie

Kommentieren

Einfach mit dem PAGE Account anmelden oder Formular ausfüllen

Name *

Email *

*Pflichtfeld

Ihr Kommentar *

 
 

Das könnte Sie auch interessieren