Question

我在javascript中为地图的一部分设置了一个2d数组的高度。我想把它们描绘成一张浮雕图： http://www.howardmodels.com/0-topographic/landform-maps-models/gusev-crater/gusev-crater1.jpg

有阴影的山边等等。

关于如何做到这一点的任何好主意？部分目标是保持较低的计算强度（这将是基于网络的游戏的一部分）。

Answer 1

如果你可以通过代码检查这个问题，我会做一些事情。

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

唯一的缺点（除了代码清晰度）是非常密集的（特别是阴影贴图功能）。

下面的演示只是阴影贴图功能。

<强> Live Demo

<强> Animated Version

可以肯定清理。这样做是为了创建一些测试数据，基本上制作一个在中心有一个凸起正方形的高度图。你可以看到阴影是如何从那里消失的。这都是基于光源高度和与高度图相比的位置。 note 我没有绘制高度数据，这就是图像为白色的原因。它只是为了让你了解它的作用。很容易将任何2d数据应用到它。

//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 ，除此之外还有另外一个我使用过但不幸的是我似乎无法找到它。

在javascript / HTML5 Canvas中的高度图缓解地图

1 个答案: