svg或png在PIXI.js和WebGL中獲得更好的性能？

Question

我的問題似乎並不新鮮，但據我搜索了幾天，我找不到我的答案。

我正在試圖製作一個使用webGL的PIXI.js網頁。 我的網頁是鼠標移動視差，我的意思是當用戶移動他/她的鼠標指針時，對象可以擁有的所有移動都是幾個像素。

現在我的問題：我有一些簡單的圖像，我不知道使用svg或png。

我的圖片是這樣的：

• https://1drv.ms/i/s!Aj-BeFYyTnRzhTBSVEXXeJ2c-O7V

• https://1drv.ms/i/s!Aj-BeFYyTnRzhTFeTzJLrWaq_VFh

• https://1drv.ms/i/s!Aj-BeFYyTnRzhTIa9lAaS9dKX1DL

我希望使我的網頁儘可能流暢，並且我不知道使用png或sgg。我搜索了很多，有人說這取決於png和svg，在我的情況下，我的svgs不會太複雜，但有人說，因爲svg使用CPU和WebGL使用GPU使用它們，導致性能不足，還有一些說在PIXI中使用svg與png沒有什麼不同，因爲PIXI從它們發出的聲音並不會有任何差別...

我是新來的webGL和Pixi所以現在有了這些答案我變得困惑，順便說一下，對於我的情況來說，圖像大小並不重要，我只希望儘可能平滑。

非常感謝您的幫助。

Answer 1

它對運行時性能沒有影響，SVG將被光柵化爲紋理。然而，在初始化瀏覽器需要柵格化SVG以從中創建紋理時，根據SVG的複雜程度，可能會有顯着的性能損失。

但是，由於您正在爲Web開發，上述懲罰容易被您從服務器加載SVG的事實所抵消，該服務器引入的方式比柵格化SVG更具延遲，如果考慮尺寸柵格化的PNG和SVG之間的區別（假設你不打算從它們創建微小的紋理）。

因此，最終的結論是，使用SVG，它的無損和小型以及​​可從客戶端代碼中調整大小和編輯。它還可以幫助您在每次更改內容時將源資源導出到PNG。