性能不佳 - SVG 动画

Question

所以我正在为一个客户端创建一些动画，并且我一直在使用 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

如果我能提供更多信息，请告诉我。

Answer 1

你做的很漂亮！

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

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

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

• 减少形状的数量会使其运行得更快^^
• 对于这样的事情Two.Types.canvas 可能最快。
• 不是移动每个点，而是将translation 拆分为 2 或 3 个组，然后根据容器组移动它们。有点像 foreground 和 background 视差。
• 如果您坚持使用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 你将不得不重新考虑很多纹理本身是如何生成的，以及线条之间的不透明度如何变化，当然它会 看起来 与您在问题中描述的略有不同。位图不同于矢量>_

希望这会有所帮助！