Posted: Jun 22, 2016 Isometric cubes are just six triangles. Return to yesteryear when computers weren't fast enough to do isometric games and see how it could've been done.

Back in the early days of computing, when I was first learning to program, computers were slow. The Mac Plus I learned how to program on was only 8 MHz! And even though it used 1-bit graphics, using the traditional copybit() calls, it wasn't fast enough to just draw whatever you wanted as much as you wanted. We used a thing called dirty rectangles, where we would update only the parts of the screen that had changed rather than updating the whole thing - and you got two or three dirty rects before it started to slow down.

What was exceptionally difficult to do was isometric graphics. There wasn't the memory to hold a depth map, so the painter's algorithm was all you had - but how do you figure out what to draw in the dirty rect? How do you know which isometric tiles overlap whatever you are drawing? You could have a tower so tall that it obscures things even when the tile base is off screen. You might have tiles that overlap each other, such that drawing one starts a chain reaction that results in redrawing the entire screen (too slow).

The following is a solution to that. A way to do isometric graphics with dirty rectangles, as a simple tile map of triangles. The need for such a solution is long past. You can redraw the entire screen a thousand times a second now with enough memory for all sorts of shenanigans - the days of dirty rects are, thankfully, behind us. Still...

I'm sharing this idea largely because it is a cute trick, and I think it makes isometric graphics even more interesting. Even if you wouldn't use this cute trick, you could still be inspired to look at old problems through a new lens.

Fig 250.1 - Exploded Iso Cube.

The nifty thing about isometric cubes is that they are made of triangles, or more specifically, each side is made up of exactly two triangles that are identical in size and shape to the two triangles used for other sides. In other words, there are two triangles (one pointing forward, one pointing backwards) that alternate, and an entire isometric world can be represented using a 2D grid of these triangles.

Fig 250.2 - Isometric Graph Paper

To put it simply, as long as your building block is a cube (and after Minecraft, when is ever not?), you can represent it as a collection of triangles. The nifty thing is that the triangles never overlap! That is, cubes in front of cubes will only obscure whole triangles - never part of it. This means that you can store the visual representation of an isometric scene by just keeping track of whatever the top triangle is and its depth.

Doing that allows you to know when an object is behind terrain and what to draw in front of it. Using dirty rects, you figure out the rectangle of the object and which triangles it overlaps, then redraw the triangles on top with a depth value closer to the camera than the object. To "delete" an object, figure out which triangles the rect intersects with and just draw those triangles. The terrain becomes a simple decoration with minimal math or depth sorting needed to do, and the number of draws required for an object to walk behind a piece of terrain is now at the bare minimum.

Fig 250.3 - Transparency

I know what you are saying. What if I want to make something that isn't just cubes? Well, as long as it fits inside the cube shape, you can still break it up into triangles. Want stairs? Half steps? Pillars? Wall segments? It will still work for compositing into the triangle grid. The only difference is that now you have to keep track of not just the top triangle for that space, but also the ones behind it (only up until a triangle with no transparency, since it will obscure everything behind it).

One way to do that is to keep a linked list for each triangle. When drawing something that between the two triangles, you know to draw only the top one. If behind both, you draw both of them, in order from back to front. It is a slightly less conclusive victory over isometric graphics, but it should work anyway.

Click for Prototype Note.