I'm writing an IsoMetric renderer for my html5 isometric game. The isometric renderer should be able to render objects with floating point coordinates.
SOURCE: https://github.com/ilmattodel93/EaselJs-Isometric-with-Heightmaps
As now, the renderer works pretty well, but I have some questions and a problem to fix. Note that little square is the anchor point, and lines are AABB (not correctly drawn I think).
THE PROBLEM
If you have a look at the demo, you should note that when the dragon is behind the tree on a higher level, it will be rendered over the tree instead of behind, as expected.
As you can see in js/mmo/renderer/IsoEntity.js#L91 and js/mmo/renderer/IsoLayer.js#L65, i have a "rough" implementation, and maybe it is'nt good. I've googoled around and find something called "topological sort", i've attempted to implement it, but it does'nt seems to solve.
For each tile I have information about minX, minY, minZ, maxX, maxY, maxZ. An AABB as you can notice.
THE QUESTION
My question is, how can I solve this problem? Is it better (and will be faster) to maybe implement a depth-buffer? And how can I implement it? Will it ensure high performance? Maybe will a correct anchor point (represented with little square) solve the problem?
Thanks for any help! :D