201227Mär

CSS3D Clouds: Studie über animierte Wolken mit CSS

Die Erzeugung von volumetrischen Wolken zählt hauptsächlich zum Bereich der Spieleentwicklung. Dort gibt es verschiedene Möglichkeiten, um realistisch wirkende Wolken darzustellen. Im Webbrowser hat Mr.doob bereits ein Beispiel auf WebGL-Basis entwickelt, das schon in ROME eingesetzt wurde. Ganz ohne WebGL und nur durch den Einsatz von CSS3D-Transformationen kommt dieses Experiment von Jaume Sánchez aus.

CSS3D Clouds

Im Endeffekt ähnelt das Beispiel der WebGL-Umsetzung von Mr.doob: Es werden einfach zweidimensionale Flächen (Sprites) mit Texturen belegt und durch Verzerrungen im Raum angeordnet. Durch die geschickte Kombination von verschiedenen Texturen entstehen derartige Wolken-Bilder. Das CSS-Beispiel erlaubt zudem, Explosionen und Rauch hinzuzufügen. Der Effekt ist sehr anschaulich und demonstriert, was sich mit relativ wenig Aufwand darstellen lässt.

Kommentare

lovecss schrieb am 20.04.2012 #1

ich glaube, ich habe in den letzten jahren geschlafen
die wolken sind leider geil!