Implement model optimization and caching for 3D characters
- 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.
This commit is contained in:
@@ -28,13 +28,48 @@ Wenn kein spezifisches Modell für den Altersbereich existiert, wird automatisch
|
||||
|
||||
## Dateigröße
|
||||
|
||||
- Empfohlen: < 500KB pro Modell
|
||||
- Maximal: 1MB pro Modell
|
||||
- **Aktuell:** ~14–17 MB pro Modell → lange Ladezeiten
|
||||
- **Empfohlen:** < 500 KB pro Modell
|
||||
- **Maximal:** ~1–2 MB pro Modell (Web, 60 FPS)
|
||||
|
||||
## Optimierung
|
||||
## Optimierung (wichtig für kürzere Ladezeiten)
|
||||
|
||||
Vor dem Hochladen:
|
||||
1. In Blender öffnen
|
||||
2. Decimate Modifier anwenden (falls nötig)
|
||||
3. Texturen komprimieren (WebP, max 1024x1024)
|
||||
4. GLB Export mit Compression aktiviert
|
||||
### Option A: gltf-transform (CLI, Draco + Textur-Optimierung)
|
||||
|
||||
```bash
|
||||
npm install -g @gltf-transform/cli
|
||||
# Pro Modell (Beispiel):
|
||||
gltf-transform optimize male_adult.glb male_adult_opt.glb --compress draco --texture-size 1024
|
||||
```
|
||||
|
||||
Danach optimierte Dateien z. B. als `*_opt.glb` ablegen und im Frontend verwenden.
|
||||
**Hinweis:** Bei Draco-Compression muss im Frontend `DRACOLoader` von Three.js genutzt werden (siehe Three.js-Doku zu `KHR_draco_mesh_compression`).
|
||||
|
||||
### Option B: Blender
|
||||
|
||||
1. Modell in Blender öffnen
|
||||
2. Decimate-Modifier anwenden (Polygonanzahl reduzieren)
|
||||
3. Texturen komprimieren (WebP, max. 1024×1024)
|
||||
4. GLB-Export mit aktivierter Kompression
|
||||
5. Optional: Online-Tools (z. B. [glb.babylonpress.org](https://glb.babylonpress.org)) für Draco-Kompression
|
||||
|
||||
### Option C: Nur Texturen verkleinern (ohne Draco)
|
||||
|
||||
Ohne Draco-Extension reicht oft schon:
|
||||
|
||||
```bash
|
||||
gltf-transform optimize input.glb output.glb --texture-size 1024
|
||||
```
|
||||
|
||||
## Model-Proxy (Backend)
|
||||
|
||||
Das Frontend lädt Modelle über **`GET /api/models/3d/falukant/characters/:filename`**. Ein Backend-Proxy:
|
||||
|
||||
1. Liest die angeforderte `.glb`-Datei aus diesem Verzeichnis.
|
||||
2. Optimiert sie bei Bedarf mit gltf-transform (Draco + Textur 1024).
|
||||
3. Legt das Ergebnis in `backend/data/model-cache/` ab (File-Cache).
|
||||
4. Liefert die optimierte Datei aus und setzt `Cache-Control` für Browser-Caching.
|
||||
|
||||
- **Service:** `backend/services/modelsProxyService.js`
|
||||
- **Router:** `backend/routers/modelsProxyRouter.js`
|
||||
- **Cache:** `backend/data/model-cache/` (wird bei neuerer Quelldatei automatisch neu erzeugt)
|
||||
|
||||
BIN
frontend/public/models/3d/falukant/characters/male_child_opt.glb
Normal file
BIN
frontend/public/models/3d/falukant/characters/male_child_opt.glb
Normal file
Binary file not shown.
Reference in New Issue
Block a user