© Liashko/Shutterstock.com
Entwickler Magazin
3-D-Visualisierung mit WebGL und AngularJS

Wege in die dritte Dimension

Zahlen, schwarz auf weiß, sind für sich genommen nur bedingt aussagekräftig und ziemlich langweilig. Wir müssen diese Daten aggregieren und veranschaulichen, um sie vergleichen und verstehen zu können. Dazu stehen uns weitaus mehr Mittel zur Verfügung als Balken- oder Kuchendiagramme. Seit WebGL sind auch 3-D-Darstellungen im Web kein Problem mehr. Und was im Web funktioniert, das läuft auch auf etlichen Mobil- und Desktopplattformen.

Christian Liebel


Etwas zynisch wird manchmal bemerkt, dass eine Software ohne Daten-Grid und Balkendiagramm keine echte Software ist. Auch wenn das im ersten Moment witzig klingen mag, steckt darin doch ein wahrer Kern: Selbstverständlich brauchen wir Rohdaten, doch diese sind für sich genommen nur bedingt aussagekräftig. Erst eine Veranschaulichung, zum Beispiel in Form eines Diagramms, bringt diese Daten mehr oder weniger zum Leben.

Im Web waren wir, von einigen Plug-in-basierten Ansätzen oder dem nur mäßig mächtigen CSS 3D abgesehen, lange Zeit auf 2-D-Visualisierungen beschränkt. Diese Einschränkung ist mit der Web Graphics Library (WebGL) und der breiten Unterstützung dieses Standards durch alle größeren Browser gefallen. Eine Technologie, die uns bei der Entwicklung datenzentrischer Anwendungen hilft, ist AngularJS, das Single-Page-Web-Application-Framework von Google. Das Framework unterstützt bei der Entwicklung von Frontends auf Basis von HTML5 und JavaScript mithilfe bekannter Konzepte wie dem Model-View-Controller-Entwurfsmuster oder Datenbindung.

WebGL und AngularJS können komplett unabhängig voneinander betrieben werden, doch gemeinsam angewandt entfalten sie wertvolle Synergien. In diesem Artikel zeige ich Ihnen, wie Sie eine effektreiche 3-D-Visualisierung erschaffen, die in allen aktuellen Browsern und auf allen relevanten Mobilplattformen läuft, und wie Sie diese mit AngularJS kombinieren können.

Eine neue Dimension, viele neue Probleme

Natürlich freuen wir uns zunächst über die neuen Möglichkeiten der 3-D-Visualisierung. Wir haben eine neue Dimension, eine weitere Achse und können uns jetzt frei in einem Raum bewegen. Doch diese neuen Möglichkeiten werfen auch einige neue Probleme auf, über die wir uns bislang keine Gedanken machen mussten: Wir möchten dreidimensionale Inhalte in eine dreidimensionale Welt bringen, die aber leider nur über zweidimensionale Bildschirme verfügt. Da bis heute leider noch niemand ein funktionsfähiges Hologramm erfunden hat, müssen wir uns in der Zwischenzeit mit den uns zur Verfügung stehenden Mitteln behelfen.

Zunächst müssen wir eine virtuelle Zusammenstellung von Objekten definieren, die als Szene bezeichnet wird. Hierin werden später unsere 3-D-Modelle enthalten sein, aber auch weitere Elemente wie beispielsweise Lichtquellen. Gar nicht so weit von der Realität entfernt ist das Konzept der Kamera. Die Kamera erzeugt einen zweidimensionalen Ausschnitt aus der dreidimensionalen Szene aus einem bestimmten „Blickwinkel“ heraus...

Entwickler Magazin
3-D-Visualisierung mit WebGL und AngularJS

Wege in die dritte Dimension

Zahlen, schwarz auf weiß, sind für sich genommen nur bedingt aussagekräftig und ziemlich langweilig. Wir müssen diese Daten aggregieren und veranschaulichen, um sie vergleichen und verstehen zu können. Dazu stehen uns weitaus mehr Mittel zur Verfügung als Balken- oder Kuchendiagramme. Seit WebGL sind auch 3-D-Darstellungen im Web kein Problem mehr. Und was im Web funktioniert, das läuft auch auf etlichen Mobil- und Desktopplattformen.

Christian Liebel


Etwas zynisch wird manchmal bemerkt, dass eine Software ohne Daten-Grid und Balkendiagramm keine echte Software ist. Auch wenn das im ersten Moment witzig klingen mag, steckt darin doch ein wahrer Kern: Selbstverständlich brauchen wir Rohdaten, doch diese sind für sich genommen nur bedingt aussagekräftig. Erst eine Veranschaulichung, zum Beispiel in Form eines Diagramms, bringt diese Daten mehr oder weniger zum Leben.

Im Web waren wir, von einigen Plug-in-basierten Ansätzen oder dem nur mäßig mächtigen CSS 3D abgesehen, lange Zeit auf 2-D-Visualisierungen beschränkt. Diese Einschränkung ist mit der Web Graphics Library (WebGL) und der breiten Unterstützung dieses Standards durch alle größeren Browser gefallen. Eine Technologie, die uns bei der Entwicklung datenzentrischer Anwendungen hilft, ist AngularJS, das Single-Page-Web-Application-Framework von Google. Das Framework unterstützt bei der Entwicklung von Frontends auf Basis von HTML5 und JavaScript mithilfe bekannter Konzepte wie dem Model-View-Controller-Entwurfsmuster oder Datenbindung.

WebGL und AngularJS können komplett unabhängig voneinander betrieben werden, doch gemeinsam angewandt entfalten sie wertvolle Synergien. In diesem Artikel zeige ich Ihnen, wie Sie eine effektreiche 3-D-Visualisierung erschaffen, die in allen aktuellen Browsern und auf allen relevanten Mobilplattformen läuft, und wie Sie diese mit AngularJS kombinieren können.

Eine neue Dimension, viele neue Probleme

Natürlich freuen wir uns zunächst über die neuen Möglichkeiten der 3-D-Visualisierung. Wir haben eine neue Dimension, eine weitere Achse und können uns jetzt frei in einem Raum bewegen. Doch diese neuen Möglichkeiten werfen auch einige neue Probleme auf, über die wir uns bislang keine Gedanken machen mussten: Wir möchten dreidimensionale Inhalte in eine dreidimensionale Welt bringen, die aber leider nur über zweidimensionale Bildschirme verfügt. Da bis heute leider noch niemand ein funktionsfähiges Hologramm erfunden hat, müssen wir uns in der Zwischenzeit mit den uns zur Verfügung stehenden Mitteln behelfen.

Zunächst müssen wir eine virtuelle Zusammenstellung von Objekten definieren, die als Szene bezeichnet wird. Hierin werden später unsere 3-D-Modelle enthalten sein, aber auch weitere Elemente wie beispielsweise Lichtquellen. Gar nicht so weit von der Realität entfernt ist das Konzept der Kamera. Die Kamera erzeugt einen zweidimensionalen Ausschnitt aus der dreidimensionalen Szene aus einem bestimmten „Blickwinkel“ heraus...

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