PixiJS v8 隨著全新 ParticleContainer 的發布，將速度提升到一個新的境界。這個新功能帶來驚人的效能提升，能夠毫不費力地渲染 100K+。如果你有很多元素要呈現在螢幕上，你可以好好享受一下了！
🚀 新的 ParticleContainer 設計
PixiJS v8 的主要差異在於，ParticleContainer 不再處理精靈，它使用輕量級的微粒。雖然微粒與精靈共享許多屬性（例如材質、位置、基準點、縮放、旋轉、透明度和顏色），但微粒剔除了不必要的開銷。結果就是速度，純粹且簡單。
快到什麼程度？來看看我的機器（Macbook Pro M3）
- 精靈 + 容器：200,000 個時為 60fps。
- 微粒 + ParticleContainer：1,000,000 個時為 60fps！
沒錯，那就是螢幕上有一百萬隻兔子，而且說實話，在那個時間點上主要的瓶頸甚至不是渲染，而是彈跳移動背後的邏輯！動手試試，親自看看
重點是，你現在可以用超快速度渲染大量元素，讓 PixiJS v8 成為高效能遊戲或視覺密集專案的完美選擇。而且這比 v7 微粒容器快快了三倍以上！
請查看移轉指南，進一步了解如何將程式碼移轉到新的微粒容器。
速度的秘密：靜態與動態屬性
要充分利用這個效能巨獸，了解靜態與動態屬性至關重要。PixiJS 讓你完全控制哪些屬性會在每一格更新（動態），以及哪些屬性不需要持續更新（靜態）。它們的運作方式如下
- 靜態屬性：一旦設定，除非明確變更，否則它們會保持相同。讓它們保持靜態，可以降低運算負載，亦即更快的渲染。讓它們保持更新是你的責任 :)
- 動態屬性：這些屬性會在每一格重新計算，並無論如何都上傳到 GPU。
預設僅位置具備動態性，但您需要時，可自行設定其他屬性。動態屬性越少，轉譯速度會越快！
PixiJS v8 粒子容器使用方式
我們將透過一個簡單的範例來入門
import { ParticleContainer, Particle, Texture } from 'pixi.js';
// Create a particle container with default options
const container = new ParticleContainer({
// this is the default, but we show it here for clarity
dynamicProperties: {
position: true, // Allow dynamic position changes (default)
scale: false, // Static scale for extra performance
rotation: false, // Static rotation
color: false // Static color
}
});
// Add particles
const texture = Texture.from('path/to/bunny.png');
for (let i = 0; i < 100000; ++i) {
let particle = new Particle({
texture,
x: Math.random() * 800,
y: Math.random() * 600,
});
container.addParticle(particle);
}
// Add container to the Pixi stage
app.stage.addChild(container);
在這個例子中，我們建立一個 ParticleContainer，將屬性設定為靜態，如果可能的話，並產生 100k 個粒子。透過使用共用材質（你好，精靈圖！）來確定所有粒子共享相同的圖形素材，讓轉譯更有效率。
使用 ParticleContainer 的理由
當您需要在螢幕上呈現相當大量的視覺元素時，ParticleContainer 的優勢就能發揮出來，尤其在您要讓這些元素動態移動並進行實際互動時。無論您要建立的是粒子效果、大量角色群，或是抽象藝術裝置，PixiJS v8 都能滿足您的需求。靜態與動態屬性的系統讓您可以仔細控制效能，在靈活性與速度之間取得平衡。
基本上，這是我們在同時容許不同材質（透過精靈圖）的情況下，能做的最快的做法，也能賦予開發人員透過 JS 控制粒子的權限，而無需將動作轉移到 GPU（這可能會更快，但較為複雜，靈活性也較低）。因此，儘管我們選擇稱它們為「粒子」，但它們更像是傳統粒子與經典精靈之間的東西。
這非常適用於重視幀頻與轉譯量的專案，例如遊戲、互動式應用程式，以及大量資料視覺化。透過控制粒子的動態屬性，您可以根據需求最佳化應用程式的效能。
後續步驟
嶄新的 ParticleContainer 為我們帶來革命性的改變，但仍然有可以進步的地方！舉例來說，我們還有空間可以進一步最佳化屬性的靜態上傳（您可能會注意到上述範例在新增小兔子時會變慢，但在達到穩定狀態後就會變快）。我們計畫公開粒子的批次處理方式，讓開發人員能夠新增/移除批次中的屬性，以讓處理速度變得更快，或是增加靈活性與客製化功能。但就目前來說，這個做法是一個絕佳的起點，我們也希望您會喜歡嶄新的 ParticleContainer！
🎉 結論
在大量轉譯的應用上，PixiJS v8 的 ParticleContainer 帶來了革命性的改變。它能夠以極快的速度推送數百萬個粒子，為遊戲開發人員、動畫師和創意程式設計師開創無限的可能。開始體驗，用新的 API 進行實驗，看看您的視覺效果能夠有多快！
準備好展開冒險了嗎？在 PixiJS v8 中體驗嶄新的 ParticleContainer，突破您專案的效能極限！
🌐 保持聯繫
追蹤 Doormat23 和 PixiJS 的社群媒體，取得最新的更新資訊。加入我們在 Discord 的元氣社群，進行即時討論並取得支援。