Revert canvasX swap: east on canvas left (matches user's x gradient)

User feedback: x decreasing left-to-right (matches NO swap), y
increasing in flight direction (matches swap). So the swap on
canvasY is right but the swap on canvasX was wrong direction.

With the no-swap canvasX formula:
- perp = -2 (east, dx=+2) at canvasX = 128 (left)
- perp = +2 (west, dx=-2) at canvasX = 1152 (right)

After UNPACK flip: canvasX stays as-is. User at canvas right sees
west (low x). User at canvas left sees east (high x). x decreases
left-to-right in the label content, matching what the user sees
in the satellite imagery too.

(The Y swap remains so lng=+12 -> canvasY=128 -> screen top, so
north tiles still appear at the top of the screen.)
This commit is contained in:
Richard Zink committed 2026-10-08 07:33:56 +02:00
1 parent 4cf3c00dfa
commit d063e5e864
1 file changed
+5 -4
+5 -4
View File
@@ -329,10 +329,11 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
// corridor's long axis (flight direction +Z) appears as a vertical // corridor's long axis (flight direction +Z) appears as a vertical
// strip on canvas, matching the way depth maps on screen. // strip on canvas, matching the way depth maps on screen.
// UNPACK_FLIP_Y_WEBGL=true inverts V: canvas top -> texture V=1 (top). // UNPACK_FLIP_Y_WEBGL=true inverts V: canvas top -> texture V=1 (top).
// To put lng=+12 (corridor front in N flight) at screen TOP we put it // For lng axis (Y): invert canvasY so lng=+12 (corridor front in
// at canvas top (small canvasY). Same inversion for perp so world // N flight) lands at small canvasY (= screen top after flip).
// east (dx>0, perp<0) ends up at canvas right (large canvasX). // For perp axis (X): keep the natural sign so world east (dx>0)
var canvasX = (-perp + halfPerp + 0.5) * GROUND_TILE_SIZE; // ends up at canvasX > halfPerp area (right side of canvas).
var canvasX = (perp + halfPerp + 0.5) * GROUND_TILE_SIZE;
var canvasY = (-lng + halfLong + 0.5) * GROUND_TILE_SIZE; var canvasY = (-lng + halfLong + 0.5) * GROUND_TILE_SIZE;
if (canvasX < 0 || canvasX >= groundCanvas.width || canvasY < 0 || canvasY >= groundCanvas.height) { if (canvasX < 0 || canvasX >= groundCanvas.width || canvasY < 0 || canvasY >= groundCanvas.height) {
return Promise.resolve(false); return Promise.resolve(false);