Drawing isometric boxes in the correct order
shaunlebron.github.io
shaunlebron.github.io
Just one thought because I spent some time thinking about this type of problem before deciding to do it a different way in my own work:
If you use an orthographic projection and just actually draw 3-D boxes, this problem becomes trivial, including the intertwined boxes problem, because the GPU will take care of it at a per-pixel level with the Z-buffer.
Of course this also means you're suddenly working in 3-D, which complicates other things. But you can still use 2-D textures by picking the right texture coordinates for the vertices on the box.
These days it usually makes a lot of sense to be doing 2-D stuff using a 3-D engine/library anyway, if only for access to hardware accelerated post-processing and hardware accelerated layering/compositing, in which case using actual boxes on a tilted camera and using "no projection" for your HUD/UI works pretty well.
If you have any translucency (water, plants/trees, objects), then render the frontmost opaque box followed by other translucent boxes in front of it, in back-to-front order.
(That approach would completely break in the presence of concave shapes, which could allow a single box to appear both in front of and behind another at the same screen coordinate.)
Depending on your shapes (e.g. boxes), you wouldn't need to do that for every screen coordinate; you could make the same decision for entire regions, bounded by the screen-projected coordinates of the vertexes.
However, once you reached any significant degree of complexity, you'd probably still be better off implementing a full 3D engine in software if you didn't have 3D hardware. Z-buffering isn't particularly complex to implement. (More complexity comes in when trying to pre-cull some geometry without rendering it at all, to avoid rendering over the same screen pixel many times.)
1. Pretty much every 3-D graphics engine worth using supports importing and batch-rendering meshes that are actually made up of multiple sub-meshes. So you can fix the circular occlusion problem and the concave object problem with pretty much no performance loss by just subdividing those offending shapes during the art phase. This simplifies rendering because the engine doesn't need to do any dynamic mesh subdivision.
2. Pretty much every 3-D graphics engine worth using supports depth sorting for translucency, so you effectively get that for free too.
I should have clarified that "3-D" by itself doesn't necessarily get rid of your problem. However, there's very little reason to build your own graphics engine anyway, and modern 3-D graphics engines abstract away the occlusion problem for free.
I suppose I had a third point, a response to your last paragraph: it seems hardly worth it to basically implement your own software rasterizer with a RAM based Z-buffer if getting the dedicated hardware to do it is just a matter of pulling in a 3-D graphics engine. And doing it on dedicated hardware is going to be much faster. Granted you have to learn how to use the 3-D graphics engine and you'll have to do a bunch of work through shaders, but if you're doing graphics stuff, this is staple, bread and butter knowledge. Kind of like how web frontend developers would be expected to be able to write CSS and to be fluent in at least one JS framework.
True, but this problem also just goes away if you represent objects as meshes of triangles, because individual triangles aren't concave.
> it seems hardly worth it to basically implement your own software rasterizer with a RAM based Z-buffer if getting the dedicated hardware to do it is just a matter of pulling in a 3-D graphics engine.
Agreed completely, if you have that hardware available. I could imagine constrained-computing scenarios (either as a challenge, e.g. "standalone minecraft clone in 4k of code", or a deeply embedded environment) where you wouldn't have a 3D engine available and you might want to implement a simplified rendering engine for a highly constrained rendering problem.
But yes, for almost every scenario, you want to just use the GPU.
You don't actually avoid the problem entirely when you're using just triangles because it's still possible to construct a "A overlaps B overlaps C overlaps A" cycle of occlusion using three triangles. It's more or less the same corner case as a cyclic occlusion problem with convex pole-shaped meshes.
For this reason it seems like graphics engines tend to just batch-render entire sub-meshes at a time because rendering entire meshes presents little additional complexity over rendering individual polygons (and is more performant). It's a leaky abstraction but the leaks are pretty rare.
The best solution for the cyclic occlusion problem still seems like a depth buffer.
The typical method is to draw all opaque objects first with zbuffering enabled. Then sort all the remaining trasnparent objects by depth and draw them from back to front
That's besides the point that partial transparency is actually intentionally used very sparingly in games because it's computationally expensive.
In the same sense that you almost always start a web app front-end with some JS framework, you almost always start a 3-D game with some graphics engine. Graphics engines generally take care of the depth sorting for alpha blending for you.
If you're building your own graphics engine, then I'd mostly just question whether you really need to. Sure you might make something leaner, but the benefits will be marginal at best.
In other words, yes, you're right, transparency complicates things, but it's a well-understood problem and the solution is more or less free with the package when you pick up a graphics engine.
Of course, when you really dig into the bowels of the problem, you'll notice that most graphics engines don't gracefully handle the circular overlap problem. In practice, it's more efficient and lower cost to just cut the object up at asset creation time than to dynamically split things at render time. That means you're just avoiding the problem, but it's a rare enough corner case that it's just cheaper to work around the corner case.
This method was implemented in some fantastic 1980s computer games, and the developer had named their technique "Filmation". Here's a discussion of that system, plus a demo of the rendering bug caused by not bothering to break dependency cycles as discussed in the main article:
http://bannalia.blogspot.co.uk/2008/02/filmation-math.html
(also I just found another with a load more details on the Filmation games: http://retrospec.sgn.net/users/nwalker/filmation/)
[0] Assuming (0, 0, 0) it's in the middle at the top of the screen.
[1] Assuming this is what you meant by "simple back-to-front".
http://andrewrussell.net/2016/06/how-2-5d-sorting-works-in-r...
The only difference is that bounding boxes are still used for sprites, but he adds a sort of voxel heightmap inside of it to represent occupied volume.
> heightmap: https://youtu.be/Ssrkq6_6JYU?t=15m21s
If you imagine this heightmap as a building with multiple floors (e.g. 1st floor, 2nd floor) the algorithm takes the lowest common floor of each of these buildings and performs an intersection test between them and nothing else. This allows the sprites to interact more fluidly inside the bounding boxes! Neat.
> heightmap floors: https://youtu.be/Ssrkq6_6JYU?t=16m12s
One of the reasons to do this instead of Z-buffering is that Zbuffer will not help with transparency, and most games with these kind of needs will use it, for antialiasing sprite edges if nothing else.
If you break them up like that, naive painting in order of depth should be fine.
If you have a GPU available, you might as well be using an orthographic projection and the depth buffer.
But it would probably be worth it. A 16 bit buffer would probably be good enough for isometric drawing and would be faster.
I ended up creating a BSP tree (1) for the polygons and drawing them in order according to the tree.
The problem in general with sorted back to front drawing is exactly the "Conundrum" example. However, a BSP tree will take of that, and divide at least one of the cubes in that example.
It may feel like overkill, but I would probably have done something similar in this case. Implementing BSP trees for cubes is very simple, because all planes are xy, xz, or yz.
If you really want an isometric look but need more complicated rendering than layered tiles, it seems like it would be much easier to do 3d rendering but lock the 'camera' into an orthographic projection mode.
Unity and Unreal Engine both have this as a built-in feature that basically just takes a checkbox, for examples off the top of my head.
The vast majority of actual 2d isometric games use a very naive grid walking, with uniform tile sized elements. If everything moving is limited to 1 plane, then varying square footprint tiles can be used with a simple sort. However, the linked page is the "true" solution to isometric sorting, allowing any size axis-aligned rectangular solid to exist in any non-interpenetrating location in 3-space and sort correctly.
Start drawing from highest Z position to the lowest. When you have objects staying on top of each other, use order of the parent object as the drawing order for child objects.
1 rule : All buildings are only allowed occupy their own air space only. They are not allowed to have balconies over reaching to airspace of other X/Y area.
Also as some say, just throwing it into 3D and locking the perspective is waaaay easier on the math. For example, 2 of my own projects.
http://chad-autry.github.io/hex-grid-map/#/demo vs http://chad-autry.github.io/hex-grid-map-3D/#/demo
http://blog.efnx.com/wp-content/uploads/2007/10/fpsExample.s...
break all the shapes into boxes that can occupy only 1 space
for height = 0 .. n:
for <however many boxes can be displayed in a column>
for <however many boxes can be displayed in a row>
draw box, step to next box (x+1, y+1)
1. Start with the abstraction that every shape is actually a group of one or more sub-shapes. (Well-understood and pretty much universally applied abstraction.)
2. Pre-process all of your geometry so that you won't get cycles of occlusion, which is the corner case the author mentioned. If you do have a cycle, then subdivide and group as mentioned in #1.
3. Use some fast but crude algorithm to preemptively reject non-visible shapes.
4. Apply painter's algorithm. to "probably visible" shapes.