Isometric rendering without tiles, is that goal reachable?


I'm creating a 2d game in HTML5 canvas. It's an isometric world, so actually it's also 3d. You always see that isometric games use tiles, and I think the reason is just for the depth logic. My goal is to create the game without using a tile system. Each item can be placed by the user, so item locations like walls, trees, etc., have variable positions. The positions are isometric x, y, z coordinates. If the game was just tiled, you could determine a fixed tile area for each item. (I mean: a one-tile item, or a wall of 10 tiles long). But in my game I use an <em>areaX</em> and <em>areaY</em> for the space an item uses on the ground. And I use a <em>height</em> to store an item's height, which is the z value. (z axiz in my world, is y axis on screen).

The problem is hard to explain. It's about depth sorting. See the following image:

<a href="https://i.stack.imgur.com/OMm2H.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/OMm2H.png" data-original="https://i.stack.imgur.com/OMm2H.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

The brown bar on top of the other bar should be after the gray pole. I'm now using the simplest form of a painter's algorithm, that only compares the x, y, z coords of each item. I know this incorrect rendering is a famous problem of the painter's algorithm. If this was a tiled game, the bars could be divided into 2 tiles next to each other. Then the tiles could be drawn in the order of their depth.

But since I'm trying to create it without tiles, I am looking for a really challenging logic.

The items should be rendered as if they were 3D objects. I would even like to have the following behavior: If multiple items would intersect, then the visible pixels of each item should be drawn, like in this image:

<a href="https://i.stack.imgur.com/OVrPk.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/OVrPk.png" data-original="https://i.stack.imgur.com/OVrPk.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

The main problem is that there is no information to determine what parts of an image should be visible, and how they must be cut. I could create a depth mask for each image, like:

<a href="https://i.stack.imgur.com/xWuII.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/xWuII.png" data-original="https://i.stack.imgur.com/xWuII.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a> It works a little bit like a z-buffer.

But this is not possible due to the performance of a canvas, because you have to iterate literally over each pixel of each image in the map. And the second big disadvantage is that you have to load twice as much resources from the server...

Another solution might be cutting all images into vertical strips of 1 pixel wide. Then handle each strip as if it's a tile of 1x1 pixel. Then I'm still creating a tiled game, buy the tiles would be so small that I still reach my goal. But also this solution has the disadvantage performance... Since each image would be split in hundreds of strips, which are new seperate images.

So I'm looking for a challenging solution. Who can help me finding a way to define the depths (or depth areas) for images in a way that correct rendering is possible for the performance of canvas?


This question was effectively <a href="https://stackoverflow.com/questions/41200514/webgl-3d-usage-for-depth-sorting-2d-objects" rel="nofollow">asked again</a> and <a href="https://stackoverflow.com/a/41201398/128511" rel="nofollow">answered over here</a>

The short answer is <em>you can use depth sprites</em> with WebGL


  • How to plot area between a predefined upper and lower bounds in ggplot2?
  • PHP create embed image from database position
  • UnicodeDecodeError: 'ascii' codec can't decode byte 0xc3 in position
  • Is there a simple way to count occurences of one text string within another text string?
  • Finding path obstacles in a 2D image
  • VBA: Extract Top 'x' Entries from each category
  • Background not visible in surface view
  • SSRS 2008 - Sorting within a group
  • How can I print out a large table of symbols from MATLAB to form a cross-stitch chart?
  • How to select table rows/complete table?
  • PHPStorm Namespace support not working for Symfony2 projects
  • Wait for .each() .getJSON request to finish before executing a callback
  • @tailrec why does this method not compile with 'contains a recursive call not in tail position&
  • Embedded Google Maps in Rails not responsive
  • Cross platform UI spacing/padding
  • How to access meteor package name inside package?
  • SQL Query - Table Joining Problems
  • Application level floating views with navigation in Android
  • How to get latest version of a artifact on Bintray using JSONP
  • Tell Git to stop prompting me for conflicts when none really exist?
  • Django model inheritance, filtering models
  • AndEngine Applying Transparancy to AndEngine View
  • Using a canvas object in a thread to do simple animations - Java
  • Zurb Foundation _global.scss meta styles for js?
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • How integrated is Collada to OpenGL ES
  • Python urlparse: small issue
  • Avoid links criss cross / overlap in d3.js using force layout
  • FileReader+canvas image loading problem
  • Body moving without any force applied? (Box2d)
  • Splitting given String into two variables - php
  • TFS: Get latest causes slow project reloading
  • Join two tables and save into third-sql
  • How to model a transition system with SPIN
  • ORA-29908: missing primary invocation for ancillary operator
  • 0x202A in filename: Why?
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • How does Linux kernel interrupt the application?
  • python draw pie shapes with colour filled
  • Converting MP3 duration time