高度地图到救济地图在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附带的资源，还有一个我除了所用，但似乎我现在不能找到它不幸。