Tag: inspiration
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.
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.
Mobile UI Patterns: Beispiele für mobile Anwendungen
Inspirationsquellen werden im Bereich des Webdesigns immer wichtiger, da hier stetig neue Trends entstehen. Seiten wie Pattern Tap, Design Meltdown oder MephoBox leisten hier sehr gute Dienste. Wer auch Inspirationen für mobile Anwendungen sucht, ist nun auch mit den Mobile UI Patterns gut bedient: Hier finden sich seit kurzem diverse Screenshots von iPhone-Anwendungen, die in unterschiedliche Kategorien eingeteilt sind.
Mobile UI Patterns stellt eine sehr einfache Sammlung ohne besondere Such- oder Filtermöglichkeiten dar. Elemente können durch Kategorien angesehen werden — dazu zählen beispielsweise "Activity Feeds", "Dashboard Navigation", "Grouped Table Views" oder "Custom Tab Navigation".
Die Sammlung ist derzeit noch recht übersichtlich, dürfte aber mit der Zeit wachsen und gehört daher in die Lesezeichen.
ThreeNodes.js: Modulares Node-System für WebGL
Wer grafisch aufwendige Echtzeit-Visualisierungen mit 3D-Szenen realisieren will, ohne dabei Code schreiben zu müssen, greift auf ein Toolkit wie vvvv (v4) zurück: Durch das Verbinden von Knotenpunkten (Nodes) können Effekte aller Art erzeugt werden. Derartige Node-Systeme finden ihre Anwendung eigentlich in komplexen Video- und VFX-Applikationen wie Fusion oder den Compositing-Tools von Autodesk. Aber auch die Textur-Software Filter Forge basiert auf dem Modell der Knotenpunkte.
Mit vvvv lassen sich wie gesagt Echtzeit-Animationen auf 3D-Ebene erstellen und seit geraumer Zeit ist auch eine JavaScript-Portierung vorhanden. Eine weitere Anwendung dieser Gattung, die zudem von WebGL und Three.js Gebrauch macht, stellt ThreeNodes.js dar.
Die Webanwendung funktioniert ähnlich wie vvvv und erlaubt es, 3D-Animationen durch das Verbinden von Nodes zu erzeugen und in Echtzeit zu verändern. Eine Live-Demo gibt es auf dieser Seite, wobei es sich hierbei noch um eine Alpha-Version handelt. Da durch WebGL die Grafikkarte direkt angesprochen wird, kann es durchaus vorkommen, dass aufgrund intensiver Rechenoperationen der Browser einfrieren kann. Effekte sollten also mit Bedacht ausgeführt werden.
Dennoch stellt das ThreeNodes-Projekt einen interessanten Ansatz dar, um auch ohne Programmierkenntnisse 3D-Szenen mit WebGL zu erstellen und auszuprobieren.
Peoplemov.in: Visualisierung von Wanderungsströmen
Zwar noch aus dem letzten Jahr, aber dennoch interessant, ist das experimentelle Projekt Peoplemov.in von Carlo Zapponi: Bei der Seite handelt es sich um eine interaktive Visualisierung, welche die weltweiten Ein- und Auswanderungen darstellt und erforschbar macht. Das riesige Flussdiagramm, das auf offenen Daten der World Bank basiert, wurde anfangs mit SVG umgesetzt. Allerdings stellte der Entwickler bald fest, dass sich derartig komplexe Grafiken nicht effektiv mit SVG darstellen lassen und wechselte schließlich zu HTML5 und Canvas.
Entstanden ist eine anschauliche Darstellung von Graphen, welche die Einwohnerzahl verschiedener Länder sowie deren Ein- und Auswanderer repräsentieren. Während auf der linken Seite des Diagramms die Auswanderungen angesehen werden können, finden sich auf der rechten Seite die Einwanderer, die ebenfalls nach Land sortiert sind. Die Zahlen stammen aus dem Jahr 2010, weshalb die Visualisierung nicht mehr ganz aktuell ist. Dennoch zeigt das Projekt die Möglichkeiten von HTML5 und Carlo Zapponi plant zudem, das Toolkit zu veröffentlichen, mit dem er das Ganze realisiert hat.
Shader Toy: Interaktive Beispiele für WebGL-Shader
WebGL steckt inzwischen nicht mehr in den Kinderschuhen, sondern erfreut sich immer mehr Akzeptanz. Frameworks, Tutorials und diverse Projekte zeigen schon heute, was mit dem Webstandard möglich ist. Und dennoch gibt es auch ältere Projekte, die schon mit den experimentellen Versionen von WebGL beeindruckende Effekte aufgezeigt haben. Dazu zählt etwa das Shader Toy von Iñigo Quilez, mit dem sich 43 vordefinierte Shader ausprobieren und verändern lassen.
Bei einem Shader handelt es sich um ein Programm, das durch GLSL (OpenGL Shading Language) Anweisungen an die Grafikkarte übermitteln kann. Damit wird also die GPU direkt angesprochen und hier liegt der eigentliche Vorteil, denn erst dadurch wird Hardwarebeschleunigung möglich. Im Bezug auf WebGL wird dies durch HTML5 bzw. "canvas.getContext('webgl')" realisiert: GLSL-Befehle (so auch die Hauptfunktion "void main()") können an einen Vertex- und einen Fragment-Prozessor übergeben werden, die dann entweder einzelne Eckpunkte (Vertices) oder Fragmente (Pixel) gezielt verändern können. Das Shader Toy macht genau davon Gebrauch und bietet verschiedene Shader, die sowohl zwei- als auch dreidimensional eingesetzt werden können. Die Shader werden als Fragment-Shader ausgeführt, da sie nur Pixel-Transformationen durchführen. Ein Blick auf die anderen Anwendungen und Projekte von Iñigo Quilez lohnt sich, da er sehr interessante Anwendungen in diesem Bereich entwickelt hat.
Mozilla Popcorn: HTML5-Videos interaktiv machen
Seit Anwendungen wie Adobe Edge oder Radi ist die Bearbeitung von HTML5-Videos sehr komfortabel geworden. Auch bei Mozilla werden in diesem Bereich interessante Projekte entwickelt, die zukunftsweisend sein könnten. Ein Projekt, das kürzlich in verschiedenen Varianten veröffentlicht wurde, stellt Popcorn dar: Dazu gehört zum einen der Popcorn Maker, der als eine grafische Webanwendung für das Erstellen von interaktiven HTML5-Videos zu verstehen ist. Damit lassen sich Videos in entsprechenden Formaten (WebM, OGV, MP4) mit verschiedenen Elementen (Texte, Bilder, etc.) versehen, ohne dass dabei Code geschrieben werden muss. Die Bearbeitung mit dem Werkzeug ähnelt einem klassischen Video-Editor und ist sehr intuitiv. Angetrieben wird der Popcorn Maker von "Butter.js", einer separaten JavaScript-Bibliothek von Mozilla, die unter Anderem eine Timeline und Live-Previews bietet.
Den anderen Teil des Popcorn-Projekts stellt das JavaScript-Framework Popcorn.js dar, mit dem sich Videos sehr einfach mit HTML-Elementen versehen und erweitern lassen. Zudem bietet das Framework eine Plugin-Schnittstelle, so dass auch sehr leicht Erweiterungen geschrieben werden können. Im Blog-Eintrag von Mozilla finden sich weitere Informationen und Details zum Projekt.
WebGL Water: Fallstudie über Wasser und Reflektionen
Erst kürzlich beeindruckte Evan Wallace mit seiner Web-Anwendung WebGL Filter, mit der sich per HTML5 diverse Effekte auf Bilder anwenden lassen. Nun hat der Entwickler ein zweites Projekt veröffentlicht, das als weitere Fallstudie für WebGL angesehen werden kann: Sein Experiment "WebGL Water" zeigt eine simple 3D-Szene, die Gebrauch von Raytracing, Ambient Occlusion, Soft Shadows, Height-Maps und Kaustik macht.
In dem Beispiel befindet sich eine Sphäre in einem Behälter, der mit Wasser gefüllt ist. Per Tastatur können Gravitation und Lichter verändert werden und sobald die Kugel auf der Wasseroberfläche auftritt, entstehen entsprechende Wellen und Deformationen. Das Experiment ist sehr gelungen, allerdings wird die Grafikkarte auch gefordert, weshalb beim Betrachten des Beispiels eventuell etwas Geduld gefordert ist.
jQuery Timelinr: Plugin für interaktive Zeitstrahlen
Um besondere Ereignisse oder den Verlauf eines Projekts visuell darzustellen, eignen sich Zeitstrahlen sehr gut. Besonders interaktive Timelines erfreuen sich immer größerer Beliebtheit. Mit jQuery lässt sich ein solches Widget gut umsetzen und genau darum handelt es sich bei jQuery Timelinr von CSSLab. Mit dem Plugin können sowohl vertikale als auch horizontale Zeitstrahlen erstellt und mit Interaktionen versehen werden.
Das Plugin bietet eine Autoplay-Funktion und blendet die verschiedenen Zeitabschnitte bzw. Ereignisse durch unterschiedliche Effekte ein. Innerhalb eines Zeitabschnitts kann über die Jahreszahlen oder alternative Schaltflächen navigiert werden. Die Effekte, die Dauer sowie Navigationsmöglichkeiten lassen sich über die Optionen des Skripts einstellen. Die horizontale Beispiel-Version eines Zeitstrahls findet sich auf dieser Seite.