WPF 以圖片序列實現 3D 模型旋轉的效能優化實戰

專案需在 WPF 中呈現 3D 戶型圖旋轉效果。因即時 3D 渲染效能不足，改用預先渲染的 360 張圖片序列，透過滑鼠移動切換 Image.Source 模擬旋轉。但直接切換檔案路徑會造成嚴重卡頓，本文記錄優化歷程。

嘗試 1：預載入 byte[] / Stream 陣列

• 400 張 1.27MB JPG（1024×768），理論 508MB，實際佔用 1300MB+
• 首次呈現 35ms，後續 15ms，**但卡頓依舊**

嘗試 2：預載入 ImageSource 陣列

• 記憶體同樣 1300MB+
• 發現關鍵：**ImageSource 若曾被呈現過，再次指派給 Image 速度大幅提升**

實測數據對比

最終解決方案：雙緩衝 + 預熱

1. 啟動時背景執行緒將所有圖片解碼為 BitmapImage 並 Freeze()，存入 List<BitmapImage>。
2. **預熱**：啟動後快速將每張圖指派給一個隱藏的 Image 控制項（或寫入 WriteableBitmap），強制 GPU 上傳紋理。
3. 實際旋轉時，直接從列表取出 BitmapImage 指派給顯示用 Image.Source，無需重新解碼。

關鍵程式碼

// 預載與 Freeze
var images = new List();
foreach (var path in files)
{
    var bmp = new BitmapImage();
    bmp.BeginInit();
    bmp.CacheOption = BitmapCacheOption.OnLoad;
    bmp.UriSource = new Uri(path);
    bmp.EndInit();
    bmp.Freeze(); // 跨執行緒可用
    images.Add(bmp);
}

// 預熱（可在啟動畫面執行）
Task.Run(() => {
    foreach (var img in images) { dummyImage.Source = img; }
});

// 旋轉時切換
mainImage.Source = images[currentIndex];

效能結果

• 記憶體穩定約 1.3GB（可接受）
• 切換幀率穩定 60fps，無卡頓
• 啟動預熱約 2-3 秒（背景執行，不阻塞 UI）

心得

WPF 的影像解碼與 GPU 上傳是主要瓶頸。**預先解碼 + Freeze + 預熱上傳** 是解決大量高解析度圖片序列播放的關鍵。