The concept for this is blatantly stolen from the amazing pen plotter works of Frederik Vanhoutte (Twitter, example work). I coded it up so I could play with it myself. More sample output can be found in this gallery.
Animation done with Vivus Instant.
Isometric projection of a voxel scene results in a 2d grid of equilateral triangles. To number triangles, I choose the convention of having integer x increase from left to right and integer y increase from top to bottom. Triangles can be either left-pointing or right-pointing, and I use the convention that a triangle is left pointing iff x+y is even.
Voxels are addressed with integers x,y,z >= 0. By convention, I render the scene oriented so that the origin is the "bottommost" corner, x increases to the up-right, y increases to the up-left, and z increases vertically. To render the scene, each "on" voxel is projected to a set of 6 triangles (given our conventions, the projection is simply tx = x - y, ty = -x - y - 2*z, then add x {0,1} and y {0,1,2} to get all 6). For each triangle cell we store two values: depth and facing. Depth is the distance from the camera (computed as simply x + y - z). Facing is the apparent orientation of the face, either up, left or right. We fill the depth and facing values iff the depth is less than any depth currently stored in that triangle cell (typical depth buffering).
After all voxels are projected, we iterate over all the edges of the triangle grid to decide if each one gets drawn or not. We decide this based on the depth and facing values of the two triangles adjacent to that edge. After the set of all drawn edges is determined, we sort and combine them to form contiguous segments wherever possible, and with alternating directionns for each "row" to be efficient for pen plotting.
(The code is rather a mess currently, but here are some notes for the adventurous about running it.)
Assuming NodeJS and Yarn are installed:
$ git clone git@github.com:rsimmons/isovoxel.git
$ cd isovoxel
$ yarn
[there are no external dependencies, but the code uses workspaces, so this makes the symlinks in node_modules/]
$ cd sketches
$ node sketch001.js
[output written to out.svg, which you can open directly in a browser]
There are a number of demo "sketches", found in sketches/sketchNNN.js. The format should be relatively obvious, but a sketch is implemented as a call to makeSketch that provides a callback function to fill/define the voxels of the scene. The padFrac argument is the (fractional) padding around the edges of the render. The ops argument to the callback is an object with a handful of useful voxel operations (defined in core/scene.js, const ops = {...). Note that many of the ops have a random element; re-run the sketch to get a new variation. The width of the lines in the SVG is currently hard-coded, but it's easy to modify by hand. It appears in one place at the top of the SVG file (the stroke-width attribute of the <g> element), and is defined in core/render.js.
To understand the available ops, it's useful to look at the demo sketches, but here is some brief documentation. Voxel coordinates arguments are given as plain old JS objects, like {x: 1, y: 2, z: 3}, with axes defined per the Math/Tech Notes section above. The fill argument of ops is to be 0 or 1, corresponding to empty or solid.
fillBox(scene, corner_a, corner_b, fill)- fills the 3d box defined by the two corners. it exclusive WRT to the "max" coordinates, so if corner_a==corner_b, no filling is donefillScene(scene)- helper to fill the entire scene solid, so that you may then subtract away from itmakeHollowShell(scene, cornerA, cornerB, thickness)- makes a hollow shell of a box. as withfillBox, this excludes the "max" of coordinates. the thickness goes "inward", so the corners define the exteriorrandomBox(scene, fill)- fills a box defined by random corners (uniform random in each dimension)toggleRandomBox(scene)- likerandomBox, but instead of filling, toggles voxels between empty and solidrandomShell(scene, thickness)- likemakeHollowShellbut with random corners likerandomBoxfrontCutaway(scene, frac)- "cut away" (fill with empty) the vertical front edge of the scene.fracis 0 to 1 of proportion to cut awaytopFrontCutaway(scene, frac)- likefrontCutaway, but cuts away the top-front cornerpredicateFill(scene, fill, predFunc)- callspredFuncfor every position in the scene, and iff it returns true, fills with the given fill valueworm(scene, startPos, size, moveRepeat)- fills a solid, square, random "worm" path, that starts from the givenstartPosand keeps going until it hits any side of the scene.sizeis basically the "diameter" of the worm.moveRepeatis how many steps it moves in a random (axis-aligned) direction before picking a new direction.