Поиск и устранение проблем с производительностью в Verge3D

Предисловие

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

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

Измерение FPS

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

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

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

Verge3D FPS counter window

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

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

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

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

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

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

Verge3D performance profile

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

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

Общие тонкости рендера

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

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

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

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

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

Во многих случаях проблемы с производительностью материалов возникают из-за медленной работы нод затенения. Подробнее смотрите в разделах об оптимизации материалов в Blender, 3ds Max or Maya .

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

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

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

Тени

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

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

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

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

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

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

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

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

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

Слишком много draw-call-ов

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

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

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

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

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

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

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

Profiling network activity in Verge3D

О том, как использовать эту функцию, читайте в документации к браузеру: Chrome, Firefox, Safari.

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

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

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

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

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

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

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

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

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

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

Использование памяти GPU

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

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

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

Profiling textures in Verge3D

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

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

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

Profiling render buffers in Verge3D

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

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

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

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

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

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