...
Der Voxel Editor ist ein browserbasiertes 3D-Modellierungstool zur einfachen Konstruktion von 3D-Modellen, die ausschließlich aus farbigen Würfeln (genannt Voxel) bestehen.
Neben grundlegenden Funktionen - Voxel setzen, Voxel löschen, Voxelfarbe bestimmen - gibt es zusätzliche Werkzeuge, die auch komplexere Voxel-Modelle effizient und schnell realisierbar machen. Dabei werden unterschiedliche Arbeitsweisen und individuelle Anpassungen der Anwender unterstützt. Zur aktuellen Version auf Github.
(Media Systems, Projekt B)
Inhalt
| Table of Contents |
|---|
Vision
Der Voxel Editor ist ursprünglich als Bestandteil des Terralea-Projekts geplant. Terralea wird ein Browser-MORPG mit einer prozedural generierten, minimalisiert gestalteten Welt. Um diese Welt mit Leben zu füllen, sollen sowohl die Terrealea-Entwickler als auch Künstler aus der Spieler-Community, im Voxel Editor ein Werkzeug finden, um Details und Charaktere im minimalisierten Stil zu modellieren. Da Terralea vollständig im Browser laufen wird, soll der Voxel Editor ebenfalls browserbasiert und unmittelbar verfügbar sein.
...
Nicht Teil des Projekts sind eine Cloud- und Community-Anbindung, die später das Speichern, Laden und Verwalten von Modellen ermöglichen wird.
Konzeption
Bedienoberfläche
Oberfläche des Voxel Editors beim ersten Start
...
Die Projektleiste bietet die Verwaltung von Arbeitsschritten mit den Möglichkeiten einzelne Schritte zu widerrufen, wiederherzustellen oder auch alle Schritte zu löschen. Außerdem beherbergt sie die Export-Funktion.
Die Werkzeugleiste stellt alle Werkzeuge zum Bearbeiten des Voxel-Modells zur Verfügung. Der Fokus wurde auf einige wenige ausgewählte Werkzeuge gelegt, um den Editor nicht zu überfrachten.
Es gibt vier Basiswerkzeuge:
Zusätzlich gibt es Spezialwerkzeuge, die dem Anwender die Arbeit an komplexeren Würfelmodellen erleichtern und viel Zeit sparen helfen:
- Voxel Editor (MS Projekt B)-Block erzeugen
Voxel Editor (MS Projekt B) - Modell vergrößern
Ein Klick auf ein Werkzeug-Icon aktiviert den entsprechenden Bearbeitungsmodus. Dieser ist solange aktiv, bis ein anderes Werkzeug aktiviert wird. Eine Ausnahme bildet die Funktion "Voxelfarbe aufnehmen".
Voxel erstellen und löschen
Das von Spielen wie Minecraft oder dem Spielzeug-Klassiker Lego inspirierte System des Voxel-Editors gibt vor, ausschließlich aus Würfeln (Voxel) bestehende Modelle zu konstruieren. Die Voxel werden auf einem vorgegebenen Raster angeordnet. Um die Bedienung zu vereinfachen, lassen sich zunächst keine schwebenden Voxel erzeugen. Stattdessen werden sie an den Flächen anderer Voxel angedockt.
...
Zudem lassen sich mit mit dem Lösch-Werkzeug auch einzelne Voxel freistellen, sodass sie schweben. So kann die Einschränkung, nur angedockte Voxel zu erzeugen, umgangen werden.
Farbwahl
Voxel lassen sich in jeder beliebigen Farbe erzeugen. Für den Anfang bietet eine Farbpalette eine Auswahl von 12 Farben, die nach den Anforderungen für die Terralea-Welt angemischt wurden.
...
Um einem Voxel nachträglich eine andere Farbe zu geben, ist das Werkzeug "Voxel neu einfärben" 
das Mittel der Wahl. Nach einem Klick auf das zugehörige Icon ist der Einfärbe-Modus eingeschaltet und angeklickten Voxeln wird die derzeit aktive Farbe zugewiesen. Eine Vorschau-Funktion erleichtert das Anvisieren des gewünschten Voxels.
Spezial-Werkzeuge
Voxel-Block erzeugen
Das Voxel-Block-Werkzeug dient dem automatischen Erstellen von großen Voxel-Verbünden. Dazu wird wie folgt vorgegangen:
- Durch den ersten Klick wird das Start-Voxel des Verbunds gesetzt - eine Referenz für die Position des finalen Verbunds.
- Anschließend wird die Größe definiert, indem der Anwender die Position des am weitesten vom Start-Voxel entfernten Voxels festlegt. Bereits beim Anvisieren geeigneter Positionen wird jeweils die Fläche, die der resultierende Voxel-Verbund einnehmen würde, visualisiert:
- Liegt das letzte Voxel auf einer Achse mit dem Start-Voxel ist das Resultat eine Voxel-Reihe.
- Liegen beide Voxel auf derselben Höhe, jedoch diagonal entfernt, so ergibt dies eine Fläche von Voxeln.
- Ist die Endposition höher und diagonal entfernt von der Startposition, so wird ein Voxel-Block erzeugt.
- Ein Klick füllt schließlich die gezeigte Fläche mit einzelnen Voxeln auf und erspart damit mühevolle Handarbeit.
Modell vergrößern
Stellt der Anwender während der Arbeit am Modell fest, dass er einen anderen Maßstab benötigt, um beispielsweise zusätzliche Details einzufügen, kann das Modell mit einem Klick auf das "Modell vergrößern"-Werkzeug auf die doppelte Größe skaliert werden. Ein Voxel entspricht also anschließend einem Würfel aus vier Voxeln.
Kamera-Bewegung
Um auch jede gewünschte Voxel-Position erreichen und anvisieren zu können, lässt sich die virtuelle Kamera beliebig ausrichten: Das Ziehen mit gedrückter linker Maustaste rotiert die Kamera, während das Ziehen mit gedrückter rechter Maustaste sie horizontal oder vertikal verschiebt. Mit dem Mausrad lässt sich schließlich noch der gewünschte Abstand zum Modell einstellen (Zoom).
Arbeitsschritte verwalten
Viele Editoren bieten die klassischen Funktionen "Rückgängig" und "Wiederherstellen", die jeweils nur einen Arbeitsschritt betreffen. Wie z.B. beim Protokoll in Photoshop oder beim Journal in GIMP, sollen Nutzer beim Voxel Editor aber die Möglichkeiten haben, mit nur einem Klick gleich mehrere Arbeitschritte zurückzusetzen bzw. wiederherzustellen.
...
Um alle Arbeitschritte zu löschen und damit das Projekt zurückzusetzen, genügt ein Klick auf das Mülleimer-Icon. Der gesamte Projektfortschritt geht damit unwiederbringlich verloren.
Workflows
Der Voxel Editor unterstützt unterschiedliche Arbeitsweisen, die der Anwender beliebig kombinieren und so ein individuelles Vorgehen bei der Konstruktion von Voxel-Modellen entwickeln kann.
...
Ein umgekehrtes Vorgehen ist die Bildhauer-Technik: Der Benutzer erstellt zunächst mit dem Voxel-Block-Werkzeug einen Block aus Voxeln - so groß, dass das künftige Modell vollständig von ihm umschlossen wäre. Nun wird damit begonnen, einzelne Voxel mithilfe des Löschen-Werkzeugs "herauszumeißeln". Welcher Abschnitt wann bearbeitet wird, bleibt dem Benutzer überlassen. Nach Fertigstellen des Modells oder auch bereits zwischendurch können die Voxel individuell koloriert werden.
Export
Damit der Benutzer sein Voxel-Werk auch außerhalb des Voxel Editors verwenden oder weiterverarbeiten kann, z.B. als Assets für ein eigenes Spiel, gibt es eine Export-Funktion 
. Sie generiert eine einfache Textdatei, die alle relevanten Informationen des Modells enthält, und die sich von anderen 3D-Tools auslesen lässt. Für Unity gibt es bereits ein Plugin, welches den Import übernimmt.
Eine Anleitung dazu und weitere Informationen finden sich im offiziellen Github-Repository.
Gestaltung
Zentrum und Schauplatz des Geschehens ist die Arbeitsfläche des Voxel Editors. Layout und Design sollen diese Devise unterstützen. Alle weiteren Bedienelemente ordnen sich um die Arbeitsfläche herum an. Sie sind flach gehalten und zeichnen sich durch den Verzicht auf Schatten und Reflexionen aus. Die Farbgebung übt Zurückhaltung durch eine geringe Anzahl matter Blau-, Grau- und Brauntöne.
...
Eine weitere Richtlinie der Gestaltung war es, möglichst wenig Text einzusetzen. Dadurch soll eine intuitive und eher spielerische Bedienung erreicht werden. Ziel war es, dass ein Nutzer eher durch Ausprobieren, als durch Nachlesen, die Funktion eines Werkzeugs herausfindet. Ein Beispiel dafür ist das Voxel-Block-Werkzeug. Das zugehörige Icon mit der "magischen Maurerkelle" lädt den Nutzer dazu ein, zu ergründen, was sich hinter diesem Werkzeug verbirgt und wie man es einsetzt. Weder die Tooltips noch ein Tutorial oder eine Anleitung geben ihm darüber Auskunft. Allein das Ausprobieren mit Unterstützung der Vorschau-Funktion sollen ihn die Funktionsweise begreifen lassen.
Entwicklung
Die Entwicklung des Voxel Editors für das Projekt B nahm ca. 275 Stunden in Anspruch.
...
Der Voxel Editor nutzt HTML5 und CSS3 für die Bedienelemente und das Layout. Die Programmlogik ist in Javascript implementiert. Die 3D-Darstellung der Arbeitsebene und Voxel übernimmt die Grafikbibliothek WebGL, als Programmierschnittstelle wird Three.js verwendet. Die verwendeten Web-Techniken werden derzeit von allen aktuellen Browser unterstützt - jedoch wurde das beste Nutzererlebnis unter Google Chrome erzielt.
 |  |  |  |  |
Interface-Evolution
Die Icons sowie im Vorfeld entstandene Mockups sind mit Inkscape angefertigt worden.
Als Plattform zur Kollaboration und Veröffentlichung dient Github. Im offiziellen Voxel Editor-Repository wird es auch zukünftig Updates und neue Funktionen geben. Zur Mitarbeit sind alle herzlich eingeladen!
Inspiration
- CWME - Cube World Model Editor
LEGO und der LEGO Digital Designer
- Minecraft
- Ralf Hebeckers Ideen für eine innovative Undo/Redo-Verwaltung
...