DIV-ы, SVG или Canvas. Что выбрать для визуализация музыки (с точки зрения поедания ресурсов)?

Question

[hadaev_ivan]

В свободное время подпиливаю расширение для хрома( ссылка на расширение кому интересно), которое занимается обработкой музыки в вк с использованием Web Audio API, одной из фич которого есть визуалайзер музыки(frequency bar graph). Если коротко то это штука которая на вход имеет массив чисел, а на выход должна рисовать некоторое количество прямоугольников, высота которых соответствует числам из массива. Рисовать надо быстро, 30-60 раз в секунду.
Собственно вопрос, что выбрать для реализации такой штуки? Важно есть как можно меньше ресурсов и при этом работать быстро. Долго смотрел на css transform, долго смотрел на оптимизации работы с canvas, но окончательное решение принять не могу. Помогите, пожалуйста, кто имеет опыт работы с подобным)

Answer 1

[xmoonlight]

Canvas+asm.js
Быстрее под веб - вообще без вариантов в нативе.

Answer 2

[GreatRash]

Я бы взял Pixi.js - рендер при помощи WebGL, а значит на видюхе. Куда уж быстрей.

Comments

[Александр Коротаев]

Pixi хорошо рисует уже нарисованные примитивы (пререндер), для динамического рисования примитивов я бы выбрал базовый код примера на WebGL + фрагментный шейдер, тут полно примеров glslsandbox.com