準備好突破網路的可能性界限！PixiJS v8 已問世，而且將徹底改變遊戲規則。為了慶祝十年來的創新動力，我們已將 PixiJS 加入最新的技術進展，使之更快、更強大，且功能強大到令人難以置信。從將 WebGPU 無縫整合到利用現代 JavaScript 以進行更順暢的開發，PixiJS v8 的目標是賦予您輕鬆打造令人驚豔的網路體驗的能力。這不僅僅是一次更新，它就是當今的 2D 網路圖形未來。快來潛入 PixiJS v8，將你的專案提升到前所未見的境界。讓我們一次完成一個像素（el），讓網路變得更美好。
🚀 革命性的網路圖形：歡迎來到 PixiJS v8
難以置信的是，PixiJS 已成為開放原始碼社群的一部分，長達十年。在這個期間，數位領域已大幅演進，而 PixiJS 也不例外。我們見證了重要的更新，例如轉換為 TypeScript，此外，我們也全面檢修了引擎的主要部分，例如資源加載和 WebGL 整合。
現在，我們很興奮地公開發表 PixiJS v8，這很可能是有史以來我們幅度最大的更新。此版本不僅反覆考量 v7 的缺點（已為我們帶來絕佳的服務），更承認永遠有改進的空間。隨著時間推移，我們都遇到過希望可以調整的程式碼部分。通常，最棒的解決方案和見解僅會在我們退一步檢視問題之後才浮現，這讓我們得以看到更全面的情況。
有了 PixiJS v8，我們的目標是重新檢視並加強 PixiJS 的基礎，簡化其核心，而不仅仅是在程式碼上添加更多層級。
我們的 v8 遠景十分明確：
- 長壽：我們設計 v8 來經得起時間的考驗，我們預期它將持續十年以上，極具相關性和穩健性。
- 與 WebGPU 的創新：擁抱最新的渲染技術，我們已將 WebGPU 無縫整合，它並非作為我們現有 WebGL 渲染器的附加功能，而是作為一個核心模式，確保 PixiJS 在 WebGL 逐漸淘汰後仍能保持領先地位。
- 利用現代 JavaScript：JavaScript 的進展已經大幅簡化了開發。我們已利用物件解構和選項等功能使 v8 更簡潔且更強大。
- 修正過去的疏忽：每個專案都有其教訓。透過 v8，我們已處理某些 PixiJS 的部分並進行重新建構，減少了複雜度，並強化了功能，尤其是在我們感覺過去設計過度的地方（看到你們了，紋理！）。
- 效能提升：PixiJS 以其速度而聞名。透過 v8，我們解鎖了更高的效能，與 v7 相較，整體速度提升。
我們為 PixiJS v8 感到無比自豪，並渴望與您分享其改進和新功能。儘管有些 API 變更造成中斷，但我們已提供遷移指南，並確保盡可能與 v7 相容。預備好透過 PixiJS v8 體驗更高層級的 2D 繪製！
🔗 快速連結
🎁 有什麼新消息？
有許多更新要討論，無法在單一文章中涵蓋所有更新！以下是重點摘要。如需更詳細了解這些變更，請務必追蹤以上提供的連結。
📈 新效能列
v8 的效能對於 兩者 繪製器而言都更快。這表示只要使用 v8 和 WebGL 繪製器，所有速度改善都適用！這是因為我們非常小心，製作出一個只更新其需要更新的更具反應性的繪製迴圈。在此查看數字
- CPU = CPU 繪製單一畫面所花費的時間
- GPU = GPU 繪製單一畫面所花費的時間
| 兔子狀況 | V7 CPU | V8 CPU | CPU Dif | V7 GPU | V8 GPU | GPU dif |
|---|---|---|---|---|---|---|
| 100,000 個都移動的精靈 | 約 50 毫秒 | 約 15 毫秒 | 233% | 約 9 毫秒 | 約 2 毫秒 | 350% |
| 100,000 個不移動的精靈 | 約 21 毫秒 | 約 0.12 毫秒 | 17417% | 約 9 毫秒 | 約 0.5 毫秒 | 1700% |
| 100,000 個精靈（變更畫面結構） | 約 50 毫秒 | 約 24 毫秒 | 108% | 約 9 毫秒 | 約 2 毫秒 | 350% |
這些基準數字是根據您可以親自嘗試的 Bunnymark 測試得來的。
🖥️ WebGPU 繪製器
我們已實作了一個用於繪製的 WebGPU 後端。儘管這已經建立了一個更好的圖形典範，並為未來豐富的網路內容做好準備，但重要的是要注意，WebGPU 並不會在所有情況下自動保證效能優於 WebGL，因為 PixiJS 通常會遇到更多 CPU 端的限制，而非 GPU。不過，對於具有大量批次中斷的畫面，例如濾鏡、遮罩和混合模式，WebGPU 可能會提供更好的效能，這要歸功於其更現代化的繪製方式。由於 WebGPU 相對較新，預期其速度會隨時間提升，類似於 WebGL 的開發。它作為未來進展的穩固基礎。
📦 新套件結構
「lerna」沒了。PixiJS 現在只有一個套件，有一個匯入根目錄：import {stuff} from ‘pixi.js’。這次變更表示我們現在可以在應用程式編譯期間更有效率地搖動樹狀結構，若未匯入，也可以縮小套件大小。
舊的
import { Sprite } from "@pixi/sprite";
import { Graphic } from "@pixi/graphics";
新的
import { Sprite, Graphic } from "pixi.js";
✨ 我們保證繪製器會在起作用
當初始化一個渲染器時，這個程序現在變成非同步的。這有兩個目的：首先，辨識並載入必要的渲染器程式碼，以將載入至使用者端的內容減到最低。我們僅會載入使用者所使用的後端。如果他們使用 WebGPU，那就沒有載入所有 WebGL 的意義。其次，WebGPU 自身的初始化是一個非同步的程序，因此我們需要在某個地方放置一個提示！
import { Application, autoDetectRenderer } from "pixi.js";
const app = new Application();
(async () => {
await app.init({
// application options
});
// or
const renderer = await autoDetectRenderer({}); // WebGL or WebGPU
// do pixi things
})();
🌟 場景升級
- 引進了渲染群組的概念，讓容器能夠利用 GPU 來進行轉換。這促進了真正的 2D 硬體加速攝影機，適合透過縮放和移動來瀏覽大型的靜態世界，它就像一個攝影機在 3D 環境中移動，而不是移動世界本身。這種方法可以大幅提升效能。
const container = new Container({
isRenderGroup:true // this containers transform is now handled on the GPU!
})
- 另一個很酷的新變更，就是混合模式和色彩現在是繼承的，就像轉換和 alpha。這代表你現在可以輕鬆地為一個容器上色，而其所有子項目都會加上色彩－對於混合模式來說也一樣，它和這樣做一樣簡單
// will make all the children tinted red
container.tint = 'red'
// will make all the children have the add blend mode
container.blendMode = 'add'
渲染具有抗鋸齒的材質已經簡化了；你只需要在新渲染材質的建立過程中，或在套用濾鏡時將新的抗鋸齒屬性設為 true，類似於用來建立渲染器的程序。
const texture = RenderTexture.create({
width:100,
height:100,
antialias:true // easy as that
})
- 我們還增加了對各種類似 Photoshop 的濾鏡進行支援，這能讓你將渲染提升到新的境界！我們包含了所有經典的功能
- ColorBlend，ColorBurnBlend，ColorDodgeBlend，DarkenBlend，DifferenceBlend，DivideBlend，ExclusionBlend，HardLightBlend，HardMixBlend，LightenBlend，LinearBurnBlend，LinearDodgeBlend，LinearLightBlend，LuminosityBlend，NegationBlend，OverlayBlend，PinLightBlend，SaturationBlend，SoftLightBlend，SubtractBlend，VividLightBlend。
- важно відмітити, що в основі це, фактично, фільтри, тому радимо не зловживати ними, щоб не загальмувати роботу програми.
import `pixi.js/advanced-blend-modes` // make sure to include them in you lib! (or cherry pick one!)
myContainer.blendMode = 'color-burn` // easy!
🎨 繪圖升級
繪圖 API 已經過調整，變得更直覺、更友善，極為類似於 HTML Canvas 2D context API。例如，繪製和填滿一個長方形變得更簡單，如下所示
graphics
.rect(50, 50, 100, 100)
.fill('blue');引進了一個
GraphicsContext，負責所有繪圖操作。類似於一個材質可以供許多精靈使用的情況，現在一個單一的 GraphicsContext 可以由多個 Graphics 物件使用，提升效率和彈性。增加了對 SVG 繪圖的支援。例如
graphics.svg('M 100 350 q 150 -300 300 0');引進了漸層填滿的支援，目前僅限於線性漸層，增加視覺吸引力。
新的
GraphicsPath類別讓繪製和分享形狀成為可能。這項功能特別有用，因為它允許建立可以轉換為網格幾何的路線，使用buildGeometryFromPath函數，開啟了複雜而細緻繪圖設計的新可能性。
const path = new GraphicsPath()
.rect(-50, -50, 100, 100)
// create geometry from the path:
const geometry = buildGeometryFromPath({
path,
});
const mesh = new Mesh({
geometry,
texture: Texture.WHITE,
});
有關這些繪圖升級的更多資訊，以及如何適應增強的繪圖 API 的指引，請參閱遷移指引，或開始玩 一些範例。
📝 文字升級
文字升級了，效能與可用性更上一層樓！我們也把 HTMLText 整合到 v8 的標準中。
現在 يمكنك依喜好動態產生或先安裝 BitmapFonts。當字型圖形需要時，它會動態新增字元，省下記憶體。Bitmap 文字的版面已經和其他預設文字幾乎一模一樣了，現在可以更輕鬆地根據你的需要在這兩種文字之間切換。
const myText = new BitmapText({
text: 'hello im a bitmap font!',
// font will be dynamically created
style:{
fontFamily: 'Outfit',
fontSize: 12,
fill: 'red',
}
})
文字填滿和描邊現在能符合和圖形相同的填滿和描邊。這代表漸層、紋理和其他所有你可以用來填滿和描繪圖形的有趣方法現在都能套用在文字上。
const myText = new Text({
text: 'hello im some fancy text',
// font will be dynamically created!
style:{
fontFamily: 'Outfit',
fontSize: 12,
fill: { texture, color:'red'} // same as graphics api fills
stroke: { width:3, color:'blue' } // same as graphics api strokes
}
})
🤝 接下來步驟？參與其中！
當 PixiJS v8 邁出走向世界的第一步時，我們迫不及待希望它能隨著你的回饋和貢獻而成長。我們知道一切不可能十全十美，但我們承諾會在 GitHub 和 Discord 快速回應所有出現的問題，並重視你的意見回饋，讓 PixiJS 變得更好。
衷心感謝我們的早期採用者（這裡的每一位 參與者）測試 v8 的極限，以及我們敬業的貢獻者和團隊，感謝他們的辛勤工作。你的付出的洞見對我們來說無價。少了你，我們無法走到今天這一刻！
最後要特別感謝 PlayCo，他們的支持讓這個版本能順利成真！
讓我們持續創新，一起突破網頁圖形的界線。你的參與是 PixiJS 進化的關鍵，我們對於在你的幫助下可以走到什麼地步感到興奮不已。
📲 保持聯繫
為了持續掌握最新消息，我們邀請你在社群媒體上追蹤 Doormat23 和 PixiJS，我們很快就會公布更多令人興奮的更新。另外，你也可以加入我們在 Discord 的熱情社群，直接參與討論和即時聊天。