Стоит ли использовать WebGL для связки CANVAS + Video?

Question

[Алексей Сегодин]

Привет!
Ситуация такая:
Есть 2–5 видео-файлов формата Full HD, которые на сайте нужно проигрывать одновременно одно под другим. Предполагается, что все видео будут видны одновременно благодаря разным смешениям слоёв и маскам прозрачности. То есть такой ситуации, когда верхнее видео полностью перекрывает собой все остальные не будет. Это всё можно сделать с помощью Canvas (2D).
Вопрос:
Можно ли в данном случае использовать WebGL для повышения производительности? И вообще поможет ли?

Answer 1

[svaa1982]

С WebGL будет быстрее, но если рендерите 2-5 файлов HD, быстро точно не будет ;) Момент с растеризацией будет быстрый, но сама отрисовка видеотекстур крайне медленная операция.

Answer 2

[GreatRash]

Я думаю, что вы однозначно получите прирост производительности. Только вот при использовании WebGl не придётся ли вам самостоятельно писать шейдеры для смешивания слоёв?

Comments

[Алексей Сегодин]

Я не знаю... Я только начинаю знакомиться с WebGL и Canvas.
Такие методы с WebGL не пройдут? — https://developer.mozilla.org/en-US/docs/Web/API/C...

[GreatRash]

Конечно нет. Там совершенно разные API для 2d-контекста и для webgl-контекста. Например то, что вам нужно в WebGL будет называться .blendFunc();

[Алексей Сегодин]

GreatRash, ок, а если использовать метод .blendFunc() вместо, globalCompositeOperation в Сanvas, то производительность будет выше?
Просто я читал, что WebGL хорош для быстрого расчёта положения точек (вершин полигонов) в 2D пространстве. Но на сколько эффективно GPU будет работать с 5-ю анимированными текстурами в 1920x1080? Предполагаю, что видео в данном случае будет, по сути, статичным четырехгранным полигоном с видео-текстурой. Вся нагрузка будет от текстур.

[GreatRash]

Видео и правда будет тупо квадом с анимированой текстурой, висящим перед камерой.

GPU специально спроектирован так, чтобы уметь в 100500 потоков обрабатывать данные о цвете пикселя. Так что да, это будет намного быстрее, чем расчёты на CPU.