288 lines
9.4 KiB
HTML
288 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Isometric Voxel Terrain</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { overflow: hidden; background: #000; }
|
|
canvas { display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="c"></canvas>
|
|
<script>
|
|
var c = document.getElementById('c');
|
|
var ctx = c.getContext('2d');
|
|
var W, H;
|
|
var TILE = 32;
|
|
var GAP = 0;
|
|
var HEIGHT_UNIT = 6;
|
|
|
|
function resize() {
|
|
W = c.width = window.innerWidth;
|
|
H = c.height = window.innerHeight;
|
|
}
|
|
window.addEventListener('resize', resize);
|
|
resize();
|
|
|
|
var angle = Math.PI / 6;
|
|
var cosA = Math.cos(angle);
|
|
var sinA = Math.sin(angle);
|
|
|
|
function project(x, y, z) {
|
|
var scale = 1;
|
|
var isoX = (x - y) * cosA * scale;
|
|
var isoY = ((x + y) * sinA - z) * scale;
|
|
var sx = isoX + W / 2;
|
|
var sy = isoY + H / 2;
|
|
return [sx, sy];
|
|
}
|
|
|
|
function getHeight(x, y) {
|
|
var n = perlin2D(x * 0.02, y * 0.02, 4);
|
|
return 10 + Math.round(n * 5);
|
|
}
|
|
|
|
function fade(t) {
|
|
return t * t * t * (t * (t * 6 - 15) + 10);
|
|
}
|
|
|
|
function lerp(a, b, t) {
|
|
return a + t * (b - a);
|
|
}
|
|
|
|
function grad2D(hash, x, y) {
|
|
var h = hash & 3;
|
|
var u = h < 2 ? x : y;
|
|
var v = h < 2 ? y : x;
|
|
return ((h & 1) ? -u : u) + ((h & 2) ? -2 * v : 2 * v);
|
|
}
|
|
|
|
var perm = [];
|
|
for (var i = 0; i < 256; i++) perm[i] = Math.floor(Math.random() * 256);
|
|
for (var i = 0; i < 256; i++) perm[i + 256] = perm[i];
|
|
|
|
function perlin2D(x, y, octaves) {
|
|
var total = 0;
|
|
var frequency = 1;
|
|
var amplitude = 1;
|
|
var maxValue = 0;
|
|
for (var i = 0; i < octaves; i++) {
|
|
var xi = Math.floor(x * frequency) & 255;
|
|
var yi = Math.floor(y * frequency) & 255;
|
|
var xf = x * frequency - Math.floor(x * frequency);
|
|
var yf = y * frequency - Math.floor(y * frequency);
|
|
var u = fade(xf);
|
|
var v = fade(yf);
|
|
var aa = perm[perm[xi] + yi];
|
|
var ab = perm[perm[xi] + yi + 1];
|
|
var ba = perm[perm[xi + 1] + yi];
|
|
var bb = perm[perm[xi + 1] + yi + 1];
|
|
var x1 = lerp(grad2D(aa, xf, yf), grad2D(ba, xf - 1, yf), u);
|
|
var x2 = lerp(grad2D(ab, xf, yf - 1), grad2D(bb, xf - 1, yf - 1), u);
|
|
total += lerp(x1, x2, v) * amplitude;
|
|
maxValue += amplitude;
|
|
amplitude *= 0.5;
|
|
frequency *= 2;
|
|
}
|
|
return total / maxValue;
|
|
}
|
|
|
|
function isWater(h) {
|
|
return false;
|
|
}
|
|
|
|
var tiles = [];
|
|
|
|
function generateTiles() {
|
|
tiles = [];
|
|
var rangeX = Math.ceil(W / (TILE * cosA * 2)) + 2;
|
|
var rangeY = Math.ceil(H / (TILE * sinA * 2)) + 2;
|
|
|
|
for (var x = -rangeX; x <= rangeX; x++) {
|
|
for (var y = -rangeY; y <= rangeY; y++) {
|
|
var wx = x * TILE;
|
|
var wy = y * TILE;
|
|
var h = getHeight(wx, wy);
|
|
tiles.push({ x: wx, y: wy, h: h });
|
|
}
|
|
}
|
|
}
|
|
|
|
function drawTile(wx, wy, h, water, hRight, hBack, inShadow) {
|
|
var top1 = project(wx + GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
|
|
var top2 = project(wx + TILE - GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
|
|
var top3 = project(wx + TILE - GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
|
|
var top4 = project(wx + GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
|
|
|
|
var topColor = '#5a8a5a';
|
|
var rightColor = '#6b4423';
|
|
var leftColor = '#3d2614';
|
|
|
|
ctx.fillStyle = topColor;
|
|
ctx.beginPath();
|
|
ctx.moveTo(top1[0], top1[1]);
|
|
ctx.lineTo(top2[0], top2[1]);
|
|
ctx.lineTo(top3[0], top3[1]);
|
|
ctx.lineTo(top4[0], top4[1]);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
if (hRight < h) {
|
|
ctx.fillStyle = rightColor;
|
|
ctx.beginPath();
|
|
ctx.moveTo(top2[0], top2[1]);
|
|
ctx.lineTo(top3[0], top3[1]);
|
|
ctx.lineTo(top3[0], top3[1] + (h - hRight) * HEIGHT_UNIT);
|
|
ctx.lineTo(top2[0], top2[1] + (h - hRight) * HEIGHT_UNIT);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
}
|
|
|
|
if (hBack < h) {
|
|
ctx.fillStyle = leftColor;
|
|
ctx.beginPath();
|
|
ctx.moveTo(top1[0], top1[1]);
|
|
ctx.lineTo(top2[0], top2[1]);
|
|
ctx.lineTo(top2[0], top2[1] + (h - hBack) * HEIGHT_UNIT);
|
|
ctx.lineTo(top1[0], top1[1] + (h - hBack) * HEIGHT_UNIT);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
function drawTiles() {
|
|
tiles.sort(function(a, b) {
|
|
return ((a.x + a.y) - (b.x + b.y));
|
|
});
|
|
|
|
var heightMap = {};
|
|
for (var i = 0; i < tiles.length; i++) {
|
|
var t = tiles[i];
|
|
heightMap[t.x + ',' + t.y] = t.h;
|
|
}
|
|
|
|
var renderList = [];
|
|
|
|
for (var i = 0; i < tiles.length; i++) {
|
|
var t = tiles[i];
|
|
var wx = t.x, wy = t.y, h = t.h;
|
|
|
|
var water = isWater(h);
|
|
|
|
for (var level = 1; level <= h; level++) {
|
|
var hRight;
|
|
if (level > (heightMap[(wx + TILE) + ',' + wy] || 0)) {
|
|
hRight = level - 1;
|
|
} else {
|
|
hRight = level;
|
|
}
|
|
var hBack;
|
|
if (level > (heightMap[wx + ',' + (wy + TILE)] || 0)) {
|
|
hBack = level - 1;
|
|
} else {
|
|
hBack = level;
|
|
}
|
|
|
|
renderList.push({
|
|
type: 'tile',
|
|
wx: wx, wy: wy, level: level,
|
|
hRight: hRight, hBack: hBack,
|
|
depth: wx + wy + level * 0.001
|
|
});
|
|
}
|
|
|
|
if (h > 0) {
|
|
var hLeftNeighbor = heightMap[(wx - TILE) + ',' + wy] || 0;
|
|
var hFrontNeighbor = heightMap[wx + ',' + (wy + TILE)] || 0;
|
|
|
|
var shadowFromRight = hLeftNeighbor - h;
|
|
var shadowFromFront = hFrontNeighbor - h;
|
|
|
|
if (shadowFromRight > 0) {
|
|
var shadowW = Math.min(shadowFromRight * 4, TILE * 2);
|
|
var tt = shadowW / TILE;
|
|
var edge1 = project(wx + GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
|
|
var edge4 = project(wx + GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
|
|
var mid1 = project(wx + GAP/2 + shadowW, wy + TILE - GAP/2 - shadowW, h * HEIGHT_UNIT);
|
|
var mid2 = project(wx + GAP/2 + shadowW, wy + GAP/2 + shadowW, h * HEIGHT_UNIT);
|
|
|
|
renderList.push({
|
|
type: 'shadow',
|
|
points: [
|
|
{ x: edge4[0], y: edge4[1] },
|
|
{ x: edge1[0], y: edge1[1] },
|
|
{ x: mid1[0], y: mid1[1] },
|
|
{ x: mid2[0], y: mid2[1] }
|
|
],
|
|
depth: wx + wy + h + 0.999
|
|
});
|
|
}
|
|
|
|
if (shadowFromFront > 0) {
|
|
var shadowW = Math.min(shadowFromFront * 4, TILE * 2);
|
|
var tt = shadowW / TILE;
|
|
var edge3 = project(wx + TILE - GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
|
|
var edge4 = project(wx + GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
|
|
var mid1 = project(wx + GAP/2 + shadowW, wy + GAP/2 + shadowW, h * HEIGHT_UNIT);
|
|
var mid2 = project(wx + TILE - GAP/2 - shadowW, wy + GAP/2 + shadowW, h * HEIGHT_UNIT);
|
|
|
|
renderList.push({
|
|
type: 'shadow',
|
|
points: [
|
|
{ x: edge4[0], y: edge4[1] },
|
|
{ x: edge3[0], y: edge3[1] },
|
|
{ x: mid2[0], y: mid2[1] },
|
|
{ x: mid1[0], y: mid1[1] }
|
|
],
|
|
depth: wx + wy + h + 0.999
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
renderList.sort(function(a, b) { return a.depth - b.depth; });
|
|
|
|
for (var i = 0; i < renderList.length; i++) {
|
|
var item = renderList[i];
|
|
if (item.type === 'tile') {
|
|
drawTile(item.wx, item.wy, item.level, true, item.hRight, item.hBack, false);
|
|
} else {
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
|
|
ctx.beginPath();
|
|
ctx.moveTo(item.points[0].x, item.points[0].y);
|
|
ctx.lineTo(item.points[1].x, item.points[1].y);
|
|
ctx.lineTo(item.points[2].x, item.points[2].y);
|
|
ctx.lineTo(item.points[3].x, item.points[3].y);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
}
|
|
}
|
|
}
|
|
|
|
function applyLighting(color, factor) {
|
|
var r = parseInt(color.substr(1, 2), 16);
|
|
var g = parseInt(color.substr(3, 2), 16);
|
|
var b = parseInt(color.substr(5, 2), 16);
|
|
r = Math.floor(r * factor);
|
|
g = Math.floor(g * factor);
|
|
b = Math.floor(b * factor);
|
|
return 'rgb(' + r + ',' + g + ',' + b + ')';
|
|
}
|
|
|
|
function frame() {
|
|
ctx.fillStyle = '#001020';
|
|
ctx.fillRect(0, 0, W, H);
|
|
|
|
generateTiles();
|
|
drawTiles();
|
|
|
|
requestAnimationFrame(frame);
|
|
}
|
|
|
|
frame();
|
|
</script>
|
|
</body>
|
|
</html> |