Поиск и устранение проблем с производительностью в «Вердж3Д»

Предисловие

Учитывая, что вашими приложениями может пользоваться широкая интернет-аудитория, ваши приложения на базе «Вердж3Д» должны демонстрировать хорошую производительность. Например, некоторые классы устройств с поддержкой ВебГЛ могут работать гораздо хуже, чем вы ожидаете:

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

Измерение частоты кадров

Частота кадров в секунду — это важнейшая величина, отражающая время рендеринга вашего приложения:

Начиная с версии 3.2, «Вердж3Д» поставляется со встроенным счетчиком частоты кадров. Активировать его можно следующим образом:

После активации вы сможете увидеть текущее значение частоты кадров (вместе с его диапазоном и графиком истории) на небольшой панели в левом верхнем углу вашего приложения:

Чтобы получить достоверные значения, следует измерять FPS на самых медленных/старых устройствах, которые у вас есть. Кроме того, большинство браузеров не позволяют приложению работать с частотой кадров более 60 Гц (это улучшает синхронизацию кадров, экономит ресурс батареи и снижает шум вентилятора).

Профиль производительности

«Вердж3Д» оснащен функцией генерации профилей производительности в режиме реального времени. Вы можете получить быстрое представление о том, что происходит с производительностью в вашем приложении и что нужно сделать для ее повышения. Для создания таких профилей вы можете использовать один из следующих методов:

Подождите не менее 1 секунды, пока «Вердж3Д» соберет данные профиля, затем откройте консоль браузера. Проверьте строку в открывшемся окне консоли:

--- Verge3D Performance Profile (1s) ---

Под ней — строки с собранной информацией о производительности:

Вот что можно узнать из созданного профиля производительности:

Scene Loading Time
Время в секундах, необходимое для загрузки основной сцены приложения. Смотрите ниже о том, как его уменьшить.
Asset Compression
Показывает, была ли включена компрессия ассетов.
FPS
Частота кадров рендеринга. Это то же значение, о котором сообщает счетчик выше.
Render Calls
Количество запросов рендера на кадр. Важное значение, показывающее, сколько операций отрисовки выполняется в течение одного кадра. Это значение представляет собой количество различных материалов на вашей сцене + различные дополнительные запросы рендера, такие как тени, постпроцессинг и т.д.
Triangles Rendered
Сколько треугольников было отрисовано за кадр. Подробнее об этом значении смотрите ниже.
Geometry Buffers
Сколько буферов геометрии использует ваше приложение.
HDR Rendering
Был ли ХДР-рендеринг включен или выключен.
Viewport Resolution
Разрешение рендера вьюпорта.
Pixel Ratio
Текущее соотношение пикселей (используемое рендером) и соотношение пикселей устройства (нативное).
Image-Based Lighting
Тип освещения с помощью изображения и размер соответствующей кубамапы.
Lights
Количество источников света в вашей сцене.
Reflection Probes
Количество кубических и планарных зондов на сцене.
Post-Processing
Проходы постпроцессинга сцены (в порядке рендеринга).
Shadow Map
Параметры карты теней: размер фильтрации; количество отрисованных карт теней; разрешение карты теней.
Materials and Shaders
Список отрисованных материалов и шейдеров. Каждый элемент списка содержит следующую информацию: имя материала (или имена, если они используют один и тот же шейдер), имя шейдера и время рендеринга на кадр (измеряется в миллисекундах).
Total Render Time
Общее количество времени (в миллисекундах), которое потребовалось для рендеринга вашей сцены.
Textures & Render Buffers
Статистика текстур и буферов рендера. Текстуры выводятся в верхней части списка (с префиксом Texture), а буферы рендера - в нижней (с префиксом RenderTarget). Для текстур также показывает формат: RGBA для несжатых текстур, RGBA_[МЕТОД] для текстур с компрессией.

Чтобы помочь вам найти проблемные места, мы помечаем соответствующие строчки красным. Например, в профиле представленном ниже проблемой является слишком большая карта теней (4К) что может существенно замедлять рендеринг.

Общие проблемы производительности

Вот наиболее часто встречающиеся слабые места, ограничивающие частоту кадров.

Сложные материалы

Графическое оборудование способно отображать ограниченное количество пикселей в секунду. В большинстве сценариев вы не можете отрисовать больше, потому что ваши материалы используют длинные и сложные пиксельные (фрагментные) шейдеры, которые требуют слишком много вычислительной мощности от графического процессора.

Вы можете легко определить ситуацию с ограниченной производительностью пикселей, уменьшив или увеличив размер окна браузера. Если частота кадров (FPS) существенно возрастает при уменьшении размера, то у вас именно такая ситуация.

Самый простой способ повысить производительность - упростить материалы. Обратите внимание на верхнюю часть списка Materials and Shaders в профиле производительности.

Во многих случаях проблемы с производительностью материалов возникают из-за медленной работы нод затенения. Подробнее смотрите в разделах об оптимизации материалов в «Блендере», «3дс Максе» и «Майе» .

Вы также можете избавиться от проблемы плохой производительности шейдеров, установив соотношение пикселей < 1 с помощью пазла set screen scale . Это может сильно повлиять на качество вашего приложения, поэтому считайте это решением на крайний случай.

Постпроцессинг

Несколько эффектов постпроцессинга могут существенно снизить производительность ваших приложений:

Тени

Сложные алгоритмы теней с большими размерами карт теней также могут негативно повлиять на скорость рендеринга.

  1. Если на сцене несколько источников света, отключите тени для самых слабых (с низкой интенсивностью).
  2. В большинстве случаев тени от источника освещения типа point требуют больше вычислений, чем тени от spot или sun/directional.
  3. Уменьшите размер карты теней (см. «Блендер», «3дс Макс», «Майя»).
  4. Переход на менее требовательный к производительности алгоритм фильтрации теней (см. «Блендер», «3дс Макс», «Майя»).

Слишком много геометрии

Слишком сложная геометрия также может повлиять на производительность рендеринга. Мы рекомендуем использовать не более 100 тысяч треугольников на модель или более миллиона треугольников на всю сцену.

Медленный рендеринг карты освещения

В «Вердж3Д» можно выполнить несколько настроек производительности для освещения окружения:

  1. Уменьшите размер кубомапы (см. настройки в «Блендере», «3дс Максе», «Майе»). В большинстве случаев мы рекомендуем использовать кубомапу размером в 256 пикселей.
  2. Переключитесь на более эффективный режим окружения (см. «Блендер», «3дс Макс», «Майя»).

Слишком много источников света

Чрезмерные расчеты света увеличивают сложность ваших шейдеров. Попробуйте уменьшить их количество или переключиться на освещение только от карты.

Слишком много вызовов отрисовки

Сотни запросов рендеринга (draw calls) значительно нагружают процессор. Поэтому следует держать это значение как можно ниже. В большинстве ситуаций мы рекомендуем вам держать количество запросов рендеринга ниже 100.

Если вы рендерите много статических объектов с одним и тем же материалом, вы можете значительно увеличить производительность, используя пазл batch geometry .

Время загрузки сцены

Еще один момент, на который необходимо обратить внимание, - это время загрузки сцены. Пользователи не любят долго ждать, пока загрузится ваше приложение.

Вот наиболее часто встречающиеся слабые места, которые замедляют загрузку вашего приложения.

Файл с данными и текстуры

Поскольку ассеты вашего приложения передаются по сети, их размер следует минимизировать. Чтобы помочь вам в оптимизации ассетов, существует инструмент проверки сети, доступный из консоли браузера. Просто нажмите на вкладку Network и перезагрузите страницу.

О том, как использовать эту функцию, читайте в документации к браузеру: «Хром», «Файрфокс», «Сафари».

Сортируйте ресурсы по размеру, чтобы отобрать те, которые больше всего влияют на время загрузки. В большинстве случаев эти ресурсы можно разделить на две категории:

  1. Бинарные файлы сцены (*.bin или *.bin.xz расширения) — содержит геометрию, морфинг и анимацию вашей сцены. Сжатие ассетов может значительно уменьшить размер этого файла, всегда учитывайте это в ваших приложениях.
  2. Текстуры (*.jpg, *.png, или *.hdr расширения) — см. здесь для получения дополнительной информации о том, как их оптимизировать.

Кроме того, есть два грубых, но очень эффективных метода оптимизации текстур:

  1. Уменьшите масштаб текстур, уменьшив их размеры в 2 раза (например, 2048x2048 до 1024x1024 или даже 512x512).
  2. Конвертируйте все текстуры PNG в JPEG (даже карты нормалей).

Слишком много или слишком сложные материалы

За некоторыми исключениями, каждый материал на вашей сцене требует компиляции пары специальных программ, называемых шейдерами vertex shader и fragment (или пиксельный) шейдер. Шейдер - это специальная программа, выполняемая на вашем графическом процессоре для расчета различных объектов рендеринга, таких как положение вертексов, текстуры, освещение, отражения, преломления и т.д.

Компиляция шейдеров - это требовательная к вычислениям задача, которая выполняется при каждой загрузке вашего приложения. Если на сцене используется большое количество различных материалов, компиляция шейдеров может значительно увеличить общее время загрузки.

Поэтому чем меньше шейдеров использует ваше приложение, тем быстрее оно загружается. Кроме того, шейдеры кэшируются ВебГЛ, поэтому если шейдер используется несколькими объектами, он компилируется только один раз.

Поэтому для быстрой загрузки важно использовать как можно меньше уникальных шейдеров. Одним из возможных способов достижения этого является включение флага совместимости ГЛТФ, который а) значительно упрощает шейдеры, чтобы они компилировались и работали быстрее, и б) стандартизирует их для более эффективного кэширования.

Очевидным недостатком использования ГЛТФ-совместимых шейдеров является то, что они могут быть слишком упрощенными для реализации желаемых графических эффектов. Поэтому, как это всегда бывает в графике реального времени, необходимо балансировать между качеством и производительностью.

Использование памяти видеокарты

Чрезмерное использование памяти видеокарты может значительно снизить производительность или даже привести к закрытию вашего приложения. Следующие вещи потребляют много памяти.

Большие текстуры

Например, одна только текстура размером 4096x4096 занимает почти 90 Мб видеопамяти. Чтобы получить все текстуры в вашем приложении, проверьте раздел Textures & Render Buffers в профиле производительности.

См. здесь для получения дополнительной информации о том, как рассчитать использование памяти текстурами.

Слишком много циклов постпроцессинга

Большинство эффектов постпроцессинга требуют дополнительных буферов рендеринга, которые потребляют память графического процессора. Обратите внимание на нижнюю часть списка Textures & Render Buffers в профиле производительности чтобы увидеть все буферы рендеринга.

Большие буферы геометрии

Меши с большим количеством треугольников требуют больших буферов геометрии и потребляют много видеопамяти для их хранения.

Смотрите также

Ознакомьтесь с разделом методы оптимизации для получения дополнительной информации о способах оптимизации ассетов.

Остались вопросы?

Задайте их на нашем форуме!