What Is Voxel Edit?
Voxel Edit is an online cross-platform art program dedicated to creating 3D voxel artwork. Without further ado, you can try the live program here.
Meat Boy from the video game Super Meat Boy recreated in Voxel Edit.
Now then, you might be wondering just what exactly is a voxel let alone a voxel editor?
To learn more in a video format, I created the following presentation for Voxel Edit that answers these questions and much more. Even still, read onwards for a more text based explanation!
Voxel Edit Presentation
Voxels?
In the context of a voxel editor such as Voxel Edit, a voxel is just a cube with some color to it. And by extension, a voxel editor is just a program in which one edits or arranges those cubes to create a 3D model. To be a little less technical, that model is just voxel art.
Voxels or cubes are used to create voxel art via a voxel editor.
Characters from the video game EarthBound recreated as voxel art in Voxel Edit.
Why Make Voxel Art?
I’ve always been a big fan of digital artwork. In particular, I’ve always had a love for 3D art. However, learning 3D modeling software such as Blender can be pretty tough. Modeling, sculpting, texturing/texture painting, lighting, rendering, etc… It can all be a bit much.
However! The process is vastly simplified when creating voxel artwork. Instead of manipulating each individual vertex of a model, one only needs to stack voxels much like playing with blocks as a kid. As such, the barrier of entry is quite small. Anyone can create voxel art as seen with the incredibly popular voxel based video game Minecraft which has roughly 131 million monthly active users as of 2020 (source).
A player made voxel world created in the game Minecraft.
In turn, Voxel Art is a much more accessible form of creating digital 3D artwork that is already enjoyed by millions upon millions of people! Not only is it easy to get started with but more advanced artists can create some very complex and detailed models.
An incredibly detailed voxel model of a cat by Christophe Tritz.
Images like the above are just simply amazing and really goes to show just what these small little cubes can do in some very capable and talented hands. And yet, it all starts with just placing some voxels.
Of course, in addition to pretty pictures voxels work well in games too as seen with Minecraft. In a way, one can view voxels as just pixel art with an extra dimension.
Why Make Voxel Edit?
Going back to Minecraft, I first discovered the game around the year 2010 and absolutely adored creating my own little voxel worlds by mining (i.e., collecting) resources in the game and turning them into my own structures. At the time, this style of game where one could build whatever they wanted out of cubes was really novel and captured my imagination. Even more so, it was the first time I was introduced to the concept of a voxel and voxel art.
A good few years down the line, I discovered another program called MagicaVoxel. Unlike Minecraft, MagicaVoxel was a dedicated voxel editor. Instead of wandering around a world to collect resources to build and survive with, MagicaVoxel was all about making it as easy as possible to make stunning 3D rendered images of voxels.
Voxel model of Myst Island made and rendered in MagicaVoxel by Rphl-Mstl.
Images like the cat picture or the Myst Island gif I find absolutely breathtaking. There’s a special charm and magic about these 3D voxel models that I love. Not only that, I always thought it would be fun to try and make my own voxel based program! As such, I decided to give it a go with Voxel Edit.
What Was It Made With?
Voxel Edit was made with the web technologies JavaScript, React, and Three.js. JavaScript for code and logic, React for GUI, and Three.js to handle 3D graphics.
Slide from Voxel Edit presentation on what the program was made with.
The original idea for Voxel Edit was to make use of the graphics API OpenGL along with C++ for logic and Qt for GUI. However, this project was not only something that I’ve been wanting to create for fun but was also my senior project at my college. As such, it was being supervised by my graphics professor whom was not familiar with OpenGL but rather Three.js. In turn, we reasoned it would be best to stick with Three.js since not only did my professor already know it but I’d have to learn it anyway for their graphics class.
Luckily, Three.js was a great choice. Not only did it already provide much of the graphics code I was preparing to write from scratch, but it made it very easy to share the project with others for testing. All that is required is a link and then anyone could use it. Not only did web technology make Voxel Edit easy to share but it also made it easy to develop for mobile devices. Thus expanding the potential audience of the program even more.
Voxel Edit’s GUI on both desktop and mobile browsers.
Aside About React
I do want to make a quick statement about React though. My supervisor actually didn’t know much about it, and I honestly didn’t either. I was already very comfortable with JavaScript and a bit with graphics programming as well but React was unknown territory.
Even still, I could see Voxel Edit becoming a bit messy with vanilla JavaScript especially since it was going to be targeting not just desktops/laptops but mobile devices as well. As such, there needs to be a good way to take the various GUI components of the application and easily rearrange them in a nice modular way amongst other things. Luckily, React seemed like the perfect fit in particular due to its own React component system.
React component architecture of Voxel Edit.
Despite the initial 1-2 week investment to learn everything I could about React, it really paid off in the end. As seen in the above image, React’s component system made it easy to organize each GUI element of the program. And since components are reusable, the GUI Controller component can easily rearrange the GUI to better suit mobile users without having to hard code anything into each individual component (i.e., Viewport or File) to account for a change in screen size.
I really enjoyed how React helped me to decouple many of the moving parts of Voxel Edit in addition to how easy it is to use in general. I’d like to give a big thank you to the Udemy course Modern React with Redux by Stephen Grider for helping me to learn how to best use React as well. It gave me some much needed direction in the beginning stages of the project.
Also, a big thank you to my graphics professor Tzipora Halevi and the website Three.js Fundamentals for helping me learn Three.js!
Documentation
Voxel Edit is perhaps one of the most documented projects I’ve worked on yet (as of mid 2021). In addition to generating documentation with JSDoc, I’ve kept daily/weekly time logs, written proposals, reports, etc., of the project as required by my college’s CISC 4900 project class.
To begin, Voxel Edit’s GitHub page has instructions on how to build the program on your own machine. Once running, you can begin making your own edits to the project in which you’re welcome to pull request to the dev branch if you’d like!
There’s also a documentation page hosted via Netlify that gets updated automatically whenever there’s a change to the dev branch (the docs need some reworking though so I apologize if it isn’t too helpful yet).
Something rather unique I also did throughout this project was keep a tight time log of all my work. This was required by my college so as to keep them informed about what I’ve been doing and if I’ve been putting in at least 15 hours per week on project related tasks.
An hour-by-hour breakdown of tasks completed each day.
A week-by-week breakdown of tasks completed.
The above two images are screenshots from my final daily/weekly logs of working on Voxel Edit.
There was also a hefty amount of writing done to plan out this project. The first of which was a 26 page project proposal I wrote detailing everything about Voxel Edit from what it was to what it would be made with and how long it would likely take to develop.
Table of contents for the initial Voxel Edit project proposal.
The project proposal for Voxel Edit was very well received and thus immediately approved to be worked on.
About half way through the Spring 2021 semester, I wrote a 20 page interim report which noted just how far the project had come and what remained.
Lastly, a very hefty 45 page final report was written detailing every possible facet of Voxel Edit from what it could do, couldn’t do, what was used to make it, what each component does, etc.
You’re welcome to view the following files to gain some insight into how Voxel Edit was made.
Documentation Files
- Project Proposal
- Interim Report
- Final Report
- Presentation
- I also had to create a presentation for Voxel Edit. In addition to the slides themselves, you can view the actual presentation at the beginning of this page.
- Daily Log
- Weekly Log
Final Words
Collection of voxel art made with Voxel Edit.
Voxel Edit was a pretty cool project to work on. I’ve been wanting to make a voxel editor for years now and I’m happy to have gotten the chance to do so. I feel pretty lucky that I was able to work on it as my final senior project before graduation too!
Even still, I think there’s a lot more that can be added to the project. More settings for light, better shaders, more editing options, various optimizations, etc. Despite my best efforts, the application feels a bit bare-bones especially when compared to bigger projects like MagicaVoxel. Regardless, I feel as though there’s a good base here for a much more advanced voxel editor if I, or someone, else decides to pick it back up at some point.
If anything, it was definitely tough balancing the project with my final semester of college. There was a lot I wanted to do but a lot of learning, experimentation, and time was necessary before I could embark on it. Despite this, I’m happy that I was able to adapt to the challenges presented by the project in addition to the requirements presented by my college. It might not be the best voxel editor, but its a working one and I learned a ton from it to boot!
Voxel Edit Artwork
Thanks for reading all the way through! I’m sure you’d like to check out some of the various Voxel Edit projects that were made throughout its development. You can check them all out here.