From 6e96c5ffadebe38ac3a51bcd70e4f3c57eaccde1 Mon Sep 17 00:00:00 2001 From: Richard Zink Date: Thu, 8 Oct 2026 06:43:46 +0200 Subject: [PATCH] Debug labels on each tile: N/S markers + x/y coords For verifying the corridor arrangement, draw labels on every loaded tile (per drawTileAt): - 'N' at the canvas top edge of the tile (= image north after UNPACK_FLIP_Y_WEBGL) - 'S' at the canvas bottom edge (= image south) - 'x=NNN y=NNN' at the centre with the actual ESRI tile coords This lets you see at a glance which canvas direction maps to which world direction. Combined with #flight=N|... and #fetch=N|... you can describe exactly what is wrong (e.g. N pointing in screen-up direction when it should point at the corridor front). --- vendor/clouds3d.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/vendor/clouds3d.js b/vendor/clouds3d.js index e70acf8..b755466 100644 --- a/vendor/clouds3d.js +++ b/vendor/clouds3d.js @@ -336,6 +336,29 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) { return fetchTileImage(tileX, tileY).then(function(img) { groundCtx.drawImage(img, canvasX, canvasY); groundLoadedTiles[tileX + '_' + tileY] = true; + + // Debug labels: 'N' at the image's north edge (top of canvas + // tile area after UNPACK_FLIP_Y_WEBGL), 'S' at south edge. + // Tile coords X,Y at the centre so we can verify the canvas + // arrangement matches the world directions. + groundCtx.fillStyle = 'rgba(255,255,255,0.85)'; + groundCtx.strokeStyle = 'rgba(0,0,0,0.85)'; + groundCtx.lineWidth = 3; + groundCtx.font = 'bold 48px sans-serif'; + groundCtx.textAlign = 'center'; + // N at canvas top of tile area (= north in image) + groundCtx.strokeText('N', canvasX + 128, canvasY + 56); + groundCtx.fillText('N', canvasX + 128, canvasY + 56); + // S at canvas bottom of tile area + groundCtx.strokeText('S', canvasX + 128, canvasY + 240); + groundCtx.fillText('S', canvasX + 128, canvasY + 240); + // Tile coords + groundCtx.font = 'bold 20px monospace'; + groundCtx.strokeText('x=' + tileX + ' y=' + tileY, + canvasX + 128, canvasY + 140); + groundCtx.fillText('x=' + tileX + ' y=' + tileY, + canvasX + 128, canvasY + 140); + return true; }).catch(function() { // On failure draw a neutral gray so the gap is at least