feat: multi-format 3D viewer with large-file OBJ streaming, Z-up, projection/outline UI

Three.js viewer supporting glb/gltf/obj/fbx/dae/ifc/ply via both server (SSR) and drag&drop (CSR) paths. - Streaming OBJ parser (src/viewer/objStream.ts) for files past the V8 max string length (>~1GB text) that OBJLoader can't handle; indexed geometry, per-vertex color from MTL Kd, float64 recenter baked in. - In-viewer float64 recenter (objRecenter.ts) for huge CAD/survey coordinates (~1e8) so float32 vertex buffers keep precision (no cracked faces). - Z-up right-handed world; Y-up formats rotated on load. - OBJ+MTL+texture drag&drop (LoadingManager URL-modifier maps dropped images). - OrbitControls ground-plane panning (road/rail alignment workflow). - UI: Zoom Fit, perspective/orthographic toggle, feature-edge outline. - DoubleSide for CAD OBJ; PLY mesh + point-cloud support. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-19 13:54:46 +09:00
commit a71790070d
78 changed files with 15921 additions and 0 deletions
@@ -0,0 +1,138 @@
+#!/usr/bin/env node
+/**
+ * tools/prerender.mjs — 360° turntable pre-render → animated WebP placeholder (PLAN P4-3).
+ *
+ * Loads the running viewer (?model=<asset>) in headless Chrome, orbits the
+ * camera one full turn in N steps, screenshots each frame, then assembles the
+ * PNG sequence into an animated WebP via ffmpeg. The result is an SSR
+ * placeholder image that hydrates into the live canvas on load.
+ *
+ * USAGE
+ *   node tools/prerender.mjs --asset /samples/Duck.glb [--frames 36] [--size 512] \
+ *                           [--framerate 20] [--out public/previews/Duck.webp] \
+ *                           [--url http://127.0.0.1:4173]
+ *
+ * Requires: puppeteer-core (installed) + ffmpeg on PATH + the viewer built & served
+ *           (`npm run build && npm run preview`, or `npm run dev`).
+ */
+import puppeteer from 'puppeteer-core';
+import { existsSync, mkdirSync, rmSync } from 'node:fs';
+import { execFileSync } from 'node:child_process';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = resolve(__dirname, '..');
+
+const CHROME_CANDIDATES = [
+  'C:/Program Files/Google/Chrome/Application/chrome.exe',
+  'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe',
+  'C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe',
+];
+function findBrowser() {
+  if (process.env.PUPPETEER_EXECUTABLE_PATH && existsSync(process.env.PUPPETEER_EXECUTABLE_PATH)) {
+    return process.env.PUPPETEER_EXECUTABLE_PATH;
+  }
+  for (const p of CHROME_CANDIDATES) if (existsSync(p)) return p;
+  return null;
+}
+
+function parseArgs(argv) {
+  const a = argv.slice(2);
+  const o = { asset: null, frames: 36, size: 512, framerate: 20, out: null, url: 'http://127.0.0.1:4173' };
+  for (let i = 0; i < a.length; i++) {
+    const k = a[i], v = a[i + 1];
+    if (k === '--asset') { o.asset = v; i++; }
+    else if (k === '--frames') { o.frames = parseInt(v, 10); i++; }
+    else if (k === '--size') { o.size = parseInt(v, 10); i++; }
+    else if (k === '--framerate') { o.framerate = parseInt(v, 10); i++; }
+    else if (k === '--out') { o.out = v; i++; }
+    else if (k === '--url') { o.url = v; i++; }
+    else if (k === '-h' || k === '--help') return { help: true };
+  }
+  if (!o.asset) return { help: true };
+  if (!o.out) {
+    const base = o.asset.split('/').pop().replace(/\.(glb|gltf|obj|fbx|dae|ifc)$/i, '');
+    o.out = 'public/previews/' + base + '.webp';
+  }
+  // Undo MSYS/Git-Bash mangling of leading-slash args (/samples/x.glb -> C:/.../Git/samples/x.glb)
+  o.asset = o.asset.replace(/^.*\/Program Files\/Git\//i, '/');
+  if (!o.asset.startsWith('/')) o.asset = '/' + o.asset;
+  return o;
+}
+
+function ffmpegAvailable() {
+  try { execFileSync('ffmpeg', ['-version'], { stdio: 'ignore' }); return true; }
+  catch { return false; }
+}
+
+async function main() {
+  const opts = parseArgs(process.argv);
+  if (opts.help) {
+    console.error('Usage: node tools/prerender.mjs --asset /samples/Duck.glb [--frames 36] [--size 512] [--framerate 20] [--out public/previews/Duck.webp] [--url URL]');
+    process.exit(opts.asset ? 0 : 1);
+  }
+
+  const exe = findBrowser();
+  if (!exe) { console.error('[prerender] No Chrome/Edge found.'); process.exit(1); }
+  const haveFfmpeg = ffmpegAvailable();
+
+  const baseName = opts.asset.split('/').pop().replace(/\.(glb|gltf|obj|fbx|dae|ifc)$/i, '');
+  const frameDir = resolve(root, '.prerender-frames', baseName);
+  rmSync(frameDir, { recursive: true, force: true });
+  mkdirSync(frameDir, { recursive: true });
+
+  const browser = await puppeteer.launch({
+    executablePath: exe,
+    headless: 'new',
+    args: ['--no-sandbox', '--use-gl=swiftshader', '--enable-webgl', '--ignore-gpu-blocklist'],
+    defaultViewport: { width: opts.size, height: opts.size },
+  });
+  const page = await browser.newPage();
+  page.on('console', (m) => { if (m.type() === 'error') console.error('[page-console]', m.text()); });
+  page.on('pageerror', (e) => console.error('[page-error]', e.message));
+  page.on('requestfailed', (r) => console.error('[req-failed]', r.url(), r.failure()?.errorText));
+  await page.evaluateOnNewDocument(() => {
+    window.__hmwReady = null;
+    window.addEventListener('hmw:ready', (e) => { window.__hmwReady = e.detail; });
+  });
+  await page.goto(opts.url + '?model=' + opts.asset, { waitUntil: 'domcontentloaded', timeout: 30000 });
+  await page.waitForFunction('window.__hmwReady != null', { timeout: 30000 });
+
+  for (let i = 0; i < opts.frames; i++) {
+    const azimuth = (i / opts.frames) * Math.PI * 2;
+    await page.evaluate((az) => window.__viewer && window.__viewer.rotateTo(az), azimuth);
+    const file = resolve(frameDir, 'frame_' + String(i).padStart(3, '0') + '.png');
+    await page.screenshot({ path: file, omitBackground: false });
+  }
+  await browser.close();
+  const { readdirSync } = await import('node:fs');
+  const frameCount = readdirSync(frameDir).filter((f) => f.endsWith('.png')).length;
+  console.log('[prerender] captured ' + frameCount + '/' + opts.frames + ' frames -> ' + frameDir);
+
+  const outAbs = resolve(root, opts.out);
+  mkdirSync(dirname(outAbs), { recursive: true });
+
+  if (!haveFfmpeg) {
+    console.warn('[prerender] ffmpeg not found. Frames left in ' + frameDir);
+    console.warn('[prerender] assemble manually:');
+    console.warn('  ffmpeg -framerate ' + opts.framerate + ' -i ' + frameDir + '/frame_%03d.png -loop 0 ' + outAbs);
+    return;
+  }
+  // Assemble animated WebP. NOTE: libwebp_anim is broken in this ffmpeg build
+  // (outputs 1 frame); -c:v libwebp + -vsync vfr produces correct multi-frame WebP.
+  execFileSync('ffmpeg', [
+    '-y', '-framerate', String(opts.framerate), '-vsync', 'vfr',
+    '-i', resolve(frameDir, 'frame_%03d.png'),
+    '-vf', 'scale=' + opts.size + ':' + opts.size + ':flags=lanczos',
+    '-c:v', 'libwebp', '-loop', '0', '-lossless', '0', '-q:v', '70',
+    outAbs,
+  ], { stdio: 'inherit' });
+  console.log('[prerender] animated WebP -> ' + opts.out);
+  rmSync(frameDir, { recursive: true, force: true });
+}
+
+main().catch((e) => {
+  console.error('[prerender] Fatal: ' + (e && e.stack ? e.stack : e));
+  process.exit(1);
+});