From 23327a1cbaf0ff851721f8132cbd364fbd6a8b2c Mon Sep 17 00:00:00 2001 From: Richard Zink Date: Thu, 8 Oct 2026 07:49:35 +0200 Subject: [PATCH] Rotate tile images 180 degrees drawImage(img, canvasX + TILE, canvasY + TILE, -TILE, -TILE) flips the image both horizontally and vertically, so: - Image north (high lat) ends up at canvas bottom (was top) - Image south (low lat) ends up at canvas top - Image east (high lon) ends up at canvas right - Image west (low lon) ends up at canvas left Combined with NO canvasY swap and the WebGL flip: - North tiles drawn at canvas bottom -> after WebGL flip, still at screen bottom. Screen bottom has image north = high y. So y at screen bottom = high. - Looking forward (close ground = screen bottom in cockpit) = high y. y increases in flight direction. With NO canvasX swap: - East tiles (high x) drawn at canvas left - Image east at canvas right within each tile (high x) - Image west at canvas left within each tile (low x) So at screen left: east tiles with image x increasing left to right (low to high within tile). At screen right: west tiles with image x decreasing left to right. Overall: x at screen right (west tiles, low x label) lower than at screen left (east tiles, high x label). x decreases left to right. --- vendor/clouds3d.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/vendor/clouds3d.js b/vendor/clouds3d.js index d524183..ec6ae60 100644 --- a/vendor/clouds3d.js +++ b/vendor/clouds3d.js @@ -339,7 +339,13 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) { return Promise.resolve(false); } return fetchTileImage(tileX, tileY).then(function(img) { - groundCtx.drawImage(img, canvasX, canvasY); + // Rotate image 180 degrees: draw with negative width and + // negative height, anchored at the tile's bottom-right corner + // (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. + groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY + GROUND_TILE_SIZE, + -GROUND_TILE_SIZE, -GROUND_TILE_SIZE); groundLoadedTiles[tileX + '_' + tileY] = true; // Debug labels: 'N' at the image's north edge (top of canvas