WebGL VS Canvas 2D аппаратное ускорение

Question

В эти дни мне нужно нарисовать много изображений на холсте. Размер холста 800x600px, и у меня есть много изображений размером 256x256px (некоторые меньше), чтобы рисовать на нем, эти маленькие изображения составят полное изображение на холсте. У меня есть два способа реализовать это.

Во-первых, если я использую canvas 2D-контекст, то есть context = canvas.getContext('2d'), тогда я могу просто использовать метод context.drawimage(), чтобы поместить каждое изображение в нужное место на холсте.

Другой способ, я использую WebGL для рисования этих изображений на холсте. Таким образом, для каждого маленького изображения мне нужно нарисовать прямоугольник. Размер прямоугольника такой же, как у этого маленького изображения. Кроме того, прямоугольник находится на правильном месте холста. Затем я использую изображение как текстуру, чтобы заполнить его.

Затем я сравниваю производительность этих двух методов. Оба их fps достигнут 60, а анимация (Когда я нажимаю или двигаю мышью, холст будет многократно перерисовываться) выглядит очень гладко. Поэтому я сравниваю их использование . Я ожидаю, что когда я использую WebGL, процессор будет использовать меньше, потому что GPU обеспечит много работы по рисованию. Но в результате использование ЦП выглядит почти таким же. Я пытаюсь оптимизировать свой код WebGL, и я думаю, что это достаточно хорошо. Google, я обнаружил, что браузер, такой как Chrome, Firefox включит Аппаратное ускорение по умолчанию. Поэтому я пытаюсь закрыть аппаратное ускорение. Тогда использование ЦП первого метода становится намного выше. Итак, мой вопрос заключается в том, что, поскольку canvas 2D использует GPU для ускорения, необходимо ли мне использовать WebGL только для 2D-рендеринга? В чем разница между ускорением 2D GPU и WebGL? Они оба используют графический процессор. Может быть, есть какой-либо другой способ снизить использование ЦП второго метода? Любой ответ будет оценен!

Answer 1

Canvas 2D по-прежнему поддерживается больше мест, чем WebGL, поэтому, если вам не нужны какие-либо другие функции, использование Canvas 2D будет означать, что ваша страница будет работать на тех браузерах, которые имеют холст, но не WebGL (например, старые устройства Android). Конечно, это будет медленным на этих устройствах и может потерпеть неудачу по другим причинам, таким как нехватка памяти, если у вас много изображений.

Теоретически WebGL может быть быстрее, потому что значение по умолчанию для холста 2d состоит в том, что файл буфера сохраняется, тогда как для WebGL это не так. Это означает, что если вы отключите сглаживание в WebGL, браузер имеет возможность удвоить буфер. Что-то, что он не может сделать с canvas2d. Еще одна оптимизация - в WebGL вы можете отключить альфа, что означает, что браузер имеет возможность отключать смешивание при компоновке вашего WebGL со страницей, опять-таки, что у него нет возможности делать с холстом 2d. (есть планы отключить альфа для холста 2d, но по состоянию на 2017/6 она не получила широкого распространения)

Но, по вариант Я имею в виду именно это. Это зависит от браузера, чтобы решить, следует ли делать эти оптимизации.

В противном случае, если вы не выбрали эти оптимизации, возможно, что 2 будет той же скоростью. Я лично не нашел этого. Я попытался сделать drawImage только вещи с холстом 2d и не получил гладкой частоты кадров, как это было с WebGL. Это не имело никакого смысла, но я предположил, что внутри браузера что-то происходит, и я не осознавал этого.

Я думаю, что это приведет к окончательной разнице. WebGL является низкоуровневым и хорошо известен. Браузера не так много, чтобы испортить его. Или, другими словами, вы на 100% контролируете ситуацию.

С Canvas2D с другой стороны, это зависит от браузера, что делать и какие оптимизации делать. Они могут быть изменены в каждом выпуске. Я знаю, что Chrome в какой-то момент любой холст под 256x256 не был аппаратным ускорением. Другой пример - это то, что делает холст при рисовании изображения.В WebGL вы создаете текстуру. Вы решаете, насколько сложны ваши шейдеры. В Canvas вы понятия не имеете, что он делает. Возможно, он использует сложный шейдер, который поддерживает все различные холсты globalCompositeOperation, маскирование и другие функции. Возможно, для управления памятью он разбивает изображения на патроны и делает их на куски. Для каждого браузера, а также для каждой версии того же браузера то, что он решает сделать, зависит от этой команды, где, как и с WebGL, она почти на 100% зависит от вас. Там не так много, что они могут сделать в середине, чтобы испортить WebGL.

FYI: Вот an article detailing how to write a WebGL version of the canvas2d drawImage function, а затем an article on how to implement the canvas2d matrix stack.