diff --git a/vendor/clouds3d.js b/vendor/clouds3d.js index 61c6cdc..c9fa510 100644 --- a/vendor/clouds3d.js +++ b/vendor/clouds3d.js @@ -345,14 +345,14 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) { return Promise.resolve(false); } return fetchTileImage(tileX, tileY).then(function(img) { - // Mirror image across the NS axis (horizontal / X-flip): - // draw with negative width and positive height, anchored at - // the tile's right edge (canvasX + 256). Image top (north) - // stays at canvas top, image bottom (south) 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); + // 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); groundLoadedTiles[tileX + '_' + tileY] = true; // Thin border so the user can see where one tile ends and the