3

所以我正在为一个客户端创建一些动画，我一直在玩 two.js，因为我喜欢它的 SVG 功能。不幸的是，我遇到了性能问题。

我正在屏幕上绘制 100 个圆圈。每个圆圈包含 6 个进一步的圆圈，总共 700 个圆圈在加载时被渲染。

圆圈对 x 轴上的鼠标移动做出反应，并在 y 轴上缓慢向下层叠。

目前在 Chrome 中，它仅以 32FPS 左右的速度运行。在 Firefox 中它几乎无法正常工作！

我还尝试了 two.js 的 webgl 渲染器，但虽然性能略有提高，但元素看起来不如 SVG。

来源在这里：https ://github.com/ashmore11/verifyle/tree/develop

文件路径：src/coffee/elements/dots

让我知道我是否可以提供更多信息。

4

1 回答 1

12

你做的很漂亮！

嗯，所以有很多因素会导致性能不如您想要的那么出色。

  1. 可绘制区域的大小<svg />很重要（即： or<canvas />元素）。区域越大，要渲染的像素就越多。
  2. 添加到 DOM 的元素数量。是的，有 100 个点，但每个点都由许多元素组成。
  3. 在这些元素中，元素在任何给定帧上的变化量。
  4. 最后，改变多少操作的元素（即：opacity、、、scale等translation）

这些考虑因素在大多数计算机生成的图像中复合，以影响实时渲染。目标基本上是减少任何一个维度的负载，看看它是否足以为您提供您正在寻找的性能。你必须要有创意，但有很多选择。以下是我想到的一些事情，你可以做一些事情来加快速度：

  • 减少形状的数量会使其运行得更快^^
  • 对于这样的事情Two.Types.canvas 可能是最快的。
  • 不是移动每个点，而是将它们translation分成 2 或 3 组，然后根据容器组移动它们。有点像前景和背景视差。
  • 如果您坚持Two.Types.svg尝试在任何给定帧上只为少数几个点设置动画。这样，您就不会在每一帧都对整个场景进行整个遍历，并且每个点也不会在每一帧都设置动画。

伪代码可能如下所示：

// ... some array : dots inferred ... //

var now = Date.now();
var index, length = 12;

two.bind('update', function() {
  for (var i = index; i < Math.min(index + 12, dots.length); i++) {
    var dot = dots[i];
    dot.scale = (Math.sin(now / 100) + 1) / 4 + 0.75;
  }
  index = (index + 12) % dots.length;
});
  • 如果这些都没有给你任何你正在寻找的实质性东西，那么我强烈建议将每一个都Dot变成纹理并直接通过canvas2d或使用WebGL库来绘制这些纹理。Three.js将能够渲染数十万个：http ://threejs.org/examples/#webgl_particles_sprites您将不得不重新考虑很多纹理本身是如何生成的，以及线条之间的不透明度如何变化和当然，它看起来会与您在问题中描述的略有不同。位图与矢量不同>_<

希望这可以帮助！

于 2015-09-03T22:11:48.810 回答