Плохая производительность - анимация SVG

Question

Итак, я создаю анимацию для клиента, и я играю с two.js, потому что мне понравились его возможности SVG. К сожалению, у меня проблемы с производительностью.

Я рисую 100 кругов на экране. Каждый круг содержит еще 6 кругов, в которых в общей сложности 700 кругов отображаются при загрузке.

Круги реагируют на движения мыши по оси х и медленно каскадом вниз по оси y.

В настоящее время в Chrome работает только 32FPS. В Firefox он почти не работает!

Я также попытался выполнить рендеринг веб-страниц two.js, но при незначительном увеличении производительности элементы просто не выглядят так же хорошо, как SVG.

Источник здесь: https://github.com/ashmore11/verifyle/tree/develop

путь к файлу: SRC/кофе/элементы/точки

Позвольте мне знать, если есть какие-либо больше информации я могу предоставить.

Answer 1

Что вы сделали, очень красиво!

Хм, так что есть много факторов, почему производительность не такая звездная, как хотелось бы.

1. размер из вопросов рисуемых области (то есть: <svg /> или <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 Вам нужно будет переосмыслить многое о том, как создается сама текстура и как непрозрачность меняется между линиями, и, конечно же, она будет посмотреть немного отличается, как вы описали в вашем вопросе. Растровое изображение отличается от Vector> _ <

Надеюсь, это поможет!