Add gap between voxels to prevent clipping

assets/index.html

@@ -17,6 +17,7 @@
     var ctx = c.getContext('2d');
     var W, H;
     var TILE = 32;
+    var GAP = 2;
     var HEIGHT_UNIT = 6;
 
     function resize() {
@@ -70,37 +71,16 @@
         }
     }
 
-    function drawTiles() {
+    function drawTile(wx, wy, h, water, hLeft, hFront) {
-        tiles.sort(function(a, b) {
+        var top1 = project(wx + GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
-            return ((a.x + a.y) - (b.x + b.y));
+        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 heightMap = {};
-        for (var i = 0; i < tiles.length; i++) {
-            var t = tiles[i];
-            heightMap[t.x + ',' + t.y] = t.h;
-        }
-
-        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);
-
-            var hLeft = heightMap[(wx - TILE) + ',' + wy] || 0;
-            var hRight = heightMap[(wx + TILE) + ',' + wy] || 0;
-            var hFront = heightMap[wx + ',' + (wy - TILE)] || 0;
-            var hBack = heightMap[wx + ',' + (wy + TILE)] || 0;
 
         var topColor = water ? '#2299dd' : '#33aa33';
         var leftColor = water ? '#1166aa' : '#226622';
         var rightColor = water ? '#0d4477' : '#114411';
 
-            var top1 = project(wx, wy + TILE, h * HEIGHT_UNIT);
-            var top2 = project(wx + TILE, wy + TILE, h * HEIGHT_UNIT);
-            var top3 = project(wx + TILE, wy, h * HEIGHT_UNIT);
-            var top4 = project(wx, wy, h * HEIGHT_UNIT);
-
         ctx.fillStyle = topColor;
         ctx.beginPath();
         ctx.moveTo(top1[0], top1[1]);
@@ -121,17 +101,40 @@
             ctx.fill();
         }
 
-            if (hBack < h) {
+        if (hFront < h) {
             ctx.fillStyle = rightColor;
             ctx.beginPath();
             ctx.moveTo(top3[0], top3[1]);
             ctx.lineTo(top4[0], top4[1]);
-                ctx.lineTo(top4[0], top4[1] + (h - hBack) * HEIGHT_UNIT);
+            ctx.lineTo(top4[0], top4[1] + (h - hFront) * HEIGHT_UNIT);
-                ctx.lineTo(top3[0], top3[1] + (h - hBack) * HEIGHT_UNIT);
+            ctx.lineTo(top3[0], top3[1] + (h - hFront) * 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;
+        }
+
+        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);
+
+            var hLeft = heightMap[(wx - TILE) + ',' + wy] || 0;
+            var hFront = heightMap[wx + ',' + (wy - TILE)] || 0;
+
+            drawTile(wx, wy, h, water, hLeft, hFront);
+        }
     }
 
     function applyLighting(color, factor) {