From 00e59983bfa3c0d2e0225cbe5e08295c9f75c8ff Mon Sep 17 00:00:00 2001 From: Richard Zink Date: Thu, 8 Oct 2026 09:32:33 +0200 Subject: [PATCH] Re-add X-flip on image: NS-mirror tile content The user wanted the tile content to be NS-mirrored (X-flip on the image) so the corridor orientation matches. The labels are drawn separately in normal orientation, so they read normally. Now the arrangement has: - canvasX = -perp + ... (X-swap): east tiles on screen right - Image X-flipped (NS-mirror): image east at left of tile - Labels in corners drawn normally: x=1102, y=707 readable Combining these, the user looking at the screen sees: - screen left: west tiles (low x), with image west on the right - screen right: east tiles (high x), with image east on the left - All labels readable So the X coordinates read correctly when the eye scans left to right across the corridor, and the image content is NS-mirrored to match the corridor's direction of travel. --- vendor/clouds3d.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/vendor/clouds3d.js b/vendor/clouds3d.js index c9fa510..5a772cf 100644 --- a/vendor/clouds3d.js +++ b/vendor/clouds3d.js @@ -345,14 +345,13 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) { return Promise.resolve(false); } return fetchTileImage(tileX, tileY).then(function(img) { - // Draw image with normal orientation (no X-flip). The image - // content within each tile is readable (place names, streets - // not mirrored). The arrangement uses the X-swap formula - // (canvasX = -perp + ...) to place east tiles on the right of - // the screen, so the X arrangement reads naturally left to - // right. - groundCtx.drawImage(img, canvasX, canvasY, - GROUND_TILE_SIZE, GROUND_TILE_SIZE); + // NS-mirror: X-flip the image so the tile content matches + // the corridor orientation (east tiles have their image east + // on the left of the drawn area, west tiles on the right). + // Labels are drawn separately in normal orientation, so the + // X-coordinates labels read normally. + groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY, + -GROUND_TILE_SIZE, GROUND_TILE_SIZE); groundLoadedTiles[tileX + '_' + tileY] = true; // Thin border so the user can see where one tile ends and the