我在HTML5畫布中創建了2D遊戲。這是一個等距世界，實際上它也是3D。 你總是會看到等距遊戲使用拼圖，我認爲其原因僅僅在於深度邏輯。 我的目標是在不使用拼貼系統的情況下創建遊戲。每個物品都可以由用戶放置，因此物品位置（如牆壁，樹木等）具有可變的位置。位置是等距x，y，z座標。 如果遊戲剛剛平鋪，您可以確定每個項目的固定瓷磚面積。 （我的意思是：一個瓷磚項目，或一個10瓦長的牆）。 但是在我的遊戲中，我使用區域X和areaY爲物品在地面上使用的空間。我使用高度來存儲項目的高度，這是z值。 （我的世界中的z軸，屏幕上是y軸）。沒有瓷磚的等距渲染，該目標是否可達？
這個問題很難解釋。這是關於深度分類。 參見下面的圖像：
在另一杆的頂部的棕色條應是灰色極之後。 我現在使用的是畫家算法的最簡單形式，它只比較每個項目的x，y，z座標。 我知道這個不正確的渲染是畫家算法的一個着名問題。 如果這是一個平鋪遊戲，酒吧可以被分成彼此相鄰的2個瓦片。然後可以按照其深度的順序繪製瓦片。
但是因爲我正在試圖創建它沒有瓷磚，我正在尋找一個非常具有挑戰性的邏輯。
這些項目應該呈現爲3D對象。我甚至想有以下行爲：如果有多個項目將相交，則每個項目的可見像素應該可以得出，這樣的形象：
的主要問題是，有沒有信息確定圖像的哪些部分應該可見，以及如何剪切它們。 我可以爲每個圖像創建一個深度遮罩，例如：
它的工作原理有點像z緩衝區。
但是，由於畫布的性能，這是不可能的，因爲您必須逐字地遍歷地圖中每個圖像的每個像素。 第二大缺點是你必須從服務器加載兩倍的資源...
另一種解決方案可能是將所有圖像剪切成1像素寬的垂直條。然後處理每個條，就好像它是1x1像素的圖塊。然後，我仍然在創建一個平鋪遊戲，購買瓷磚會很小，我仍然達到我的目標。但是這個解決方案也有不利的表現......因爲每幅圖像都會被拆分成數百條，這是一個新的獨立圖像。
所以我正在尋找一個具有挑戰性的解決方案。誰可以幫助我找到一種方法來定義圖像的深度（或深度區域），以便可以正確渲染畫布的性能？
樹使用three.js所或WebGL的 – mike510a
我將不得不同意。嘗試threex.colliders。示例：http://jeromeetienne.github.io/threex.colliders/examples/basic.html – rassar
您可以從2D畫布獲得合理的性能以獲得真正的3D等軸測圖，但是您會陷入深度排序，這可能是一種痛苦。 JavaScript標準數組排序可以做一個合理的排序，如果你是如何排列對象（對排序的多邊形進行排序）。要解決重疊的多邊形，您需要切分它們截取的多邊形。此測試可能會很慢，但再次，分組區域將有所幫助。如果你的多邊形是軸對齊的，你會得到實時的。一旦你離開，它的速度會慢下來。我贊成webGL，這是它的3D – Blindman67