Pixi.js: Анимационный круг (улучшающая производительность)

Question

Я хотел бы анимировать 1000 кругов (положение, радиус, альфа, заливка, штрих). Текущий метод, который я использую, включает обновление некоторых свойств объекта Graphics, а затем также очистку и повторение круга для каждого draw().

holder = new PIXI.Graphics(); 
holder.lineStyle(strokeWidth, strokeColor, strokeOpacity); 
holder.beginFill(color); 
holder.drawCircle(r, r, r); 
holder.endFill(); 

К сожалению, это слишком дорого ... Есть ли способ, чтобы избежать очистки круг или другой подход, который может ускорить этот рендеринга петли вверх?

Answer 1

Если вы держите ссылку на каждом держателе (например, в массиве), вы можете просто обновить свои позиции/тонирование и т. Д. На каждом цикле.

Answer 2

Вы можете попробовать несколько вещей, чтобы улучшить производительность:

1. Убедитесь, что вы используете только один PIXI.Graphics (или, как минимум, как можно объекты) объекта, который создается при инициализации, а не на каждом animFrame , Нарисуйте все круги на этом объекте и только ими управляйте.
2. Если вам не нужно менять свойства на каждом круге, попробуйте сгруппировать похожие, и вы можете сгенерировать Texture из них, что затем позволяет вам манипулировать положением, размером и альфой.
3. Постарайтесь ограничить обновление кругов, чтобы этого не произошло на каждой ничьей. Вам действительно нужно 60 обновлений в секунду? Если вы это сделаете, попробуйте объединить круги и обновить, например, 100 из них в одном кадре, следующем 100 в следующем кадре и т. Д.

Я не уверен, чего именно вы хотите достичь с помощью 1000 круги, но если вы добавите пример к своим вопросам, я могу быть более конкретным с советами по оптимизации.