没有图块的等距渲染，该目标是否可以实现？ [英] Isometric rendering without tiles, is that goal reachable?
问题描述
我正在HTML5画布上创建2D游戏。这是一个等距的世界，所以实际上它也是3d。
您总是会看到等距游戏使用图块，并且我认为原因仅在于深度逻辑。
我的目标是不使用图块系统来创建游戏。用户可以放置每个项目，因此项目位置（如墙壁，树木等）具有可变的位置。位置是等距的x，y，z坐标。
如果只是平铺了游戏，则可以为每个项目确定一个固定的平铺区域。 （我的意思是：一件瓷砖，或一堵长10瓦的墙）。
但是，在我的游戏中，我将 areaX 和 areaY 用于地面上物品的使用空间。我使用 height 存储项目的高度，即z值。 （我的世界中的z axiz，是屏幕上的y轴）。
问题很难解释。关于深度排序。
请参见下图：
另一条顶部的棕色条应位于灰色杆之后。
我现在使用的是画家算法的最简单形式，该算法仅比较每个项目的x，y，z坐标。
我知道这种错误的渲染是画家算法的一个著名问题。
如果这是一个平铺游戏，则可以将条形图分成两个相邻的图块。然后可以按照其深度顺序来绘制图块。
但是由于我试图在不使用图块的情况下进行创建，因此我一直在寻找一种具有挑战性的逻辑。 / p>
项目应呈现为3D对象。我什至希望具有以下行为：如果多个项目将相交，则应绘制每个项目的可见像素，如下图所示：
主要问题是，没有信息可以确定图像的哪些部分应该可见以及如何裁剪。
我可以为每个图像创建深度蒙版，例如：
有点像z-buffer。
但是由于画布的性能，这是不可能的，因为您必须逐字遍历地图中每个图像的每个像素。
第二个主要缺点是您必须从服务器加载两倍的资源...
另一种解决方案可能是将所有图像都切成垂直条纹1像素宽。然后像处理1x1像素的瓦片一样处理每个条带。然后，我仍在创建拼贴游戏，购买的拼贴太小了，我仍然可以实现自己的目标。但是此解决方案也具有不利的性能...因为每个图像都会分成几百个带，这是新的单独图像。
所以我正在寻找一个具有挑战性的解决方案。谁能帮助我找到一种方法来定义图像的深度（或深度区域），从而可以正确渲染画布的性能？
简短的答案是您可以在WebGL中使用深度精灵
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 areaX and areaY for the space an item uses on the ground. And I use a height 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:
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:
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:
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 asked again and answered over here
The short answer is you can use depth sprites with WebGL
这篇关于没有图块的等距渲染，该目标是否可以实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
