© saicle/Shutterstock.com
PHP Magazin
3-D im Browser mit Three.js

Die dritte Dimension

Three.js verspricht, eine leichtgewichtige Bibliothek für die Entwicklung von 3-D-Computergrafik im Browser zu sein. Laut der Readme-Datei aus dem Three.js Repository sogar so einfach, dass es mit den Worten „for dummies“ beschrieben wird. Dieser Aussage wollen wir auf den Grund gehen.

Dennis John Wilson


Durch den „for dummies“-Zusatz mag unmittelbar der falsche Eindruck entstehen, dass sich Three.js lediglich für kleine und weniger anspruchsvolle Projekte eignet. Schnell gelangt man zu der Erkenntnis, dass mit der Aussage vor allem eines gemeint ist: pragmatisches, produktives und effizientes Entwickeln ohne unnötigen Overhead. Denn das Hauptaugenmerk der Bibliothek liegt neben der Kapselung sämtlicher, komplexer Prozesse in diverse Renderer vor allem darin, die Implementierung in eigene Anwendungen möglichst einfach und einheitlich zu gestalten. Das bedeutet konkret: Three.js ­kommt mit einem umfangreichen Repertoire daher. Angefangen mit Vektoren über Meshes bis zum kompletten Scene-Graph bietet die Bibliothek eine Menge Klassen und Helper, die für gute grafische Entwicklung maßgeblich sind.

Die Computergrafik hat seit Mitte der 80er Jahre eine enorme Entwicklung durchlebt. Aus 2-D-Pixel-Grafik wurden quasi 3-D-Weltsimulationen. Die Komplexität der Methoden und Techniken im Bereich des maximal Machbaren ist stark angestiegen. An den Urprinzipien des Renderings hat sich allerdings nicht sehr viel geändert. Zwar setzt man auf komplexere Hardware, die Pre- und Post-Processing der Bilder erlaubt, aber es gilt noch immer der Grundsatz grafischer Echtzeitanimation: rechnen, zeichnen, warten, wiederholen.

Diese Tatsache machen sich die Three.js-Autoren geschickt zunutze. Denn auch heute, im Web, gibt es eine Vielzahl verschiedener grafischer Technologien und APIs. Die wichtigsten sind vermutlich HTML/CSS3, SVG, Canvas und WebGL. Three.js ist zunächst API-unabhängig ausgerichtet. Wie gesagt, sind viele Helper und weitere nützliche Klassen vorhanden.

Bis auf wenige, fallspezifische Ausnahmen handhaben die übrigen Klassen vor allem eher abstrakte und mathematische Notwendigkeiten. Vergleicht man die Arbeitsteilung von Three.js mit dem Ansatz eines MVC, bestünde Three.js überwiegend aus Modellen und Helpern. Es geht darum, die Informationen zur Darstellung von 3-D-Objekten und -Szenen strukturiert erzeugen und verwalten zu können. Unabhängig von der Rendering-Technologie ist man in der Regel dazu gezwungen, genau diese Teile mühsam selbst zu entwickeln. Vektoren, Matrizen, Rotationen, Quaternionen, Primitive, Materialien. An nahezu alles wurde hier gedacht. So kann man sich beispielsweise Standardformen wie Würfel über eine Factory erzeugen lassen und dann Rotationen über ein Rotation Property auf der Instanz des Würfels vornehmen. Ebenso sind Verschiebung und Ska...

PHP Magazin
3-D im Browser mit Three.js

Die dritte Dimension

Three.js verspricht, eine leichtgewichtige Bibliothek für die Entwicklung von 3-D-Computergrafik im Browser zu sein. Laut der Readme-Datei aus dem Three.js Repository sogar so einfach, dass es mit den Worten „for dummies“ beschrieben wird. Dieser Aussage wollen wir auf den Grund gehen.

Dennis John Wilson


Durch den „for dummies“-Zusatz mag unmittelbar der falsche Eindruck entstehen, dass sich Three.js lediglich für kleine und weniger anspruchsvolle Projekte eignet. Schnell gelangt man zu der Erkenntnis, dass mit der Aussage vor allem eines gemeint ist: pragmatisches, produktives und effizientes Entwickeln ohne unnötigen Overhead. Denn das Hauptaugenmerk der Bibliothek liegt neben der Kapselung sämtlicher, komplexer Prozesse in diverse Renderer vor allem darin, die Implementierung in eigene Anwendungen möglichst einfach und einheitlich zu gestalten. Das bedeutet konkret: Three.js ­kommt mit einem umfangreichen Repertoire daher. Angefangen mit Vektoren über Meshes bis zum kompletten Scene-Graph bietet die Bibliothek eine Menge Klassen und Helper, die für gute grafische Entwicklung maßgeblich sind.

Die Computergrafik hat seit Mitte der 80er Jahre eine enorme Entwicklung durchlebt. Aus 2-D-Pixel-Grafik wurden quasi 3-D-Weltsimulationen. Die Komplexität der Methoden und Techniken im Bereich des maximal Machbaren ist stark angestiegen. An den Urprinzipien des Renderings hat sich allerdings nicht sehr viel geändert. Zwar setzt man auf komplexere Hardware, die Pre- und Post-Processing der Bilder erlaubt, aber es gilt noch immer der Grundsatz grafischer Echtzeitanimation: rechnen, zeichnen, warten, wiederholen.

Diese Tatsache machen sich die Three.js-Autoren geschickt zunutze. Denn auch heute, im Web, gibt es eine Vielzahl verschiedener grafischer Technologien und APIs. Die wichtigsten sind vermutlich HTML/CSS3, SVG, Canvas und WebGL. Three.js ist zunächst API-unabhängig ausgerichtet. Wie gesagt, sind viele Helper und weitere nützliche Klassen vorhanden.

Bis auf wenige, fallspezifische Ausnahmen handhaben die übrigen Klassen vor allem eher abstrakte und mathematische Notwendigkeiten. Vergleicht man die Arbeitsteilung von Three.js mit dem Ansatz eines MVC, bestünde Three.js überwiegend aus Modellen und Helpern. Es geht darum, die Informationen zur Darstellung von 3-D-Objekten und -Szenen strukturiert erzeugen und verwalten zu können. Unabhängig von der Rendering-Technologie ist man in der Regel dazu gezwungen, genau diese Teile mühsam selbst zu entwickeln. Vektoren, Matrizen, Rotationen, Quaternionen, Primitive, Materialien. An nahezu alles wurde hier gedacht. So kann man sich beispielsweise Standardformen wie Würfel über eine Factory erzeugen lassen und dann Rotationen über ein Rotation Property auf der Instanz des Würfels vornehmen. Ebenso sind Verschiebung und Ska...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang