我們很榮幸能提供 PixiJS v8 Beta 版本，讓您搶先體驗未來 2D 網路繪圖技術。雖然這個 Beta 版還未定稿，但已具備了驚人的效能提升和功能，我們迫不及待地想讓您親身體驗！
在過去的十年間（沒錯，您沒看錯，十年！）我們對 PixiJS 引擎進行了許多重要的改變。然而，這個新版本所帶來的進展絕對是我們歷來最重大的！
促使我們重新設計 v8 中程式碼庫和渲染管線的兩個主要因素：
1. 😍 擁抱 WebGPU
新興的 WebGPU 提供了大幅超越其前身 WebGL 的效能。它推動網路運算和繪圖進入了一個新的時代，提供了更有效且穩健的 API。很快地，它將成為網路上大多數 GPU 驅動內容的渲染首選方式。
這種轉變讓人回想起 PixiJS 最初推出時的情形。當時，WebGL 是一項新技術，僅在少數桌上型電腦瀏覽器中可用，而 Canvas 則是無所不在。PixiJS 的獨特功能在於它能夠先嘗試使用 WebGL 進行渲染，然後再備用 Plan B，亦即 Canvas。這種做法讓 PixiJS 內容在 WebGL 普及後能立即受益。時光快轉到今天，WebGL 現在已在 95% 的瀏覽器中可用。
歷史在 WebGPU 上重演，目前僅在少數桌上型電腦瀏覽器中受支援，並且只占市場的約 27%。然而，它獲得普遍支援只是時間早晚的問題。PixiJS 旨在執行相同的備用策略，讓您始終能夠利用最佳技術，而無需重新撰寫程式碼。這正是第 8 版所達成的目標，並且將為未來十年內我們所製作的所有內容提供未來保障 :D
2. 🚀 提升效能
PixiJS 一直是速度和高性能繪圖的代名詞。在 v8 中，我們重新檢視了我們的架構，以最佳化靜態和動態渲染。儘管 v7 很快，但它運作起來有點像是一個「幼稚」的渲染器。
v7 的方法：
- 遍歷場景圖並確保所有的轉換都是正確的
- 第二次遍歷場景圖並執行下列動作
- 建立批次以進行渲染
- 將資料上傳到 GPU
- 將批次繪製到螢幕上。
v8 方法
- 僅更新更動的項目轉換
- 遍歷場景圖形並建構一組指令。
- 一次將所有場景資料上傳至 GPU。
- 根據指令執行渲染。
此迴圈有三個關鍵變動，可提升效能。
- 首先，我們僅更新已更動的元素。若沒有元素移動，則不會執行任何程式碼，因此能最佳化運算負擔。
- 其次，若在後續的畫面中場景圖形保持不變，我們會重複使用現有的渲染指令。這樣可避免在每個畫面都重新建構這些指令所產生的負擔。
- 第三，若場景中沒有元素改變位置，則會完全略過資料上傳步驟（步驟 3），進而節省頻寬並進一步減少運算工作。
這些改進的淨效應為何？在各種使用案例中可大幅提升效能
CPU = cpu 渲染單一畫面的花費時間，GPU = gpu 渲染單一畫面的花費時間
| Bunny 情況 | V7 CPU | V8 CPU | CPU 差異 | V7 GPU | V8 GPU | GPU 差異 |
|---|---|---|---|---|---|---|
| 10 萬個精靈全部移動 | 約 50 毫秒 | 約 15 毫秒 | 233% | 約 9 毫秒 | 約 2 毫秒 | 350% |
| 10 萬個精靈未移動 | 約 21 毫秒 | 約 0.12 毫秒 | 17417% | 約 9 毫秒 | 約 0.5 毫秒 | 1700% |
| 10 萬個精靈（變更場景結構） | 約 50 毫秒 | 約 24 毫秒 | 108% | 約 9 毫秒 | 約 2 毫秒 | 350% |
這些基準測試數字是基於此 Bunnymark 測試，您可以自行嘗試！
請試玩並調整網址中的參數，以變更兔子數量。我很好奇你們會得到什麼數字！
最棒的是，這些改進適用於 WebGPU和 WebGL 渲染器。就像 PixiJs 的所有精彩功能，這一切都會自動發生：D
稍等一下，還有更多進展！
雖然這項大改造背後的兩個關鍵驅動力是效能和可用性，但我們並未就此打住。我們把握這個機會增強 API，並為引擎引入大量全新功能，這些功能實在太多，無法在單一篇文章中囊括！
請持續關注後續的部落格文章，我們將深入探討這些額外改進和 API 改良，讓您能創造更卓越的專案。如欲完整了解新增功能，請不要錯過版本說明。
PixiJS v8 保留了大部分熟悉的 API，儘管它經歷了重大的內部更新，這是一個重要的注意事項。我們的變動旨在讓 PixiJS 更加強大且易於使用。當您遇到修改時，請放心，v7 方法仍會持續發揮作用，只會看到棄用警告，引導您採用最佳實務。
交給你們了！
隨著我們接近發行候選版本，現在是您深入探討 v8 最佳時機。您在此階段的回饋對於微調我們的引擎至關重要。我們邀請您分享您的想法 ── 好、壞、醜，回報錯誤，甚至貢獻代碼。我們可以齊心將 PixiJS 提升至前所未有的高度。
👇 別再等待，立即深入探討！探索 GitHub 上的 PixiJS v8 程式庫
安裝步驟：
您可以使用 npm 安裝測試版，如下所示
npm install pixi.js@prerelease-v8
接著，您可以使用新的 autoDetectRenderer 功能，建立最適合的渲染程式
import { autoDetectRenderer } from "pixi.js";
async function init()
{
const renderer = await autoDetectRenderer({
// any settings
}); // will return a WebGL or WebGPU renderer
}
立即開始親自體驗 PixiJS v8 Beta，和我們一起塑造 2D 網頁圖形技術的未來！🎉
請持續關注！
「若要掌握最新動態，我們邀請您在社群媒體上追蹤 Doormat23 和 PixiJS，我們近期將在社群媒體上揭曉更多令人興奮的更新消息。或者，您也可以加入我們在 Discord 中活躍的社群，參與直接互動和即時對話。