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 或 svg。我搜索了很多，有人说这取决于 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。