Поиск и устранение проблем с производительностью в Вердж3Д — Софт Эйт Софт
Description: Узнайте, как обнаружить и устранить узкие места в производительности приложений на базе Вердж3Д.

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

- Предисловие
- Измерение частоты кадров
- Профиль производительности
- Общие проблемы производительности
  - Сложные материалы
  - Постпроцессинг
  - Тени
  - Слишком много геометрии
  - Медленный рендеринг карты освещения
  - Слишком много источников света
  - Слишком много вызовов отрисовки
- Время загрузки сцены
  - Файл с данными и текстуры
  - Слишком много или слишком сложные материалы
- Использование памяти видеокарты
  - Большие текстуры
  - Слишком много циклов постобработки
  - Большие буферы геометрии
- Смотрите также

#

## Предисловие

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

- Обычные ноутбуки низкого или среднего класса с интегрированным графическим процессором (графика «Интел», «АМД АПУ»)
- Устаревшие смартфоны или планшеты.
- Мобильные устройства виртуальной реальности, такие как «Окулус Квест». Для предотвращения морской болезни необходимо, чтобы эти устройства выдавали изображение с подходящей частотой кадров. (72, 90, или даже 120 кадров в секунду).
- Устройства с аккумуляторной батареей. Огромная загрузка графического процессора быстро разряжает батарею, питающую мобильные устройства.

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

#

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

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

- < 20 — ваше приложение очень медленное, им почти невозможно пользоваться.
- 20-40 — медленно, но приемлемо.
- 40-60 — достаточно хорошо.
- 60 — идеальная частота кадров на компьютерных и мобильных браузерах.
- > 60 - частота кадров, на которую следует ориентироваться при использовании гарнитур ВР.

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

- Быстро нажимая ~, ~, ~ (тройная тильда), а затем (F) из меню Service Tools.
- Использовать «Ява Скрипт»-метод showFPS().

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

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

#

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

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

- Быстро нажимая ~, ~, ~ (тройная тильда) на вашей клавиатуре, а затем P из меню Service Tools.
- Используйте пазл print performance info .
- Использовать «Ява Скрипт» и метод printPerformanceInfo() .

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

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

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

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

Scene Loading Time
  Время в секундах, необходимое для загрузки основной сцены приложения. Смотрите ниже о том, как его уменьшить.
Asset Compression
  Показывает, была ли включена компрессия ассетов.
Shader Compilations
  Количество компиляций шейдеров, требуемых для запуска сцены.
FPS
  Частота кадров рендеринга. Это то же значение, о котором сообщает счетчик выше.
Render Calls
  Количество запросов рендера на кадр. Важное значение, показывающее, сколько операций отрисовки выполняется в течение одного кадра. Это значение представляет собой количество различных материалов на вашей сцене + различные дополнительные запросы рендера, такие как тени, постобработка и т.д.
Triangles Rendered
  Сколько треугольников было отрисовано за кадр. Подробнее об этом значении смотрите ниже.
Geometry Buffers
  Сколько буферов геометрии использует ваше приложение.
HDR Rendering
  Был ли HDR-рендеринг включен или выключен.
Order-Independent Transparency
  Была ли порядконезависимая прозрачность включена или выключена.
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 . Это может сильно повлиять на качество вашего приложения, поэтому считайте это решением на крайний случай.

#

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

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

- Скрин спейс рефракция и рефлекция (см. пазл screen space reflection/refraction).
- Эмбиент окклюжн (см. настройки для «Блендера» / «3дс Макса» / «Майи»).
- Эффект глубины резкости (см. пазл depth of field).

#

### Тени

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

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 (или пиксельный) шейдер. Шейдер - это специальная программа, выполняемая на вашем графическом процессоре для расчета различных объектов рендеринга, таких как положение вертексов, текстуры, освещение, отражения, преломления и т.д.

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

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

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

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

#

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

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

#

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

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

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

#

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

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

#

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

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

#

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

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

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

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