Dreidimensional ins Web – WebGL mit Three.Js

WebGL und Three.js wird in Zukunft immer beliebter. Three.js ist eine offene Javascript Umgebung die auf WebGL basiert und welche es ermöglicht einfach 3D Modelle zu erstellen, laden oder sogar zu manipulieren.

Um die Bibliothek zu testen wurde von mir eine kleine Testseite erstellt, welche das aktuelle Wetter in Salzburg mit einfachen 3D Modellen wie Wolken, Sonne und Regentropfen visualisiert. Natürlich gibt es unendlich weitere Möglichkeiten was man alles mit dieser Bibliothek machen kann.

Weiters ist es relativ einfach möglich mit Blender ein Modell zu exportieren, um es dann über Three.js und ein paar Zeilen Code laden und z.B. rotieren lassen kann.

07091531_MpCa
3D im Browser

Es ist sogar möglich Spiele oder interaktive Musikvideos zu gestalten und damit ganz neue Wege des Webs zu erschaffen. Interessant wird wie sich diese neue Dimension in den nächsten paar Jahren weiter entwickeln wird.

Zukünftig könnte man ja dann auch Augmented Reality Anwendungen dafür erstellen, wie z.B. bei einem Optiker wo eine dreidimensionale Betrachtung des Produktes am Kopf des Kunden möglich wäre.

3D Musik- und Soundvisualisierung mit Blender

Die meisten meiner Youtube Videos sind 3D Soundvisualisierungen, welche ich mit dem kostenlosen open-source Tool Blender erstellt habe. Mit Blender ist es möglich, die Musik oder den Sound im MP3 Format bequem hinein zu laden. Die Musik oder Sounds werden dann als Kurven dargestellt. Es ist sogar möglich beim laden den Frequenzbereich einzustellen. Damit kann man alle möglichen Werte eines Objektes wie z.B.: Skalierung, Rotation, Farbe usw. mit einem bestimmten Frequenzbereich animieren. Es lassen sich somit alle möglichen Eigenschaften mit den Musikdaten kombinieren.

Hier ein paar Beispiele, welche ich selbst mit Blender erstellt habe: