JavaScript 2D rendering library [pixie.js vs three.js]

本文关键字：js vs three pixie 2D rendering library JavaScript 更新时间：2023-09-26

很少有JavaScript库允许使用WebGL渲染2D图形。我发现，最流行的是three.js和pixi.js。它们都允许你使用WebGL或画布渲染器(对于不支持WebGL的设备)。

我想问你在以下条件下哪个库更好:

我希望它只使用2D图形，所以3D支持是完全可选的。
性能是非常重要的-许多元素，文本，平滑缩放，翻译等能力是至关重要的。
画布渲染器(当设备不支持WebGl是重要的)，我希望看到使用两个渲染器相同(或非常相似)的结果。

如果有另一个库，我应该考虑在这种特殊情况下，请随时告诉它:)

我有完全相同的用例，只是尝试了两种。在3 .js中加载大量静态精灵(来自同一张图像)对于5000个精灵或以上的精灵来说速度更快，但是在pixi中只激活其中的一些精灵会获得更好的帧率(同样对于5000个精灵)。(这是在Chrome和IE9台式机上测试的)

最大的不同是Canvas渲染器，pixi的自动检测对于相同的代码给出了与WebGL相同的结果(如果更慢)，但是three.js的Canvas渲染器不支持Sprite类型，这意味着要实现可移植的代码，你必须使用Particles。如果你没有使用那么多精灵，并且大多数都是四边形或三角形，那就不是问题了。

如果教程的可用性等都是一个问题，three.js更成熟，所以有更多的材料。

否则，对于同时渲染大约2-3k个元素，我会使用pixi.

在pixi.js工作过很多次，现在在three.js工作。

pixi.js是基于AS3 API的，它已经被用于flash游戏。这意味着API(结构)已经测试和尝试了比three.js更长的时间。(仅用于2D)

three.js更受欢迎，它可能在一些边缘情况下更最新。例如，它在添加着色器方面比pixi.js更具灵活性。pixi.js还没有添加"raw"的可能性。着色器，没有任何附加在着色器代码的顶部。这对于指定着色器版本很重要& #版本300;(pixi.js默认使用旧版本)