PAGE online

Gestaltungstools für WebGL

Editoren mit grafischen Interfaces ermöglichen die Entwicklung von WebGL-Anwendungen ohne Code.

Den gestalterischen und technischen Rah­men 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, ge­nerieren. 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 mittler­wei­le auch die Möglichkeit, WebGL-An­wen­dun­gen ganz ohne Code zu schreiben. Mit Tools, die die Programmierfunktionen in ein grafi­sches 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 Gestaltungs­prozess beschleunigen, indem sie das Arbei­ten 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 Echt­zeit 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 Au­thoring-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 ste­hen zwei Kategorien zur Verfügung: zum einen Objekte und zum anderen Verhalten, die der User per Drag-and-drop platziert und ver­bindet. 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 er­weitert. Die Oberfläche ähnelt der gängi­ger 3D-Modelling-Software, bei der eine 3D-Szene im Zentrum steht. Der Startszene, fügt man über ein Drop-down-Menü Objek­te hinzu und weist ihnen Eigenschaften zu. Patches arbeitet ebenfalls mit vorkonfigurierten Modulen, die sich beliebig miteinander kombinieren lassen. Eine Möglichkeit, di­rekt 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]
Produkt: Download PAGE - 3D-Druckvorlagen erstellen - kostenlos
Download PAGE - 3D-Druckvorlagen erstellen - kostenlos
Vom Modelling bis zur professionellen SLS-Druckausgabe

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren