16

很少有 JavaScript 库允许使用 WebGL 渲染 2D 图形。我发现，最受欢迎的是three.js和pixi.js。它们都允许您使用 WebGL 或画布渲染器（对于不支持 WebGL 的设备）。

我想问你在以下术语下，这些库中哪个更好：

  • 我希望它只用于 2D 图形，因此 3D 支持是完全可选的。
  • 性能非常重要——很多元素、文本、平滑缩放的能力、翻译它们等都是至关重要的。
  • 画布渲染器（当设备不支持 WebGl 时很重要），我希望看到使用这两个渲染器的相同（或非常相似）的结果。

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

4

2 回答 2

19

我有完全相同的用例，只是尝试了两者。对于 5000 个及以上的 sprite，在 three.js 中加载大量静态 sprite（来自同一张图像）更快，但在 pixi 中仅对其中一些 sprite 进行动画处理（同样，对于 5000 个 sprite）提供了更好的帧速率。（这是在桌面上的 Chrome 和 IE9 上测试的）

最大的区别在于 Canvas 渲染器，其中 pixi 的自动检测对于相同的代码给出与 WebGL 相同的结果（如果更慢），但是 three.js 的 Canvas 渲染器不支持 Sprite 类型的含义来实现您必须使用的可移植代码粒子。如果您不经常使用精灵并且大多具有四边形或三角形，那将不是问题。

如果教程等的可用性是一个问题，那么three.js 更加成熟，因此有更多的材料。

否则，对于最多同时渲染大约 2-3k 个元素，我会选择 pixi。

于 2013-07-04T17:45:09.113 回答
3

与 合作很多pixi.js，目前正在与 合作three.js。

pixi.js基于 AS3 API，已用于 Flash 游戏。这意味着 API（结构）已经被测试和尝试了超过three.js. （仅用于 2D）

three.js更受欢迎，它可能在某些边缘情况下更新。例如，它比pixi.js添加着色器具有更大的灵活性。pixi.js尚无法添加“原始”着色器，在着色器代码顶部没有附加任何内容。这对于指定着色器版本“#version 300 es”（pixi.js默认使用旧版本）很重要。

于 2020-07-20T17:46:21.577 回答