# 🖼️ Asset Images & Models Checklist

## Struktur Asset yang Diperlukan

Pastikan file-file berikut sudah ada di folder yang sesuai:

```
assets/
├── images/
│   ├── gunung_lemongan.jpg
│   ├── gunung_semeru.jpg
│   ├── pantai_watu_godeg.jpg
│   ├── pantai_watu_pecak.jpg
│   ├── puncak_b29.jpg
│   ├── ranu_kumbolo.jpg
│   ├── ranu_pani.jpg
│   └── ranu_regulo.jpg
│
└── models/
    ├── gunung_lemongan.glb
    ├── gunung_semeru.glb
    ├── pantai_watu_godeg.glb
    ├── pantai_watu_pecak.glb
    ├── puncak_b29.glb
    ├── ranu_kumbolo.glb
    ├── ranu_pani.glb
    └── ranu_regulo.glb
```

---

## 📸 Spesifikasi Gambar

### Rekomendasi Format Gambar
- **Format**: JPEG atau PNG
- **Ukuran**: 1920x1080px (landscape)
- **Aspect Ratio**: 16:9 atau 4:3
- **Kompresi**: Optimized (< 500KB per file)
- **Color Space**: sRGB

### Daftar Gambar yang Dibutuhkan

| No | Nama File | Destinasi | Ukuran Disarankan |
|----|-----------|-----------|-------------------|
| 1 | gunung_lemongan.jpg | Gunung Lemongan | 1920x1080 |
| 2 | gunung_semeru.jpg | Gunung Semeru | 1920x1080 |
| 3 | pantai_watu_godeg.jpg | Pantai Watu Godeg | 1920x1080 |
| 4 | pantai_watu_pecak.jpg | Pantai Watu Pecak | 1920x1080 |
| 5 | puncak_b29.jpg | Puncak B29 | 1920x1080 |
| 6 | ranu_kumbolo.jpg | Ranu Kumbolo | 1920x1080 |
| 7 | ranu_pani.jpg | Ranu Pani | 1920x1080 |
| 8 | ranu_regulo.jpg | Ranu Regulo | 1920x1080 |

---

## 🎬 Model 3D (.glb files)

### Format GLB (GLTF Binary)
- **Format**: .glb (binary GLTF)
- **Ukuran**: Optimal < 10MB per file
- **Kompresi**: Gunakan Draco compression
- **Polygon Count**: Optimal < 100k triangles

### Daftar Model yang Dibutuhkan

| No | Nama File | Destinasi | Status |
|----|-----------|-----------|--------|
| 1 | gunung_lemongan.glb | Gunung Lemongan | Perlu dibuat |
| 2 | gunung_semeru.glb | Gunung Semeru | Perlu dibuat |
| 3 | pantai_watu_godeg.glb | Pantai Watu Godeg | Perlu dibuat |
| 4 | pantai_watu_pecak.glb | Pantai Watu Pecak | Perlu dibuat |
| 5 | puncak_b29.glb | Puncak B29 | Perlu dibuat |
| 6 | ranu_kumbolo.glb | Ranu Kumbolo | Perlu dibuat |
| 7 | ranu_pani.glb | Ranu Pani | Perlu dibuat |
| 8 | ranu_regulo.glb | Ranu Regulo | Perlu dibuat |

---

## 🛠️ Tools untuk Membuat Asset

### Untuk Gambar:
- **Photoshop** / **GIMP**: Edit dan compress
- **TinyPNG**: Kompresi gambar online
- **ImageOptim**: Batch optimization
- **Krita**: Design landscape images

### Untuk Model 3D:
- **Blender**: Model dan convert ke GLB
- **Maya**: Professional 3D modeling
- **SketchUp**: Modeling landscape/arsitektur
- **Sketchfab**: Download model 3D siap pakai

---

## 📝 Pubspec.yaml Configuration

Pastikan `pubspec.yaml` sudah konfigurasi assets:

```yaml
flutter:
  assets:
    - assets/
    - assets/images/
    - assets/models/
    - assets/images/gunung_lemongan.jpg
    - assets/images/gunung_semeru.jpg
    - assets/images/pantai_watu_godeg.jpg
    - assets/images/pantai_watu_pecak.jpg
    - assets/images/puncak_b29.jpg
    - assets/images/ranu_kumbolo.jpg
    - assets/images/ranu_pani.jpg
    - assets/images/ranu_regulo.jpg
    - assets/models/gunung_lemongan.glb
    - assets/models/gunung_semeru.glb
    - assets/models/pantai_watu_godeg.glb
    - assets/models/pantai_watu_pecak.glb
    - assets/models/puncak_b29.glb
    - assets/models/ranu_kumbolo.glb
    - assets/models/ranu_pani.glb
    - assets/models/ranu_regulo.glb
```

---

## ✅ Checklist Setup Assets

### Sebelum Run Aplikasi:

- [ ] Folder `assets/images/` ada dan kosong/berisi placeholder
- [ ] Folder `assets/models/` ada dan kosong/berisi placeholder
- [ ] Minimal 1 gambar test di `assets/images/`
- [ ] `pubspec.yaml` sudah update dengan asset paths
- [ ] Run `flutter pub get` setelah update pubspec
- [ ] No flutter warnings tentang missing assets

### Saat Testing Awal:

- [ ] Test dengan placeholder images (gradient)
- [ ] Verify card fallback image bekerja
- [ ] Verify error handling saat image tidak ada
- [ ] Verify model path ditampilkan di detail

### Sebelum Production:

- [ ] Semua 8 gambar sudah ada dan optimized
- [ ] Semua 8 model GLB sudah ada
- [ ] Image resolution konsisten
- [ ] File size total < 50MB
- [ ] No missing asset warnings
- [ ] Test di device fisik minimal 2 ukuran layar

---

## 📊 Image Optimization Tips

### Untuk Landscape Photos:
1. **Crop ke 16:9 aspect ratio**
2. **Resize ke 1920x1080**
3. **Compress dengan JPEG quality 80-85**
4. **Final size target: 200-300KB**

### Batch Processing:
```bash
# Menggunakan ImageMagick
mogrify -resize 1920x1080 -quality 85 *.jpg
```

### Online Compression:
- TinyPNG: https://tinypng.com/
- TinyJPG: https://tinyjpg.com/
- ImageOptim: https://imageoptim.com/

---

## 🎯 Model 3D Conversion

### Dari Blender ke GLB:
1. Open model di Blender
2. **File → Export As → glTF Binary (.glb)**
3. Settings:
   - Format: glTF Binary
   - Include: All data
   - Draco: Enable compression
4. Save di `assets/models/`

### File Size Target:
- Gunung model: 5-8MB
- Lake model: 3-5MB
- Beach model: 4-6MB

---

## 🔄 Placeholder Strategy

Jika asset belum ready, gunakan placeholder:

### Gambar Placeholder:
```dart
Container(
  color: Color(0xFF1F8F5F),
  child: Icon(
    Icons.landscape,
    color: Colors.white,
    size: 100,
  ),
)
```

### Model Placeholder:
```dart
Text('Model: assets/models/gunung_semeru.glb')
```

---

## 📱 Testing dengan Placeholder

Sebelum asset final, test dengan:

1. **Gradient Background** sebagai gambar
2. **Icon landscape** sebagai fallback
3. **Text string** untuk model path
4. **Fixed data** tanpa image loading

---

## 🚀 Deployment Checklist

- [ ] Semua asset di-optimize
- [ ] File size total acceptable
- [ ] Load time < 2 detik
- [ ] No memory leaks
- [ ] Image caching working
- [ ] Model loading smooth
- [ ] Error states handled
- [ ] Device storage sufficient

---

## 💡 Pro Tips

1. **Gunakan CDN atau cloud storage** untuk model besar
2. **Implement lazy loading** untuk images
3. **Cache gambar locally** setelah first load
4. **Monitor bundle size** di APK/AAB
5. **Test pada slow network** (3G/4G)

---

## 📞 Resource Links

### Image Compression:
- TinyPNG: https://tinypng.com/
- ImageMagick: https://imagemagick.org/

### 3D Model Creation:
- Blender: https://www.blender.org/
- Sketchfab: https://sketchfab.com/

### GLB Validation:
- Babylon.js Sandbox: https://sandbox.babylonjs.com/
- Three.js Editor: https://threejs.org/editor/

---

**Status**: 📋 Checklist Ready  
**Last Updated**: 2026-05-16