Самый эффективный способ рисования частиц в HTML5 на iPad 2

Я пытаюсь создать движущиеся огни со следами для веб-сайта/приложения HTML5, ориентированного на iPad 2. Интересно, как лучше всего это сделать и целесообразно ли вообще использование HTML5. Я выбрал HTML5, потому что его проще и дешевле разрабатывать и развертывать, чем нативные приложения для iOS с помощью Objective C. Конечно, если выяснится, что HTML5 просто не обеспечивает достаточную производительность, мне, возможно, придется проглотить горькую пилюлю.

В любом случае, чтобы дать вам представление о том, о чем я говорю, вот что я получил на данный момент:

снимок экрана http://devdali.no-ip.org/mathias/test-lights/screenshots/1. jpg

Или вы можете увидеть его в действии здесь(работает только в браузерах на основе webkit).

Сначала я пытался использовать холст HTML5 и рисовать радиальные градиенты в виде частиц, как показано выше. Это сработало, но частота кадров была ужасной даже на моем настольном компьютере!

Почитав немного, я обнаружил, что преобразования CSS3 могут быть аппаратно ускорены, поэтому я создал версию, которую вы видите выше. Каждая "частица" представляет собой png-изображение размером 64x64. Для каждого источника света есть «головной» свет (одно изображение), за которым следует шлейф, состоящий из 115 элементов изображения. Каждый элемент img трансформируется с помощью «translate3d» (а также масштабирования и поворота). Также непрозрачность каждого элемента регулируется динамически.

Такой способ обеспечил гораздо лучшую частоту кадров на моем компьютере, но я сомневаюсь, что iPad 2 справится с этим.

Буду благодарен, если кто-нибудь подскажет, как улучшить производительность в целом и с учетом целевой платформы.

Заранее спасибо за любую помощь!