Render surface maps directly and preserve their quality

renderer/render.mjs

@@ -5,6 +5,7 @@ import { resolve, sep } from "node:path";
 import sharp from "sharp";
 import { assetsRoot, prepareAssets } from "../scripts/assets.mjs";
 import { assertTerrainImage } from "./image-validation.mjs";
+import { renderSurfaceMap } from "./surface-map.mjs";
 /** @param {import('../shared/protocol').TerrainSnapshot} snapshot
  * @param {Array<{id:string,x:number,y:number,z:number}>} viewpoints
  * @param {string} output
@@ -202,13 +203,7 @@ export async function renderSnapshot(
       }
     }
     await report({ percent: 85, message: "Rendering the surface map" });
-    const map = await page.evaluate(() => window.renderMap(1024));
-    const mapBytes = Buffer.from(map.split(",")[1], "base64");
-    await assertTerrainImage(mapBytes, "Surface map");
-    if (map.startsWith("data:image/webp;"))
-      await writeFile(`${output}/map.webp`, mapBytes);
-    else
-      await sharp(mapBytes).webp({ quality: 90 }).toFile(`${output}/map.webp`);
+    stats.map = await renderSurfaceMap(snapshot, `${output}/map.webp`);
     await report({
       percent: 90,
       message: "Rendered all panoramas and the surface map",