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,