Performance Optimization Guide

Panduan lengkap untuk mengoptimalkan performa Hand Gesture Control, terutama untuk Electron.

🐌 Kenapa Lag/Patah-patah?

Penyebab Utama:

Tidak Ada GPU - Rendering tanpa GPU sangat lambat
GPU Disabled - Electron disable GPU untuk fix error
Resolusi Terlalu Tinggi - 1280x720 terlalu berat
Terlalu Banyak Deteksi - 2 tangan + visualization penuh
CPU Lemah - Prosesor tidak cukup kuat

⚡ Solusi Cepat

1. Enable GPU (Recommended)

Edit electron/main.js, comment out baris ini:

// app.disableHardwareAcceleration();  // ← Comment ini!

Restart Electron:

npm run electron

Jika masih error GPU, baru uncomment lagi.

2. Gunakan Mode Performa Rendah

Edit src/js/config/electronConfig.js, ganti mode:

// Ganti dari MEDIUM ke LOW atau ULTRA_LOW
export const electronOptimizedConfig = PERFORMANCE_MODES.LOW;  // atau ULTRA_LOW

Rebuild:

npm run electron

3. Turunkan Resolusi Manual

Edit src/js/config/systemConfig.js:

camera: {
  resolution: {
    width: 320,   // Sangat rendah untuk PC lemah
    height: 240
  },
  fps: 15         // FPS lebih rendah
}

4. Disable Visualization

Klik tombol "Toggle Visualization" di UI, atau edit config:

visualization: {
  enabled: false  // Matikan semua visualization
}

🎯 Performance Modes

ULTRA_LOW (Untuk PC Sangat Lemah)

Resolution: 320x240
FPS: 15
Max Hands: 1
Visualization: Minimal
Best for: PC tanpa GPU, CPU lemah

LOW (Untuk PC Lemah)

Resolution: 640x480
FPS: 20
Max Hands: 1
Visualization: Basic
Best for: PC dengan GPU lemah

MEDIUM (Default Electron)

Resolution: 640x480
FPS: 30
Max Hands: 1
Visualization: Standard
Best for: PC mid-range

HIGH (Untuk PC Kuat)

Resolution: 1280x720
FPS: 30
Max Hands: 2
Visualization: Full
Best for: PC dengan GPU bagus

🔧 Cara Ganti Mode

Method 1: Edit Config File

Buka src/js/config/electronConfig.js

Ganti baris ini:

export const electronOptimizedConfig = PERFORMANCE_MODES.MEDIUM;

Menjadi:

export const electronOptimizedConfig = PERFORMANCE_MODES.LOW;
// atau ULTRA_LOW untuk PC sangat lemah

Rebuild: npm run electron

Method 2: Edit System Config Langsung

Buka src/js/config/systemConfig.js dan edit:

camera: {
  resolution: {
    width: 320,    // Turunkan ini
    height: 240    // Dan ini
  },
  fps: 15          // Turunkan FPS
},

mediapipe: {
  maxNumHands: 1   // Hanya 1 tangan
},

visualization: {
  enabled: false,  // Matikan visualization
  showConnections: false,
  showBoundingBox: false
}

🚀 Optimasi Tambahan

1. Close Other Apps

Tutup browser dengan banyak tab
Tutup aplikasi berat lainnya
Check Task Manager

2. Reduce Gesture Detectors

Edit src/js/main.js, comment detector yang tidak perlu:

initializeGestureDetectors() {
  // Hanya aktifkan yang perlu
  const swipeDetector = new SwipeDetector(...);
  this.gestureEngine.registerDetector('swipe', swipeDetector);
  
  // Comment yang tidak perlu
  // const pinchDetector = new PinchDetector(...);
  // const pushDetector = new PushDetector(...);
  // const staticDetector = new StaticGestureDetector(...);
}

3. Increase Frame Skip

Edit src/js/config/systemConfig.js:

performance: {
  targetFPS: 15,              // Lower FPS
  frameSkipThreshold: 100,    // Skip more frames
  historyBufferSize: 5        // Smaller buffer
}

4. Disable Smoothing

Edit src/js/config/gestureConfig.js:

swipe: {
  smoothingWindow: 1,  // No smoothing
  debounceMs: 500      // Longer debounce
}

📊 Benchmark Your System

Jalankan app dan check FPS counter:

FPS > 25: Good, bisa pakai MEDIUM/HIGH
FPS 15-25: Okay, pakai LOW
FPS < 15: Bad, pakai ULTRA_LOW

🎮 GPU vs No GPU

Dengan GPU:

✅ Smooth 30-60 FPS
✅ High resolution (1280x720)
✅ Full visualization
✅ 2 hands detection

Tanpa GPU (CPU only):

⚠️ Lag/patah-patah
⚠️ Harus pakai low resolution
⚠️ Disable visualization
⚠️ 1 hand only
⚠️ Lower FPS (15-20)

🔍 Check GPU Status

Windows:

Buka Task Manager (Ctrl+Shift+Esc)
Tab "Performance"
Lihat "GPU" - jika ada, berarti punya GPU
Check usage saat run app

Check di Electron:

Buka DevTools (F12)
Console tab
Ketik: chrome://gpu
Lihat GPU info

💡 Rekomendasi Berdasarkan Hardware

PC Tanpa GPU / GPU Lemah:

// electron/main.js
app.disableHardwareAcceleration();  // Keep disabled

// electronConfig.js
export const electronOptimizedConfig = PERFORMANCE_MODES.ULTRA_LOW;

PC Dengan GPU Integrated (Intel HD):

// electron/main.js
// app.disableHardwareAcceleration();  // Comment out

// electronConfig.js
export const electronOptimizedConfig = PERFORMANCE_MODES.LOW;

PC Dengan GPU Dedicated (NVIDIA/AMD):

// electron/main.js
// app.disableHardwareAcceleration();  // Comment out

// electronConfig.js
export const electronOptimizedConfig = PERFORMANCE_MODES.MEDIUM;
// atau HIGH jika GPU kuat

🆘 Masih Lag?

Last Resort Options:

Gunakan Web Mode Instead
```
npm start
```
Web mode biasanya lebih smooth karena browser optimize GPU better.
Reduce Everything
- Resolution: 320x240
- FPS: 10
- Visualization: OFF
- Max Hands: 1
- Only 1 gesture detector
Upgrade Hardware
- Add GPU
- Upgrade CPU
- Add RAM

📝 Quick Settings Template

Ultra Low (Copy-paste ke systemConfig.js):

camera: { resolution: { width: 320, height: 240 }, fps: 15 },
mediapipe: { maxNumHands: 1, minDetectionConfidence: 0.7 },
performance: { targetFPS: 15, frameSkipThreshold: 100 },
visualization: { enabled: false }

Low:

camera: { resolution: { width: 640, height: 480 }, fps: 20 },
mediapipe: { maxNumHands: 1, minDetectionConfidence: 0.6 },
performance: { targetFPS: 20, frameSkipThreshold: 60 },
visualization: { enabled: true, showConnections: false }

Medium:

camera: { resolution: { width: 640, height: 480 }, fps: 30 },
mediapipe: { maxNumHands: 1, minDetectionConfidence: 0.5 },
performance: { targetFPS: 30, frameSkipThreshold: 40 },
visualization: { enabled: true, showConnections: false }

🎯 Summary

Untuk PC Tanpa GPU atau Lemah:

Enable GPU di electron/main.js (comment disable line)
Gunakan ULTRA_LOW atau LOW mode
Disable visualization
Atau pakai web mode (npm start)

Untuk PC Dengan GPU:

Enable GPU (comment disable line)
Gunakan MEDIUM atau HIGH mode
Enjoy smooth performance!

Quick Fix Command:

# 1. Edit electron/main.js - comment GPU disable
# 2. Edit electronConfig.js - ganti ke LOW/ULTRA_LOW
# 3. Rebuild
npm run electron

FilesExpand file tree

PERFORMANCE_GUIDE.md

Latest commit

History