4379b0b955
- Added a new modelsProxyRouter to handle requests for optimized 3D character models. - Introduced modelsProxyService to manage GLB file optimization using gltf-transform with Draco compression. - Updated app.js to include the new modelsProxyRouter for API access. - Enhanced .gitignore to exclude model cache files. - Added scripts for optimizing GLB models and updated README with optimization instructions. - Integrated DRACOLoader in Character3D.vue for loading compressed models. - Updated FamilyView.vue to streamline character rendering logic.
112 lines
3.4 KiB
JavaScript
112 lines
3.4 KiB
JavaScript
/**
|
|
* Model-Proxy-Service: Lädt GLB-Dateien, komprimiert sie mit gltf-transform (Draco + Textur-Optimierung)
|
|
* und legt sie im Datei-Cache ab. Weitere Requests werden aus dem Cache bedient.
|
|
*/
|
|
|
|
import fs from 'fs';
|
|
import path from 'path';
|
|
import { fileURLToPath } from 'url';
|
|
import { spawn } from 'child_process';
|
|
|
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
const BACKEND_DIR = path.join(__dirname, '..');
|
|
const PROJECT_ROOT = path.join(BACKEND_DIR, '..');
|
|
const SOURCE_DIR = path.join(PROJECT_ROOT, 'frontend', 'public', 'models', '3d', 'falukant', 'characters');
|
|
const CACHE_DIR = path.join(BACKEND_DIR, 'data', 'model-cache');
|
|
const CLI_PATH = path.join(BACKEND_DIR, 'node_modules', '.bin', 'gltf-transform');
|
|
|
|
/** Erlaubte Dateinamen (nur [a-z0-9_.-]+.glb) */
|
|
const FILENAME_RE = /^[a-z0-9_.-]+\.glb$/i;
|
|
|
|
/** Laufende Optimierungen pro Dateiname → Promise<string> (Cache-Pfad) */
|
|
const pending = new Map();
|
|
|
|
/**
|
|
* Stellt sicher, dass der Cache-Ordner existiert.
|
|
*/
|
|
function ensureCacheDir() {
|
|
if (!fs.existsSync(CACHE_DIR)) {
|
|
fs.mkdirSync(CACHE_DIR, { recursive: true });
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Prüft, ob die Cache-Datei gültig ist (existiert und ist nicht älter als die Quelle).
|
|
* @param {string} sourcePath
|
|
* @param {string} cachePath
|
|
* @returns {boolean}
|
|
*/
|
|
function isCacheValid(sourcePath, cachePath) {
|
|
if (!fs.existsSync(cachePath)) return false;
|
|
if (!fs.existsSync(sourcePath)) return false;
|
|
const sourceStat = fs.statSync(sourcePath);
|
|
const cacheStat = fs.statSync(cachePath);
|
|
return cacheStat.mtimeMs >= sourceStat.mtimeMs;
|
|
}
|
|
|
|
/**
|
|
* Führt gltf-transform optimize aus (Draco + texture-size 1024).
|
|
* @param {string} inputPath
|
|
* @param {string} outputPath
|
|
* @returns {Promise<void>}
|
|
*/
|
|
function runOptimize(inputPath, outputPath) {
|
|
return new Promise((resolve, reject) => {
|
|
const child = spawn(
|
|
'node',
|
|
[CLI_PATH, 'optimize', inputPath, outputPath, '--compress', 'draco', '--texture-size', '1024'],
|
|
{ cwd: BACKEND_DIR, stdio: ['ignore', 'pipe', 'pipe'] }
|
|
);
|
|
let stderr = '';
|
|
child.stderr?.on('data', (d) => { stderr += d.toString(); });
|
|
child.on('close', (code) => {
|
|
if (code === 0) resolve();
|
|
else reject(new Error(`gltf-transform exit ${code}: ${stderr}`));
|
|
});
|
|
child.on('error', reject);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Liefert den Pfad zur optimierten (gecachten) GLB-Datei.
|
|
* Erstellt die optimierte Datei per gltf-transform, falls nicht (gültig) gecacht.
|
|
*
|
|
* @param {string} filename - z.B. "male_child.glb"
|
|
* @returns {Promise<string>} Absoluter Pfad zur optimierten Datei (Cache)
|
|
* @throws {Error} Bei ungültigem Dateinamen oder fehlender Quelldatei
|
|
*/
|
|
export async function getOptimizedModelPath(filename) {
|
|
if (!FILENAME_RE.test(filename)) {
|
|
throw new Error(`Invalid model filename: ${filename}`);
|
|
}
|
|
|
|
const sourcePath = path.join(SOURCE_DIR, filename);
|
|
const cacheFilename = filename.replace(/\.glb$/, '_opt.glb');
|
|
const cachePath = path.join(CACHE_DIR, cacheFilename);
|
|
|
|
if (!fs.existsSync(sourcePath)) {
|
|
throw new Error(`Source model not found: ${filename}`);
|
|
}
|
|
|
|
ensureCacheDir();
|
|
|
|
if (isCacheValid(sourcePath, cachePath)) {
|
|
return cachePath;
|
|
}
|
|
|
|
let promise = pending.get(filename);
|
|
if (!promise) {
|
|
promise = (async () => {
|
|
try {
|
|
await runOptimize(sourcePath, cachePath);
|
|
return cachePath;
|
|
} finally {
|
|
pending.delete(filename);
|
|
}
|
|
})();
|
|
pending.set(filename, promise);
|
|
}
|
|
|
|
return promise;
|
|
}
|