324 lines
11 KiB
JavaScript
324 lines
11 KiB
JavaScript
/**
|
|
* Headless rendering harness for World Orogen.
|
|
*
|
|
* Launches a local HTTP server, drives the app with Puppeteer, generates
|
|
* planets from fixed seeds/slider combos, and saves globe screenshots to
|
|
* tuning/screenshots/.
|
|
*
|
|
* Usage: node tuning/render-harness.mjs
|
|
*/
|
|
|
|
import http from 'node:http';
|
|
import fs from 'node:fs';
|
|
import path from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
import puppeteer from 'puppeteer';
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Paths
|
|
// ---------------------------------------------------------------------------
|
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
const PROJECT_ROOT = path.resolve(__dirname, '..');
|
|
const SCREENSHOT_DIR = path.join(__dirname, 'screenshots');
|
|
|
|
fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// MIME types for the static server
|
|
// ---------------------------------------------------------------------------
|
|
const MIME = {
|
|
'.html': 'text/html',
|
|
'.js': 'application/javascript',
|
|
'.mjs': 'application/javascript',
|
|
'.css': 'text/css',
|
|
'.json': 'application/json',
|
|
'.png': 'image/png',
|
|
'.jpg': 'image/jpeg',
|
|
'.jpeg': 'image/jpeg',
|
|
'.svg': 'image/svg+xml',
|
|
'.ico': 'image/x-icon',
|
|
'.woff': 'font/woff',
|
|
'.woff2':'font/woff2',
|
|
'.webmanifest': 'application/manifest+json',
|
|
'.txt': 'text/plain',
|
|
'.xml': 'application/xml',
|
|
'.wasm': 'application/wasm',
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Static file server
|
|
// ---------------------------------------------------------------------------
|
|
function startServer() {
|
|
return new Promise((resolve) => {
|
|
const server = http.createServer((req, res) => {
|
|
let urlPath = decodeURIComponent(new URL(req.url, 'http://localhost').pathname);
|
|
if (urlPath === '/' || urlPath === '') urlPath = '/index.html';
|
|
|
|
const filePath = path.join(PROJECT_ROOT, urlPath);
|
|
|
|
// Security: stay inside project root
|
|
if (!filePath.startsWith(PROJECT_ROOT)) {
|
|
res.writeHead(403); res.end(); return;
|
|
}
|
|
|
|
fs.readFile(filePath, (err, data) => {
|
|
if (err) {
|
|
res.writeHead(404);
|
|
res.end('Not found');
|
|
return;
|
|
}
|
|
const ext = path.extname(filePath).toLowerCase();
|
|
const mime = MIME[ext] || 'application/octet-stream';
|
|
res.writeHead(200, { 'Content-Type': mime });
|
|
res.end(data);
|
|
});
|
|
});
|
|
|
|
server.listen(0, '127.0.0.1', () => {
|
|
const port = server.address().port;
|
|
console.log(`Static server listening on http://127.0.0.1:${port}`);
|
|
resolve({ server, port });
|
|
});
|
|
});
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Test cases
|
|
// ---------------------------------------------------------------------------
|
|
const DETAIL_SLIDER_VALUE = 400; // ~31 000 regions — fast iteration
|
|
|
|
const TEST_CASES = [
|
|
{
|
|
name: 'default',
|
|
seed: '42',
|
|
sliders: {},
|
|
},
|
|
{
|
|
name: 'few-plates-high-land',
|
|
seed: '100',
|
|
sliders: { sP: 8, sLc: 0.6 },
|
|
},
|
|
{
|
|
name: 'many-plates-low-land',
|
|
seed: '200',
|
|
sliders: { sP: 80, sLc: 0.25 },
|
|
},
|
|
{
|
|
name: 'high-erosion',
|
|
seed: '300',
|
|
sliders: { sGl: 0.8, sHEr: 0.8, sTEr: 0.8 },
|
|
},
|
|
{
|
|
name: 'mountainous-sharp-ridges',
|
|
seed: '400',
|
|
sliders: { sNs: 0.4, sRs: 0.8 },
|
|
},
|
|
];
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Helpers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
/** Set a slider's value and dispatch an 'input' event so the app reacts. */
|
|
async function setSlider(page, id, value) {
|
|
await page.evaluate(({ id, value }) => {
|
|
const el = document.getElementById(id);
|
|
if (!el) throw new Error(`Slider #${id} not found`);
|
|
el.value = value;
|
|
el.dispatchEvent(new Event('input', { bubbles: true }));
|
|
}, { id, value: String(value) });
|
|
}
|
|
|
|
/**
|
|
* Install a one-shot listener for 'generate-done' on #generate BEFORE
|
|
* clicking the button, and return a promise that resolves when it fires.
|
|
* Call this, store the promise, click the button, then await the promise.
|
|
*/
|
|
function installGenerationWaiter(page, timeoutMs = 120_000) {
|
|
// page.evaluate returns a promise that resolves when the inner promise does
|
|
return page.evaluate((timeout) => {
|
|
return new Promise((resolve, reject) => {
|
|
const btn = document.getElementById('generate');
|
|
const timer = setTimeout(() => reject(new Error('Generation timed out')), timeout);
|
|
btn.addEventListener('generate-done', () => { clearTimeout(timer); resolve(); }, { once: true });
|
|
});
|
|
}, timeoutMs);
|
|
}
|
|
|
|
/** Rotate the globe by dragging horizontally (yaw) and/or vertically (pitch). */
|
|
async function rotateGlobe(page, yawRadians, pitchRadians = 0) {
|
|
await page.evaluate(({ yaw, pitch }) => {
|
|
const canvas = document.getElementById('canvas');
|
|
const w = canvas.clientWidth;
|
|
const h = canvas.clientHeight;
|
|
const cx = w / 2;
|
|
const cy = h / 2;
|
|
// OrbitControls maps 2*PI rotation to a full canvas-width/height drag.
|
|
const dx = (yaw / (2 * Math.PI)) * w;
|
|
const dy = (pitch / (Math.PI)) * h;
|
|
|
|
const pointerDown = new PointerEvent('pointerdown', {
|
|
clientX: cx, clientY: cy, button: 0, bubbles: true, pointerId: 1,
|
|
});
|
|
const pointerMove = new PointerEvent('pointermove', {
|
|
clientX: cx - dx, clientY: cy - dy, button: 0, bubbles: true, pointerId: 1,
|
|
});
|
|
const pointerUp = new PointerEvent('pointerup', {
|
|
clientX: cx - dx, clientY: cy - dy, button: 0, bubbles: true, pointerId: 1,
|
|
});
|
|
|
|
canvas.dispatchEvent(pointerDown);
|
|
canvas.dispatchEvent(pointerMove);
|
|
canvas.dispatchEvent(pointerUp);
|
|
}, { yaw: yawRadians, pitch: pitchRadians });
|
|
|
|
// Let the render loop catch up.
|
|
await new Promise((r) => setTimeout(r, 1500));
|
|
}
|
|
|
|
/** Take a screenshot of the canvas element. */
|
|
async function screenshotCanvas(page, filePath) {
|
|
const canvas = await page.$('#canvas');
|
|
if (!canvas) throw new Error('Canvas not found');
|
|
await canvas.screenshot({ path: filePath });
|
|
console.log(` Saved: ${path.relative(PROJECT_ROOT, filePath)}`);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Main
|
|
// ---------------------------------------------------------------------------
|
|
async function main() {
|
|
const { server, port } = await startServer();
|
|
const baseUrl = `http://127.0.0.1:${port}`;
|
|
|
|
const browser = await puppeteer.launch({
|
|
headless: true,
|
|
args: [
|
|
'--no-sandbox',
|
|
'--disable-setuid-sandbox',
|
|
'--enable-webgl',
|
|
'--use-gl=angle',
|
|
'--use-angle=swiftshader-webgl',
|
|
'--enable-unsafe-swiftshader',
|
|
],
|
|
});
|
|
|
|
try {
|
|
for (const tc of TEST_CASES) {
|
|
console.log(`\n=== Test case: ${tc.name} (seed ${tc.seed}) ===`);
|
|
let page;
|
|
try {
|
|
page = await browser.newPage();
|
|
await page.setViewport({ width: 1200, height: 900 });
|
|
|
|
// Suppress dialogs / permission prompts
|
|
page.on('dialog', (d) => d.dismiss());
|
|
|
|
// Forward page console and errors for debugging
|
|
page.on('console', (msg) => {
|
|
if (msg.type() === 'error') console.log(` [PAGE ERROR] ${msg.text()}`);
|
|
});
|
|
page.on('pageerror', (err) => console.log(` [PAGE EXCEPTION] ${err.message}`));
|
|
|
|
// Navigate and wait for initial load
|
|
await page.goto(baseUrl, { waitUntil: 'domcontentloaded', timeout: 60_000 });
|
|
// Wait for ES modules and Three.js to initialize
|
|
await new Promise((r) => setTimeout(r, 2000));
|
|
|
|
// Close any overlay that may be showing (tutorial / what's new)
|
|
await page.evaluate(() => {
|
|
for (const id of ['tutorialOverlay', 'whatsNewOverlay']) {
|
|
const el = document.getElementById(id);
|
|
if (el) el.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Set detail slider low for fast iteration
|
|
await setSlider(page, 'sN', DETAIL_SLIDER_VALUE);
|
|
|
|
// Set any custom sliders for this test case
|
|
for (const [id, val] of Object.entries(tc.sliders)) {
|
|
await setSlider(page, id, val);
|
|
}
|
|
|
|
// Intercept the Web Worker postMessage to inject our fixed seed.
|
|
// The generate() function passes seed as `undefined` for fresh builds,
|
|
// and the worker fills it with Math.random(). We patch postMessage so
|
|
// the next 'generate' command carries our chosen seed instead.
|
|
await page.evaluate((seed) => {
|
|
const origPost = Worker.prototype.postMessage;
|
|
Worker.prototype.postMessage = function(msg, ...rest) {
|
|
if (msg && msg.cmd === 'generate' && msg.seed === undefined) {
|
|
msg.seed = Number(seed);
|
|
}
|
|
return origPost.call(this, msg, ...rest);
|
|
};
|
|
}, tc.seed);
|
|
|
|
// Install the completion listener BEFORE clicking, then click, then await.
|
|
const t0 = performance.now();
|
|
const genDone = installGenerationWaiter(page, 120_000);
|
|
// Small delay so the evaluate above has time to register the listener
|
|
await new Promise((r) => setTimeout(r, 100));
|
|
await page.click('#generate');
|
|
|
|
// Wait for generation to finish
|
|
await genDone;
|
|
|
|
const elapsed = ((performance.now() - t0) / 1000).toFixed(1);
|
|
console.log(` Generation completed in ${elapsed}s`);
|
|
|
|
// Let rendering settle
|
|
await new Promise((r) => setTimeout(r, 1000));
|
|
|
|
// Extract terrain metrics scorecard
|
|
const metrics = await page.evaluate(() => window.__terrainMetrics);
|
|
if (metrics) {
|
|
const metricsPath = path.join(SCREENSHOT_DIR, `seed-${tc.seed}_${tc.name}_metrics.json`);
|
|
fs.writeFileSync(metricsPath, JSON.stringify(metrics, null, 2));
|
|
console.log(` Metrics: ${path.relative(PROJECT_ROOT, metricsPath)}`);
|
|
if (metrics._error) console.warn(` Metrics error: ${metrics._error}`);
|
|
} else {
|
|
console.warn(' No terrain metrics available');
|
|
}
|
|
|
|
// Collapse the side panel to maximize canvas area
|
|
await page.click('#sidebarToggle');
|
|
// Let the panel animate closed and Three.js resize
|
|
await new Promise((r) => setTimeout(r, 800));
|
|
|
|
// Take globe screenshots covering the full planet:
|
|
// 4 equatorial rotations (0°, 90°, 180°, 270°) + north pole + south pole
|
|
const base = `seed-${tc.seed}_${tc.name}`;
|
|
|
|
// Equatorial views — rotate around Y axis
|
|
for (let i = 0; i < 4; i++) {
|
|
if (i > 0) await rotateGlobe(page, Math.PI / 2, 0);
|
|
await screenshotCanvas(page, path.join(SCREENSHOT_DIR, `${base}_eq-${i * 90}.png`));
|
|
}
|
|
|
|
// North pole — tilt camera up
|
|
await rotateGlobe(page, 0, -Math.PI / 2.2);
|
|
await screenshotCanvas(page, path.join(SCREENSHOT_DIR, `${base}_north-pole.png`));
|
|
|
|
// South pole — tilt camera down (reset first, then go down)
|
|
await rotateGlobe(page, 0, Math.PI / 1.1);
|
|
await screenshotCanvas(page, path.join(SCREENSHOT_DIR, `${base}_south-pole.png`));
|
|
} catch (err) {
|
|
console.error(` FAILED: ${err.message}`);
|
|
} finally {
|
|
if (page) await page.close().catch(() => {});
|
|
}
|
|
}
|
|
} finally {
|
|
await browser.close();
|
|
server.close();
|
|
console.log('\nDone. Screenshots saved to tuning/screenshots/');
|
|
}
|
|
}
|
|
|
|
main().catch((err) => {
|
|
console.error(err);
|
|
process.exit(1);
|
|
});
|