지도의 일부에 대한 javascript 높이가 2 차원 어레이 있습니다. 구호지도로 페인트하고 싶습니다. http://www.howardmodels.com/0-topographic/landform-maps-models/gusev-crater/gusev-crater1.jpg높이지도에서 구제지도를 자바 스크립트/HTML5 캔버스에
음영 처리 된 산면이 있습니다.
어떻게하면 좋을까요? 목표의 일부는 계산 강도를 낮게 유지하는 것입니다 (웹 기반 게임의 일부 임).
코드를 확인해 볼 수 있다면 잠시 후에 내가 한 일을 생각해보십시오.
http://somethinghitme.com/projects/canvasterrain/
만 단점 (코드 선명도 이외의)는 꽤 많이 (특히 그림자 맵 기능)입니다.
아래의 데모는 자체적으로 작동하는 그림자 맵 기능입니다.
확실히 정리 될 수 있습니다. 이것이하는 일은 기본적으로 중앙에 제기 된 사각형이있는 높이지도를 만드는 테스트 데이터를 만드는 것입니다. 그림자가 어떻게 사라지는 지 확인할 수 있습니다. 이것은 모두 광원 높이와 높이 맵과 비교하여 위치를 기반으로합니다. 참고 높이 데이터를 그리지 않습니다. 이미지가 흰색 인 이유입니다. 이것이하는 일에 대한 아이디어 만 제공합니다. 2 차원 배열의 데이터를 쉽게 적용 할 수 있습니다.
//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 우연히 사용하는 리소스의 일부를 찾으려고