高度地圖到救濟地圖在JavaScript/HTML5畫布

Question

我有一個地圖的一部分在JavaScript的高度的二維數組。我想畫他們作爲地形圖： http://www.howardmodels.com/0-topographic/landform-maps-models/gusev-crater/gusev-crater1.jpg

與陰影山側等。

如何做到這一點的好主意？部分目標是保持較低的計算強度（這將成爲基於Web的遊戲的一部分）。

Answer 1

如果你可以通過代碼來檢查這一點，我做了一段時間後回來。

http://somethinghitme.com/projects/canvasterrain/

唯一的缺點（除了代碼的清晰度）是其相當密集的（尤其是陰影貼圖功能）。

下面的演示只是陰影貼圖函數自身工作。

Live Demo

Animated Version

可以清理肯定。這樣做就是創建一些測試數據，基本上製作一個高度圖，中間有一個凸起的方形。你可以看到陰影從那裏出來。這全部基於光源高度和相對於高度圖的位置。 note我不畫高度數據，這就是爲什麼圖像是白色的。它只是爲了讓你知道這是做什麼。將很容易應用任何二維數據陣列。

//Create Shadowmap 
function drawShadowMap(size, sunPosX, sunPosY, sunHeight){ 
    var ctx = mapCanvas.getContext("2d"), 
    x = 0, y = 0, 
    idx, 
    colorFill = 0, 
    sunX, sunY, sunZ, 
    pX, pY, pZ, 
    mag, dX, dY, dZ; 

    // Suns position 
    sunX = sunPosX; 
    sunY = sunPosY; 
    sunZ = sunHeight; 

    for(x = 0; x <= mapDimension; x += unitSize){ 
     for(y = 0; y <= mapDimension; y += unitSize){  
      dX = sunX - x; 
      dY = sunY - y; 
      dZ = sunZ - map[x][y]; 

      mag = Math.sqrt(dX * dX + dY * dY + dZ * dZ); 

      dX = (dX/mag); 
      dY = (dY/mag); 
      dZ = (dZ/mag); 

      pX = x; 
      pY = y; 
      pZ = map[x][y]; 

      while(pX >= 0 && pX < mapDimension && pY >= 0 && pY < mapDimension && pZ <= sunZ){ 

       if((map[round(pX)][round(pY)]) > pZ){ 

        ctx.fillStyle = "rgba(" + 0 + "," + 0 + "," + 0 +"," + 0.7 + ")"; 
        ctx.fillRect (x, y, unitSize, unitSize); 
        break; 
       } 

       pX += (dX * unitSize); 
       pY += (dY * unitSize); 
       pZ += (dZ * unitSize); 
      } 
     } 
    } 
} 

map[x][y]爲地圖中的數據，並且是0-1之間的值。

試圖找到一些我用我碰到這個gamedev article附帶的資源，還有一個我除了所用，但似乎我現在不能找到它不幸。