Как выбрать наиболее эффективный рендерер, Canvas или WebGL

Я разрабатываю игру с PIXI.js для настольных устройств. PIXI имеет как WebGL, так и Canvas-рендеры, мы будем использовать WebGL везде, где он поддерживается устройством.

Моя проблема заключается в том, что некоторые устройства низкого уровня технически поддерживают WebGL, хотя он и не работает хорошо из-за медленного GPU. В некоторых случаях рендеринг холста будет работать намного лучше.

Как я могу решить во время выполнения, какой визуализатор использовать?

Возможно, WebGL контекст содержит некоторую полезную информацию.

1 4
javascript canvas

1 ответ:

Официальным подходом является использование флага failIfMajorPerformanceCaveat при создании контекста. Вот ссылка на спецификацию, объясняющую, как она должна работать: https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.2.1

Он поддерживается некоторое время в Chrome (с 2013 года, я думаю), так что, скорее всего, он может очень хорошо исключить несколько "медленных" реализаций.

Плохая новость заключается в том, что на момент написания PixiJS, похоже, все еще не может передавать произвольные параметры для создания контекста WebGL. Я еще не проверял, но вопрос об этом официально еще не закрыт: https://github.com/pixijs/pixi.js/issues/1738

Таким образом, вам придется перехватить код PixiJS или создать веб-контекст вручную.

Также, конечно, не каждый браузер поддерживает этот относительно новый флаг.

Если стабильность важнее производительности, один из дополнительных вариантов-полностью отключить WebGL для родного браузера Android до версии 4.4, где официально представлен Chrome Web View. Это позволит исключить более старые пользовательские реализации WebGL (например, Sony xperia one).

Лично я неохотно делаю стресс-тест в начале приложения, чтобы выбрать реализацию рендеринга. Небольшой сбой / скачок производительности может привести к переключению на canvas на совершенно хорошем оборудовании. Но если вы хотите пойти по этому пути, здесь обсуждается его реализация в PIXI: http://www.html5gamedevs.com/topic/1733-detect-performance-issues-to-display-a-message/

3