При работе с Three.js ключевым фактором производительности является освещение сцены. Источники света напрямую влияют на нагрузку GPU и время рендеринга, особенно при использовании теней, объемного света или большого количества динамических источников. Важно понимать, какие типы света существуют и как минимизировать их влияние на FPS.
Three.js предоставляет несколько основных типов источников света:
AmbientLight Обеспечивает равномерное освещение всех объектов сцены. Не создает теней и не требует сложных вычислений. Практически не влияет на производительность, но не дает объема объектам.
DirectionalLight Имитация солнца: лучи
параллельны и направлены в определенную сторону. Позволяет создавать
тени с использованием shadow.map. Основная нагрузка
возникает при активации теней, особенно при высокой разрешающей
способности теневой карты.
PointLight Свет, излучаемый во все стороны от одной точки. Создает реалистичные локальные источники, но теневые расчеты для него тяжелые, так как создается кубическая тенёвая карта (6 сторон).
SpotLight Фокусированный источник света с ограниченным углом. Позволяет получать выразительные сценические эффекты и тени с контролируемым радиусом. Эффективность зависит от угла и разрешения теневой карты.
HemisphereLight Простое освещение, имитирующее свет неба и отраженный свет от земли. Не создает теней, низкая нагрузка на GPU.
Количество источников света Каждый динамический
источник света с тенями увеличивает вычислительную нагрузку. Например,
добавление пяти PointLight с тенями может снизить FPS на
слабых устройствах до половины.
Теневые карты
shadow.mapSize) критически влияет на
производительность.Тип материалов Материалы
MeshStandardMaterial и MeshPhysicalMaterial
используют физически корректное освещение (PBR), что требует больше
ресурсов при наличии нескольких источников света. Материалы
MeshBasicMaterial игнорируют свет, что позволяет полностью
исключить влияние источников на рендеринг.
Функция
renderer.physicallyCorrectLights Включение
физически корректного освещения увеличивает реализм, но каждый свет
потребляет больше ресурсов, особенно при расчете интенсивности и
затухания.
Ограничение числа источников света
AmbientLight для базового освещения и экономить
динамические источники.Статические и baked light
Lightmap).Lightmap позволяет запекать теневые и диффузные эффекты
в текстуры, избавляясь от необходимости расчета теней в реальном
времени.Снижение разрешения теневых карт
light.shadow.mapSize.width и
light.shadow.mapSize.height позволяет гибко балансировать
качество и FPS.Использование frustumCulled
object.frustumCulled = true уменьшает
нагрузку на рендер.Пакетирование и LOD источников света
AmbientLight или
HemisphereLight.shadow.camera для
DirectionalLight: уменьшение объема камеры теней
(near, far, left,
right, top, bottom) снижает
расчётные затраты.PCFSoftShadowMap
более реалистичен, но медленнее; BasicShadowMap быстрее и
подходит для слабых устройств.object.layers и camera.layers
позволяют исключать ненужное освещение.Эффективное управление источниками света — фундаментальная часть оптимизации любой сцены в Three.js. Баланс между визуальным качеством и производительностью достигается сочетанием ограничения числа динамических источников, использования статического освещения, корректной настройки теневых карт и внимательного подхода к материалам и камерам.