DSVGO
Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.
Server Wartungsarbeiten
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.
Table of Contents |
---|
...
Oberfläche des Voxel Editors beim ersten Start
Die Bedienoberfläche des Voxel Editors besteht aus der Arbeitsfläche in der Mitte, der Projektleiste darüber sowie der Werkzeugleiste und der Farbpalette am rechten Rand.
...
Es gibt vier Basiswerkzeuge:
Zusätzlich gibt es Spezialwerkzeuge, die dem Anwender die Arbeit an komplexeren Würfelmodellen erleichtern und eine hohe Zeitersparnis bietenviel Zeit sparen helfen:
Ein Klick auf ein Werkzeug-Icon aktiviert den entsprechenden Bearbeitungsmodus - dieser . 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 - . Stattdessen werden sie werden stattdessen an den Flächen anderer Voxel angedockt.
...
Mit einem Linksklick materialisiert sich das Voxel an der ausgewählten Stelle. Dazu muss der "Voxel erzeugen"-Modus Modus aktiviert sein - beim . Beim Starten eines neuen Projekts ist dies standardmäßig der Fall.
Sollte das Ergebnis doch nicht zufriedenstellend sein, lässt sich das Voxel jederzeit mit dem "Voxel löschen"-Tool 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.
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 dem Mausrad lässt sich schließlich noch der gewünschte Abstand zum Modell einstellen (Zoom).
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.
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 durch Ziehen 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.
Ändern einer Farbe in der Farbpalette
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 in der Farbpalette. Wenn zu einer Gruppe von Voxeln einer bestimmten Farbe weitere Voxel in derselben Farbe hinzugefügt werden, ist die richtige Farbe in der Farbpalette dann nur schwer ausfindig zu machen. Viel einfacher ist es mit dem "Voxelfarbe aufnehmen"-Werkzeug: mit ihm wird ein Voxel der Gruppe angeklickt, die Farbe wird für spätere Arbeiten gespeichert und anschließend wechselt der Editor automatisch in den Modus des zuletzt gewählten Werkzeugs - . So kann die Arbeit kann also direkt und mit der gewünschten Farbe fortgesetzt werden.
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.
Dieses Werkzeug Das Voxel-Block-Werkzeug dient dem automatischen Erstellen von großen Voxel-Verbünden. Dazu wird wie folgt vorgegangen:
...
...
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 Werkzeug auf die doppelte Größe skaliert werden. Ein Voxel entspricht also anschließend einem Würfel aus vier Voxeln.
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).
...
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.
Projektleiste mit Speicherstände-Bedienfeld
Jeder vom Nutzer durchgeführte Arbeittschritt Arbeitschritt 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.
...
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 den Voxel Editor-Einsatzgebieten "Schnelles Visualisieren" und "Prototyping" steht.
Icon des Voxel-Block-Tools
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.
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!
...