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
Answer
Basically if you number X and Y iso-coordinates their sum is the number of the diagonal, you sort tiles by diagonal, and then draw first tiles with lower Z. This is indipendent of screen coordinates. (of course assuming the camera is in the bottom left corner of the image)
No comments:
Post a Comment