2
\$\begingroup\$

I've got an isometric diamond-shaped world. The world consists of isometric planes like rooms. The walls and floors of the rooms and all obstacles and items in the rooms are isometric entities. So I have a list with each existing object in the world. Each object has its own coordinates. x, y, and z. x is from top to right bottom, y is from top to left bottom, z is straight up into the air. Each object has also an isometric width and height as property.

Now I have to render the world correctly. I'm quite sure the only hard step is to sort each object by its depth, and this isn't that hard when nothing changes in the world. But of course everything changes... I want to figure out a sorting system which is very fast, so it doesn't do too much unnecessary work. I ended up with multiple articles, saying a pigeonhole sort is the way to go. But is this really the right solution? And doesn't this cause rendering glitches? I also read that I should use topological sorting. (https://en.wikipedia.org/wiki/Topological_sorting).

\$\endgroup\$
2
\$\begingroup\$

From my own experience, I've found that using the sum of components (x + y + z) is a very good measure for sorting entities in an isometric scene. It doesn't perfectly represent the distance your image is away from the camera, but it does give an indication which image is further or closer to the camera, and that's what ultimately matters. Moreover, sums are incredibly cheap to compute.

You should re-sort your entity list every frame though.

In terms of implementation, it may be worth investigating whether you could use WebGL here. The library has built-in depth sorting that runs on the GPU and is therefore faster than anything you could write in JavaScript. Although it's a lot more complicated to get it working, of course.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.