Gestaltungstools für WebGL
Editoren mit grafischen Interfaces ermöglichen die Entwicklung von WebGL-Anwendungen ohne Code.
Den gestalterischen und technischen Rahmen einer Website mit WebGL-Elementen erstellt man in der Regel mit Webstandards, also HTML, CSS und JavaScript. Die 3D-Grafiken selbst lassen sich nativ in GLSL (OpenGL Shading Language), einen mit der Programmiersprache C vergleichbaren Code, generieren. Gängiger ist es jedoch, dafür 3D-Modelling-Software wie Blender, Cinema 4D oder Maya zu verwenden und die Daten anschließend nach WebGL zu exportieren. Daneben gibt es eine Reihe von Bibliotheken und Frameworks auf Basis von JavaScript, die den Programmieraufwand verringern, indem sie den Umfang des zu schreibenden Codes für WebGL-Projekte stark reduzieren. Dazu zählen etwa three.js, BabylonJS oder PixiJS.
Großer Beliebtheit erfreut sich mittlerweile auch die Möglichkeit, WebGL-Anwendungen ganz ohne Code zu schreiben. Mit Tools, die die Programmierfunktionen in ein grafisches Interface kleiden, können beispielsweise auch (Motion) Designer WebGL-Inhalte erstellen oder bearbeiten, ohne den Programmierer um Unterstützung bitten zu müssen. Jeder im Team kann auf das aktuelle Projekt zugreifen, sodass ein hohes Maß an Kollaboration und direkter Beteiligung aller am Designprozess möglich ist.
Ein weiterer Vorteil dieser visuellen Editoren besteht darin, dass sie den Gestaltungsprozess beschleunigen, indem sie das Arbeiten in Echtzeit erlauben, der Code muss also nicht erst gespeichert, weitergereicht und kompiliert werden, um das Ergebnis zu betrachten, sondern es wird sofort im Browser angezeigt. JavaScript-Bibliotheken haben zwar meist den Vorzug größerer Flexibilität, da man unmittelbar im Code beliebige Änderungen vornehmen kann, allerdings bieten auch Editoren neben der Konfiguration über das grafische Interface die Möglichkeit, den Code zu bearbeiten. Im Folgenden stellen wir ihnen die drei vielversprechendsten Tools vor.
Tools für WebGL
 |
Der Games-Experte: PlayCanvas
PlayCanvas stellt einen Editor zur Verfügung, in den man 3D-Modelle per Drag-and-drop importieren kann. Änderungen im Projekt werden in Echtzeit berechnet und sichtbar, ohne dass Code erst kompiliert werden muss, um das Ergebnis darzustellen. PlayCanvas ist mit einer integrierten Physik-Engine ausgestattet, um Objekten realistische Eigenschaften zuzuordnen, was das Tool besonders für die Umsetzung von Spielen interessant macht. Auch das grafische Interface ähnelt dem der Game-Engine Unity. Darüber hinaus besteht die Möglichkeit, den Code direkt zu bearbeiten
https://playcanvas.com
|
 |
Der Newcomer: Autodesk Project Play
3D-Modelling-Spezialist Autodesk bietet mit Project Play auch ein Authoring-Tool für WebGL-Inhalte an. Das Konzept basiert ähnlich wie bei cables (siehe Seite 90) auf Nodes, einzelnen Modulen, durch deren Kombination man Objekte und deren Eigenschaften definiert. Dafür stehen zwei Kategorien zur Verfügung: zum einen Objekte und zum anderen Verhalten, die der User per Drag-and-drop platziert und verbindet. Die Software zeigt Änderungen am Objekt sofort im Browser an. Mit Project Play, das bisher nur in einer kostenlosen Betaversion verfügbar ist, lassen sich interaktive 3D-Inhalte neben Mobile und Desktop auch für VR-Anwendungen erstellen.
https://is.gd/autodeskplay
|
 |
Der VR-Spezialist: Patches
Mit Patches erstellt man nicht nur 3D-Szenen in WebGL, die Anwendung bereitet die Ergebnisse auch als Stereobild für VR-Brillen auf. Der Editor basiert auf der beliebten JavaScript-Library three.js, die er um ein grafisches Interface erweitert. Die Oberfläche ähnelt der gängiger 3D-Modelling-Software, bei der eine 3D-Szene im Zentrum steht. Der Startszene, fügt man über ein Drop-down-Menü Objekte hinzu und weist ihnen Eigenschaften zu. Patches arbeitet ebenfalls mit vorkonfigurierten Modulen, die sich beliebig miteinander kombinieren lassen. Eine Möglichkeit, direkt auf den Code zuzugreifen, gibt es allerdings nicht. Patches befindet sich zurzeit im kostenlosen Betastadium.
https://patches.vizor.io
|
Noch viel mehr zum Thema »Tools für WebGL« können Sie in der Titelgeschichte der PAGE 11.2017 lesen.
[2116]
Das könnte dich auch interessieren
