Карта высоты на карту рельефа в холсте javascript / HTML5

Question

У меня есть 2d массив высот в javascript для части карты. Я хотел бы нарисовать их как карту рельефа: http://www.howardmodels.com/0-topographic/landform-maps-models/gusev-crater/gusev-crater1.jpg

с затененными горными склонами и тому подобное.

Есть хорошие идеи, как это сделать? Часть цели состоит в том, чтобы поддерживать низкую вычислительную интенсивность (это будет частью сетевой игры).

Answer 1

Если вы можете пройтись по коду, проверьте это, кое-что, что я сделал некоторое время назад.

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

Единственным недостатком (помимо ясности кода) является его довольно интенсивный (особенно функция карты теней).

Демонстрация ниже - это просто функция карты теней, работающая сама по себе.

Демонстрация в реальном времени

Анимированная версия

Можно наверняка почистить. Это создает некоторые тестовые данные, в основном создавая карту высот с выпуклым квадратом в центре. Вы можете видеть, как тень выходит оттуда. Все это основано на высоте источников света и положении по сравнению с картой высот. 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 , был другой, который я использовал в дополнение к этому, но я не могу найти его сейчас к сожалению.