Der Voxel Editor ist ein webbasiertes 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 

Inhalt

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, sollte soll der Voxel Editor ebenfalls browserbasiert und unmittelbar verfügbar sein.

Doch auch andere Spieleentwickler sollen den Voxel Editor nutzen können, um Voxel-Modelle für ihr Spiel zu erstellen. Dazu muss der Export in ein möglichst universelles Format angeboten werden.

Außerdem gibt es noch Abseits des Terralea-Projekts gibt es weitere Einsatzgebiete für den Voxel Editor:

...

Während der Voxel Editor im Rahmen des Projekt B nur für Notebooks und Standrechner mit Drei-Tasten-Maus entwickelt werden soll, wird eine Anpassung für Mobilgeräte zum schnellen "Voxeln" unterwegs als zielgruppenrelevant erachtet und ist für spätere Versionen geplant. Die Grundsteine für eine Touch-Bedienung - ein aufgeräumtes Interface, große Bedienelemente - sollen jedoch schon bei dieser Version gelegt und bei der Gestaltung berücksichtigt werden.

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

...

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.

...

Es gibt vier Basiswerkzeuge:

• Voxel erzeugen  erzeugen 
• Voxel löschen  löschen 
• Voxelfarbe aufnehmen  aufnehmen 
• Voxel neu einfärben  einfärben 

Zusätzlich gibt es Spezialwerkzeuge, die dem Anwender die Arbeit an komplexeren Würfelmodellen erleichtern und fortgeschrittenen Nutzern eine hohe Zeitersparnis bieten.:

• Voxel-Block erzeugen  erzeugen 
• Modell vergrößern  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".

...

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 - sie werden stattdessen an den Flächen anderer Voxel angedockt.

...

Sollte das Ergebnis doch nicht zufriedenstellend sein, lässt sich das Voxel jederzeit mit dem "Voxel löschen"-Tool wieder entfernen. Diese Funktion ist entweder durch das entsprechende Icon in der Werkzeugleiste verfügbar oder auch jederzeit durch einen Rechtsklick anwendbar.

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.

Kamera-Bewegung

Um auch jede gewünschte Voxel-Position erreichen und anvisieren zu können, lässt sich die virtuelle Kamera manipulieren: 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 Mit dem Mausrad lässt sich schließlich noch der gewünschte Abstand zum Modell einstellen (Zoom).

...

Sollte eine Farbe fehlen, kann der Anwender eine nicht benötigte Farbe mit einer gewünschten neuen Farbe ersetzen. Dazu wählt er eine Farbe aus - diese wird später ersetzt - und klickt auf "Ändern". Ein Farbwähler mit HSV-Farbraum wird angezeigt, hier wählt der Anwender die gewünschte neue Farbe  Farbe durch Ziehen bei mit gedrückter Linkstaste. Eine Hex-Wert-Eingabe ist ebenfalls möglich. Mit "Speichern" wird nun die vorherige Farbe mit der neu gewählten überschrieben und steht zur Verfügung. Bereits im Modell verwendete Farben bleiben davon unangetastet, eine in der Farbpalette überschriebene Farbe bleibt also im Modell bestehen.

Falls eine solche Farbe dann doch noch benötigt wird, in der Farbpalette jedoch gelöscht wurde, ist dies ein Fall für das "Voxelfarbe aufnehmen"-Werkzeug: Ist es aktiviert, so wird die Farbe angeklickter Voxel als aktuelle Farbe gesetzt.

Es erleichert auch den Umgang mit einander sehr ähnlichen Farbtönen . Zum Beispiel: Zu einer bestehenden in der Farbpalette. Wenn zu einer Gruppe von Voxeln in einem dieser Farbtöne sollen einer bestimmten Farbe weitere Voxel in derselben Farbe hinzugefügt werden. In der Farbpalette kann , ist die richtige Farbe in der Farbpalette dann nur sehr schwer ausfindig gemacht werden. Abhilfe schafft das zu machen. Viel einfacher ist es mit dem "Voxelfarbe aufnehmen"-Werkzeug: mit ihm wird ein Voxel der Gruppe wird ausgewähltangeklickt, die Farbe wird für spätere Arbeiten gespeichert und anschließend wechselt der Editor automatisch in den Modus des zuletzt gewählten Werkzeugs - die Arbeit kann also direkt und mit der gewünschten Farbe fortgesetzt werden.

Um einen 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 aktiviert eingeschaltet und angeklickten Voxeln wird die derzeit gewählte aktive Farbe zugewiesen. Eine Vorschau-Funktion erleichtert das Anvisieren des gewünschten Voxels.

Spezial-Werkzeuge

...

Voxel-Block erzeugen

Dieses Werkzeug erleichtert das Erzeugen dient dem automatischen Erstellen von großen Voxel-Blöcken oder -ReihenVerbünden: Durch den ersten Klick wird eine Startposition ausgewählt, an dieser wird das erste 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 letzten Voxels festgelegtam 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 Zielposition 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.

Image AddedImage AddedImage Added

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 Verbund von Würfel aus vier Voxeln.

Arbeitsschritte verwalten

Viele Editoren bieten die klassischen Funktionen "Rückgängig" und "Wiederherstellen", die jeweils nur einen Arbeitsschritt betreffen. Wie z.B. beim Protokollbedienfeld 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.

Dazu gibt es das Bedienfeld "Speicherstände" in der Projektleiste, das die Resultate von bis zu 20 Arbeitsschritten zur Zeit aufnehmen kann. Jedes kleine Quadrat des Bedienfelds stellt einen Speicherplatz dar.

Image Added

Jeder vom Nutzer durchgeführte Arbeittschritt sorgt dafür, dass ein neuer Speicherstand angelegt und in Form eines farbig gefüllten Quadrates repräsentiert wird. Als Arbeitsschritte gelten: ein Voxel wurde gesetzt oder gelöscht, ein Voxel-Block wurde erzeugt oder das Modell wurde einmal vergrößert.

Der derzeit aktive Speicherstand wird als braunes braun gefülltes Quadrat hervorgehoben. Alle derzeit inaktiven Speicherstände sind blau gefüllte Quadrate. Wenn der Nutzer nun auf einen inaktiven Speicherstand klickt, so wird dieser zum neuen aktiven Speicherstand.

Alle Dadurch werden alle Arbeitsschritte, die zeitlich nach dem ausgewählten Speicherstand durchgeführt wurden, werden dadurch rückgängig gemacht. Alle Arbeitschritte, die im Vorfeld durchgeführt wurden, werden ggf. wiederhergestellt.

Achtung: Sobald der Nutzer einen neuen Arbeitsschritt machtdurchführt, während es obwohl noch inaktive Speicherstände nach dem aktuellen gibtauf den gerade aktiven folgen, werden diese überschrieben, also unwiderruflich gelöscht. Weiterhin werden die jeweils ältesten Speicherstände wird der jeweils älteste Speicherstand gelöscht, wenn alle Speicherplätze belegt sind und ein neuer Arbeitsschritt gespeichert werden muss.

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.

Eine naheliegende Herangehensweise ähnelt dem Bau eines Lego-Gebäudes: Der Anwender setzt zu Beginn die Voxel für den untersten Abschnitt des Modells auf die leere Arbeitsebene. Darauf werden wieder neue Voxel platziert. So arbeitet sich der Anwender nach und nach hoch, bis auch die höchsten Ebenen des Modells erreicht sind. Die gewünschte Farbe der einzelnen Voxel kann entweder schon gleich beim Setzen ausgewählt werden oder sie die Voxel werden nachträglich koloriert ("Voxel einfärben"Einfärben-Werkzeug).

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 "Voxel 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.

...

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 Image Added. 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 diese Aufgabe den Import übernimmt.

Eine Anleitung dazu und weitere Informationen finden sich im offiziellen Github-Repository.

...

Zentrum und Schauplatz des Geschehens ist die Arbeitsfläche des Voxel Editors. Layout und Design soll sollen diese Devise unterstützen. Alle weiteren Bedienelemente sind daher flach gehalten, ordnen sich um die Arbeitsfläche herum an. Sie sind flach gehalten und zeichnen sich durch den Verzicht auf Schatten und Reflexionen wurde verzichtetaus. Die Farbgebung übt Zurückhaltung durch eine geringe Anzahl matter Blau-, Grau- und Brauntöne.

...

Dieser Stil wurde bei den meisten Bedienelementen aufgegriffen. Alle Icons folgen z.B. der Regel: Jede Fläche muss mit einer Kontur von mindestens 1 Pixel Dicke umgeben sein. Dies sorgt für ein Mockup-ähnliches Erscheinungsbild, welches im Einklang mit dem den Voxel Editor-Einsatzgebiet Einsatzgebieten "Schnelles Visualisieren" und "Prototyping" steht.

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 ausprobierenAusprobieren, als durch LesenNachlesen, 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, die Geheimnisse um das Erstellen von Voxel-Blöcken und -Reihen zu ergründenzu 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.

...