javascript - javascript/HTML5 Canvas 中的高度图到浮雕图

Question

我在 javascript 中有一个二维高度数组用于 map 的一部分。我想把它们画成一张浮雕图: 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

肯定可以清理干净。它所做的是创建一些测试数据，基本上是制作一个在中心有一个凸起正方形的高度图。你可以看到阴影是如何从那里消失的。这完全基于光源高度，以及与高度图相比的位置。 注意 我没有绘制高度数据，这就是为什么图像是白色的。它只是为了让您了解它的作用。将很容易将任何二维数据数组应用于它。

//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]是 map 的数据，是0-1之间的一个值。

在尝试查找我使用过的一些资源时，我遇到了这个 gamedev article ，除此之外我还用过另一个，但不幸的是我现在似乎找不到了。