为什么 Canvas 实现比 Pixi.JS 更快？答案

【问题标题】：Why Canvas implementation is faster than Pixi.JS one?为什么 Canvas 实现比 Pixi.JS 更快？
【发布时间】：2014-09-22 13:23:58
【问题描述】：

我正在编写一个 2D 游戏引擎。为了检查性能，我绘制了 1000 个对象，每个对象有 3 个孩子。只画了孩子，结构如下：

var object = { x:, y:, length:, children: [ /* this repeats three times */ ] };

不使用路径缓存我绘制任何对象的实现如下所示：

save();

translate(object.x, object.y);
rotate(object.rotation);

beginPath();
moveTo(0, 0);
lineTo(object.length / 8, -object.length / 8);
lineTo(object.length, 0);
lineTo(object.length / 8, object.length / 8);
stroke();

for (child in children) {
  // repeat the same for each child
}

restore();

使用 500 个对象（总共 1500 次与孩子一起绘制）可获得约 25FPS。我尝试了 PIXI.js，看看 WebGL 是否会更快。我将PIXI.DisplayObjectContainer 用于对象，将PIXI.Graphics 用于每个孩子（在初始化时对每个孩子调用一次moveTo...lineTo 块）。它不能超过 20FPS。

我是不是做错了什么，或者在绘制路径时是否有一些神奇的 Canvas 性能比 WebGL 有所提升？它在 Ubuntu 12.04 x64 上的 Chrome 33.0.1750.149 上。

【问题讨论】：

这真的不是 pixi.js 问题而不是 WebGL 问题吗？有很多 WebGL 绘制多达一百万条路径的示例。如果 pixi.js 做不到，那可能是 pixi.js 的问题，而不是 WebGL 的问题。
@gman 对，移除了 WebGL 标签

标签： javascript canvas pixi.js

【解决方案1】：

嗯，考虑到这个问题的发布日期，您可能已经解决了这个问题。

您可能使用Canvas Renderer 而不是WebGL 一个。

您可以强制它具有WebGL Renderer，如下所示

var renderer = new PIXI.WebGLRenderer(WIDTH, HEIGHT);

而不是

var renderer = new PIXI.autoDetectRenderer(WIDTH, HEIGHT);
// can be either Canvas or WebGL

【讨论】：