Производительность и ограничение источников света

При работе с Three.js ключевым фактором производительности является освещение сцены. Источники света напрямую влияют на нагрузку GPU и время рендеринга, особенно при использовании теней, объемного света или большого количества динамических источников. Важно понимать, какие типы света существуют и как минимизировать их влияние на FPS.


Типы источников света

Three.js предоставляет несколько основных типов источников света:

  1. AmbientLight Обеспечивает равномерное освещение всех объектов сцены. Не создает теней и не требует сложных вычислений. Практически не влияет на производительность, но не дает объема объектам.

  2. DirectionalLight Имитация солнца: лучи параллельны и направлены в определенную сторону. Позволяет создавать тени с использованием shadow.map. Основная нагрузка возникает при активации теней, особенно при высокой разрешающей способности теневой карты.

  3. PointLight Свет, излучаемый во все стороны от одной точки. Создает реалистичные локальные источники, но теневые расчеты для него тяжелые, так как создается кубическая тенёвая карта (6 сторон).

  4. SpotLight Фокусированный источник света с ограниченным углом. Позволяет получать выразительные сценические эффекты и тени с контролируемым радиусом. Эффективность зависит от угла и разрешения теневой карты.

  5. HemisphereLight Простое освещение, имитирующее свет неба и отраженный свет от земли. Не создает теней, низкая нагрузка на GPU.


Влияние света на производительность

  1. Количество источников света Каждый динамический источник света с тенями увеличивает вычислительную нагрузку. Например, добавление пяти PointLight с тенями может снизить FPS на слабых устройствах до половины.

  2. Теневые карты

    • Разрешение карты (shadow.mapSize) критически влияет на производительность.
    • Большие карты обеспечивают резкие тени, но нагружают GPU.
    • Маленькие карты экономят ресурсы, но создают размытие и “пикселизацию” теней.
  3. Тип материалов Материалы MeshStandardMaterial и MeshPhysicalMaterial используют физически корректное освещение (PBR), что требует больше ресурсов при наличии нескольких источников света. Материалы MeshBasicMaterial игнорируют свет, что позволяет полностью исключить влияние источников на рендеринг.

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


Практические методы оптимизации

  1. Ограничение числа источников света

    • Основной свет + один-два локальных источника достаточно для большинства сцен.
    • В сценах с множеством объектов следует использовать AmbientLight для базового освещения и экономить динамические источники.
  2. Статические и baked light

    • Для сцен с фиксированной геометрией эффективнее использовать статические карты освещения (Lightmap).
    • Lightmap позволяет запекать теневые и диффузные эффекты в текстуры, избавляясь от необходимости расчета теней в реальном времени.
  3. Снижение разрешения теневых карт

    • Настройка light.shadow.mapSize.width и light.shadow.mapSize.height позволяет гибко балансировать качество и FPS.
    • Для точечных источников света уменьшение размера карты с 2048×2048 до 512×512 дает значительный прирост производительности.
  4. Использование frustumCulled

    • Скрытые от камеры объекты не должны участвовать в расчете света и теней.
    • Включение object.frustumCulled = true уменьшает нагрузку на рендер.
  5. Пакетирование и LOD источников света

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

Дополнительные приемы

  • Смешанное освещение: динамический ключевой свет + статическое AmbientLight или HemisphereLight.
  • Использование shadow.camera для DirectionalLight: уменьшение объема камеры теней (near, far, left, right, top, bottom) снижает расчётные затраты.
  • Фильтрация теней: PCFSoftShadowMap более реалистичен, но медленнее; BasicShadowMap быстрее и подходит для слабых устройств.
  • Программное отключение света для объектов вне сцены: object.layers и camera.layers позволяют исключать ненужное освещение.

Эффективное управление источниками света — фундаментальная часть оптимизации любой сцены в Three.js. Баланс между визуальным качеством и производительностью достигается сочетанием ограничения числа динамических источников, использования статического освещения, корректной настройки теневых карт и внимательного подхода к материалам и камерам.