Clip distant landscape triangles

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]);