From 14fda4c7d6d08dbf22362a5bf19e92e4559e31e1 Mon Sep 17 00:00:00 2001
From: Richard Zink <Richard Zink>
Date: Wed, 7 Oct 2026 21:23:04 +0200
Subject: [PATCH] Fix half-tile offset in corridor canvas drawing

Shader maps world coords to UV via:
  gUv = rotated / uGroundSize + 0.5
  rotated = 0 -> canvas centre

But drawTileAt placed tiles at:
  canvasX = (lng + halfLong) * TILE_SIZE
  canvasY = (perp + halfPerp) * TILE_SIZE

With halfLong = 12 and lng iterating [-12..12], tile lng=0 lands
at canvas X = 3072 - but the shader wants gUv.x=0.5 (rotated=0)
at canvas centre X = 3200. Half a tile off.

Fix: shift drawing by +0.5 tiles so each tile CENTRE is at
(lng, perp), matching the shader's rotated-frame interpretation.
Tile centres now align with shader expectation; previous half-tile
diagonal wobble gone (which is what they meant by 'x und y
vertauscht' - the perpendicular axis was indeed offset).
---
 vendor/clouds3d.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/vendor/clouds3d.js b/vendor/clouds3d.js
index 3ff7a54..bde0245 100644
--- a/vendor/clouds3d.js
+++ b/vendor/clouds3d.js
@@ -314,12 +314,15 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
     var tileY = centerTileY + dz;
     var halfLong = Math.floor(GROUND_CORRIDOR_LONG / 2);
     var halfPerp = Math.floor(GROUND_CORRIDOR_PERP / 2);
-    // Canvas position is the rotated-frame coordinate (lng, perp),
-    // NOT the rotated tile offset (dx, dz). This way the texture
-    // is rectangular in canvas space and the shader maps world
-    // (hitPoint - centre) -> rotated axes -> canvas UV.
-    var canvasX = (lng + halfLong) * GROUND_TILE_SIZE;
-    var canvasY = (perp + halfPerp) * GROUND_TILE_SIZE;
+    // Canvas position: place each tile so its CENTRE sits at the
+    // rotated-frame coordinate (lng, perp). The shader maps
+    // gUv = rotated / uGroundSize + 0.5, so rotated = 0 is at the
+    // canvas centre (canvas_width/2, canvas_height/2). Iterating
+    // (lng, perp) over [-halfLong..halfLong] means tile centres at
+    // halfLong + 0.5 etc. Without the +0.5 the canvas would be
+    // half a tile off from the shader's expectation.
+    var canvasX = (lng + halfLong + 0.5) * GROUND_TILE_SIZE;
+    var canvasY = (perp + halfPerp + 0.5) * GROUND_TILE_SIZE;
     if (canvasX < 0 || canvasX >= groundCanvas.width || canvasY < 0 || canvasY >= groundCanvas.height) {
         return Promise.resolve(false);
     }