Question

我正在编写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();

它有大约25FPS的500个物体（1500个孩子的总数）。我试过PIXI.js来看看WebGL是否会更快。我使用PIXI.DisplayObjectContainer作为对象，并使用PIXI.Graphics作为每个子项（在初始化时每次调用moveTo...lineTo块一次）。它无法超过20FPS。

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

Answer 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

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

1 个答案: