GLSL-Transition – Bilder-Slideshow im Browser mit WebGL
Kommentare

Mit WebGL kann man eine ganze Menge anstellen: Browserspiele mit hardwarebeschleunigten 3-D-Grafiken, in Webseiten integrierte 3-D-Objekte, 3-D-Demos und ähnliche grafisch anspruchsvolle Anwendungen.

Mit WebGL kann man eine ganze Menge anstellen: Browserspiele mit hardwarebeschleunigten 3-D-Grafiken, in Webseiten integrierte 3-D-Objekte, 3-D-Demos und ähnliche grafisch anspruchsvolle Anwendungen. Dass WebGL aber auch ganz andere Use Cases haben kann, veranschaulicht das Projekt GLSL-Transition von Gaëtan Renaudeau,mit dem man WebGL-unterstützte Bilder-Slideshows im Browser darstellen kann. Einen ersten Überblick über die Funktionsweise von  GLSL-Transition kann man sich auf der Beispielseite des Entwicklers verschaffen.

Das Prinzip ist im Grunde sehr einfach: GLSL-Transition erzeugt Übergänge zwischen den einzelnen Bildern, so dass diese nicht einfach statisch aneinander gereiht werden, sondern – die 3-D-Beschleunigung von WebGL macht’s möglich – butterweich ineinander fließen. Dabei kann man zwischen einer ganzen Reihe von Effekten auswählen: vom Schachbrett-Muster über Kräuselbewegungen bis hin zum langsamen Verschwimmen des Bildes. Die Übergangsdauer sowie die Verzögerungszeit zwischen den einzelnen Bildern lassen sich vom User individuell festlegen.

GLSL-Transition funktioniert auf allen Browsern, die WebGL unterstützen (z. B. Safari, Chrome, Firefox, Opera). Wer sich hier nicht ganz sicher ist, geht einfach auf folgende Test-Webseite. Runterladen könnt Ihr Euch das Projekt auf Github, dort gibt es auch eine umfassende Dokumentation und Codebeispiele wie man die Transitions in den Browser einbindet.

 

 

 

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -