性能不佳-SVG动画 [英] Poor performance - SVG animations

问题描述

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

So I'm creating some animations for a client and I've been playing with two.js because I liked its SVG capabilities. Unfortunately I'm having issues with performance.

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

I'm plotting 100 circles on the screen. Each circle contains 6 further circles for a total of 700 circles being rendered on load.

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

The circles react to mouse movements on the x-axis and cascade slowly downwards on the y-axis.

当前在Chrome中，其运行速度仅为32FPS左右。

Currently in Chrome its only running at around 32FPS. In Firefox it barely even works!

我也尝试过two.js的webgl渲染器，但是虽然性能略有提高，但是这些元素看起来并不那么好

I've also tried two.js's webgl renderer but while there is a slight performance increase, the elements just don't look as good as SVG.

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

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

path to file: src/coffee/elements/dots

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

Let me know if there's any more info I can provide.

推荐答案

您所拥有的做的非常漂亮！

What you've made is very beautiful!

嗯，所以有很多因素可以使性能不如您想要的那样出色。

Hmmm, so there are many factors as to why the performance isn't as stellar as you'd like.

1. 可绘制区域的大小很重要（即：< svg /> 或< canvas /> 元素）。


2. 添加到DOM中的元素的 amount 。是的，有100个点，但是每个点都包含许多元素。


3. 在这些元素中，元素在任何给定帧上的变化数量。
   
4. 最后，更改多少个操作的元素（即： opacity ， scale ，翻译等）

1. The size of the drawable area matters (i.e: the <svg /> or <canvas /> element). The bigger the area the more pixels to render.
2. The amount of elements added to the DOM. Yes there are 100 dots, but each dot is comprised of many elements.
3. Of those elements the amount of changes an element has on any given frame.
4. Finally, of the elements changing how many operations (i.e: opacity, scale, translation, etc.)

这些大多数计算机生成图像中的注意事项都会影响实时渲染。基本上，目标是减少任何一个维度上的负担，并查看是否足以为您提供所需的性能。您将不得不发挥创造力，但有很多选择。以下是我可以尝试加快处理速度的一些事情：

These considerations compound in most computer generated imagery to affect real-time rendering. The goal is basically to reduce the load on any one of those dimensions and see if it's enough to give you the performance you're looking for. You're gonna have to get creative, but there are options. Here are a few things off the top of my head that you can do to try to speed things up:

• 减少形状的数量会使其运行得更快^^


• 对于诸如此类的 Two.Types.canvas 可能最快。


• 不是移动每个点，而是将翻译分成2或3组，然后根据容器组进行移动。有点像前景和背景视差。


• 如果您坚持使用 Two.Types。 svg 尝试在任何给定的帧上只设置一些点的动画。这样，您不会在每一帧都遍历整个场景，并且每个点都不会在每一帧进行动画处理。

• Reducing the amount of shapes will make it run faster ^^
• For something like this Two.Types.canvas might be fastest.
• Instead of moving each dot split the translation into 2 or 3 groups and move them based on the container groups. Kind of like a foreground and background parallax.
• If you're sticking with Two.Types.svg try animating only a handful of dots on any given frame. This way you're not doing entire traversal of the whole scene every frame and each dot isn't animating every frame.

伪代码

// ... 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 或使用<$绘制这些纹理c $ c> WebGL 和一个库。 Three.js 将能够渲染成千上万个这样的文件： http://threejs.org/examples/#webgl_particles_sprites 您将不得不重新考虑很多纹理本身的生成方式以及各行之间的不透明度如何变化当然，它与您在问题中所描述的外观略有不同。位图不同于Vector> _<


• If none of these are giving you anything substantial you're looking for than I would highly recommend turning in each Dot into a texture and drawing those textures either directly through canvas2d or with WebGL and a library. Three.js will be able to render hundreds of thousands of these: http://threejs.org/examples/#webgl_particles_sprites You'll have to rethink a lot of how the texture itself is generated and how the opacity varies between the lines and of course it'll look slightly different as you described in your question. Bitmap is different from Vector >_<

希望这会有所帮助！

这篇关于性能不佳-SVG动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！