Принципы расчёта освещения в Three.js

Three.js предоставляет гибкую систему освещения, которая позволяет моделировать реалистичное взаимодействие света и объектов в 3D-пространстве. Все источники света в Three.js наследуются от класса THREE.Light, что обеспечивает унифицированный подход к их настройке и применению. Освещение в сцене влияет на материалы объектов, их тени и визуальную глубину.

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

  1. AmbientLight THREE.AmbientLight — равномерное рассеянное освещение, которое не создаёт теней и одинаково освещает все поверхности. Используется для базовой подсветки сцены. Параметры:

    • color — цвет света (можно передавать в формате HEX или THREE.Color).
    • intensity — интенсивность света.

  2. DirectionalLight THREE.DirectionalLight моделирует свет, исходящий от источника на бесконечном расстоянии, как солнечный свет. Он создаёт параллельные лучи и чёткие тени. Основные параметры:

    • position — позиция источника, задаёт направление света.
    • castShadow — включение генерации теней.
    • shadow.mapSize — разрешение карты теней, влияющее на чёткость.

  3. PointLight THREE.PointLight испускает свет во все стороны от точки, создавая эффект лампы или свечи. Важные параметры:

    • distance — радиус действия света.
    • decay — коэффициент затухания интенсивности с расстоянием.

  4. SpotLight THREE.SpotLight создаёт конус света, направленного в определённую область. Используется для сцен, где нужно подсветить конкретный объект. Параметры:

    • angle — угол конуса света.
    • penumbra — мягкость границы конуса.
    • decay и distance — аналогично PointLight.

  5. HemisphereLight THREE.HemisphereLight моделирует свет, приходящий с неба и отражённый от земли. Используется для имитации дневного освещения. Параметры:

    • skyColor — цвет света сверху.
    • groundColor — цвет отражённого света снизу.

Расчёт освещения для материалов

Three.js использует физически корректные модели освещения, основанные на освещении типа Phong, Lambert или PBR (Physically Based Rendering). Выбор материала определяет, как объекты будут реагировать на свет:

  • MeshBasicMaterial — игнорирует свет, отображает только цвет или текстуру.
  • MeshLambertMaterial — учитывает рассеянный свет, не отражает зеркально.
  • MeshPhongMaterial — поддерживает зеркальные отражения и бликовые эффекты.
  • MeshStandardMaterial — современный PBR-материал с физически корректным отражением, отражениями металла и шероховатости.
  • MeshPhysicalMaterial — расширенный PBR, включающий прозрачность, тонкий слой и другие эффекты.

Shadow Mapping и тени

Для создания реалистичных теней в Three.js используется shadow mapping. Тени рассчитываются на основе положения источника света и объектов сцены:

  • Включение теней для источника: light.castShadow = true.

  • Включение теней для объекта: mesh.castShadow = true (отбрасывает тень), mesh.receiveShadow = true (принимает тень).

  • Настройка карты теней:

    light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.shadow.radius = 2;

Shadow mapping использует камеру источника света для рендеринга сцены в текстуру глубины, которая затем применяется для определения, какие участки сцены находятся в тени.

Интенсивность и затухание света

Реалистичное освещение требует правильной настройки интенсивности и затухания:

  • Для PointLight и SpotLight затухание задаётся свойством decay (обычно 2 для физически корректного освещения).
  • Свойство distance ограничивает область действия света.
  • При использовании Physically Correct Lights (renderer.physicallyCorrectLights = true) интенсивность света автоматически учитывает затухание по закону обратных квадратов.

Физически корректное освещение (Physically Correct)

Three.js позволяет активировать режим физически корректного света:

renderer.physicallyCorrectLights = true;

В этом режиме:

  • Интенсивность света соответствует реальным единицам люкс.
  • Рассеяние и затухание света подчиняется законам физики.
  • Материалы PBR корректно взаимодействуют с любым типом источника.

Комбинирование источников света

Для сложных сцен часто используется комбинация нескольких источников:

  • AmbientLight — базовое освещение для сцены.
  • DirectionalLight — имитация солнечного света или ключевого источника.
  • SpotLight / PointLight — локальные акценты.
  • HemisphereLight — для мягкого дневного освещения.

Такое сочетание позволяет получить баланс между реализмом, производительностью и визуальной выразительностью сцены.

Настройка света для оптимизации

  • Использование больших shadow.mapSize улучшает качество теней, но увеличивает нагрузку на GPU.
  • Для динамических сцен рекомендуется ограничивать количество источников света с тенями.
  • Для статических объектов можно использовать baked lighting — предварительно рассчитанные текстуры освещения.

Эти методы позволяют поддерживать высокую производительность при сложной сцене и множестве источников света.

Итоговые принципы расчёта

  1. Каждый тип света имеет свои особенности и область применения.
  2. Материалы определяют, как объекты реагируют на свет.
  3. Тени требуют включения как на источнике, так и на объектах.
  4. Физически корректное освещение обеспечивает реалистичное взаимодействие света и материалов.
  5. Комбинация разных типов света и оптимизация параметров карты теней позволяют достичь реалистичности и производительности одновременно.

Эти принципы являются основой работы с освещением в Three.js и служат фундаментом для создания реалистичных и выразительных 3D-сцен.

Оглавление