From acac6dccfcd70f85a181c11736f25cc62442b2f2 Mon Sep 17 00:00:00 2001 From: Richard Zink Date: Thu, 8 Oct 2026 08:11:23 +0200 Subject: [PATCH] NS mirror of tile image only (X-flip, no rotation) User wants the tile texture mirrored across the NS axis only (no 180 rotation). drawImage with width=-TILE, height=+TILE flips only the X axis: - Image top (north) stays at canvas top - Image bottom (south) stays at canvas bottom - Image left (west) -> canvas right - Image right (east) -> canvas left Labels N/S moved to match the new (un-Y-flipped) orientation: N at canvas top, S at canvas bottom. The tile arrangement in the corridor is unchanged. --- vendor/clouds3d.js | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/vendor/clouds3d.js b/vendor/clouds3d.js index 60b92b2..9e620c7 100644 --- a/vendor/clouds3d.js +++ b/vendor/clouds3d.js @@ -346,12 +346,12 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) { // (canvasX + 256, canvasY + 256). After this, image north // (high lat) is at canvas bottom and image south at canvas // top; image east at canvas right, image west at canvas left. - // Flip image 180° (both X and Y). Image top (north) -> canvas - // bottom, image bottom (south) -> canvas top, image left - // (west) -> canvas right, image right (east) -> canvas left. - // Labels N/S already match the Y-flipped orientation. - groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY + GROUND_TILE_SIZE, - -GROUND_TILE_SIZE, -GROUND_TILE_SIZE); + // Mirror image across the NS axis (X-only flip). Image top + // (north) stays at canvas top, image bottom (south) stays + // at canvas bottom. Image left (west) -> canvas right, image + // right (east) -> canvas left. + groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY, + -GROUND_TILE_SIZE, GROUND_TILE_SIZE); groundLoadedTiles[tileX + '_' + tileY] = true; // Debug labels: 'N' at the image's north edge (top of canvas @@ -363,13 +363,12 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) { groundCtx.lineWidth = 3; groundCtx.font = 'bold 48px sans-serif'; groundCtx.textAlign = 'center'; - // N at canvas bottom of tile area (image north is at canvas - // bottom because image is Y-flipped). - groundCtx.strokeText('N', canvasX + 128, canvasY + 240); - groundCtx.fillText('N', canvasX + 128, canvasY + 240); - // S at canvas top - groundCtx.strokeText('S', canvasX + 128, canvasY + 56); - groundCtx.fillText('S', canvasX + 128, canvasY + 56); + // N at canvas top of tile area (image north is at top) + groundCtx.strokeText('N', canvasX + 128, canvasY + 56); + groundCtx.fillText('N', canvasX + 128, canvasY + 56); + // S at canvas bottom + 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,