diff --git a/assets/index.html b/assets/index.html index 099c310..dfcbef8 100644 --- a/assets/index.html +++ b/assets/index.html @@ -36,6 +36,32 @@ return [sx, sy]; } + function clipTriangle(p1, p2, p3, water) { + var points = [p1, p2, p3]; + var clipped = []; + + for (var i = 0; i < points.length; i++) { + var p1 = points[i]; + var p2 = points[(i + 1) % 3]; + + var t1 = (300 - p1[2]) / (p2[2] - p1[2]); + var t2 = (300 - p2[2]) / (p1[2] - p2[2]); + + if (p1[2] >= 300 && p2[2] >= 300) continue; + if (p1[2] < 300 && p2[2] < 300) { + clipped.push(p2); + } else { + var tt = (300 - p1[2]) / (p2[2] - p1[2]); + var ny = p1[1] + (p2[1] - p1[1]) * tt; + var nx = p1[0] + (p2[0] - p1[0]) * tt; + var nz = 300; + clipped.push([nx, ny, nz]); + if (p1[2] < 300) clipped.push(p1); + } + } + return clipped; + } + function getHeight(x, z) { var h = 0; h += Math.sin(x / 200) * 60; @@ -49,7 +75,7 @@ function generateLandscape() { triangles = []; - var range = 25; + var range = 30; var size = 100; for (var x = -range; x <= range; x++) { for (var z = -range; z <= range; z++) { @@ -74,12 +100,12 @@ triangles.sort(function(a, b) { return b.depth - a.depth; }); for (var i = 0; i < triangles.length; i++) { var t = triangles[i]; + if (t.p1[2] > 250 && t.p2[2] > 250 && t.p3[2] > 250) continue; + var p1 = project(t.p1[0], t.p1[1], t.p1[2]); var p2 = project(t.p2[0], t.p2[1], t.p2[2]); var p3 = project(t.p3[0], t.p3[1], t.p3[2]); - if (p1[1] < -200 || p1[1] > H + 200) continue; - ctx.fillStyle = t.water ? 'rgba(0, 80, 200, 0.85)' : 'rgba(0, 160, 0, 0.85)'; ctx.beginPath(); ctx.moveTo(p1[0], p1[1]);