Атмосфера: туман, фон, окружение

Несколько штрихов превращают «объекты в пустоте» в атмосферную сцену. Добавляем туман, фон и окружение.

Глубину и настроение сцене дают три вещи: туман (растворяет даль), фон (цвет или картинка за объектами) и карта окружения (реалистичные отражения).

Туман (Fog)

Туман подмешивает свой цвет к объектам по мере удаления: близкие видны чётко, дальние растворяются. Он не только красив, но и практичен — прячет «обрыв мира» на дальней плоскости far и позволяет не рисовать далёкие объекты в полную силу.

// цвет, ближняя граница, дальняя граница
scene.fog = new THREE.Fog(0x223344, 5, 30);
// удобно совпадает с цветом фона:
scene.background = new THREE.Color(0x223344);

Между near и far тумана объект плавно сливается с цветом. Чтобы эффект был естественным, цвет тумана обычно делают равным цвету фона.

Фон сцены

Свойство scene.background задаёт, что за объектами. Варианты:

Карта окружения (environment map)

Чтобы металл и стекло выглядели правдоподобно, им нужно что-то отражать. Карта окружения — это панорама (часто HDR-картинка), которую материалы используют для отражений и мягкой подсветки. Задают её через scene.environment.

scene.environment = envTexture; // PBR-материалы начнут отражать окружение
// часто ту же текстуру ставят и фоном:
scene.background = envTexture;

Эффект особенно заметен на материалах с высокой metalness и низкой roughness: без окружения металл выглядит мёртвым, с ним — оживает бликами. Карту окружения обычно загружают из HDR-файла через специальный загрузчик (RGBELoader из addons) и при необходимости предобрабатывают, чтобы она корректно работала как источник освещения.

Туман и производительность

У тумана есть приятный бонус помимо красоты. Раз дальние объекты всё равно сливаются с фоном, их детали не важны — можно ставить дальним объектам грубые модели (LOD), реже обновлять, а совсем далёкие и вовсе не рисовать. То есть туман — это не только настроение, но и честный повод сэкономить кадры. В больших открытых сценах его используют именно так: ограничивают видимую дальность и прячут её границу туманом, чтобы пользователь не замечал «обрыва мира».

Помимо линейного Fog есть экспоненциальный FogExp2 — он сгущается с расстоянием нелинейно и часто выглядит естественнее для атмосферной дымки. Параметр у него один — плотность (density).

Что выбрать

• Минимум усилий: сплошной background + лёгкий fog того же цвета — уже выглядит цельно.
• Реализм: добавьте environment с HDR-панорамой — материалы заиграют отражениями.

Итог

• Fog растворяет даль, добавляет глубину и прячет границу видимости.
• scene.background — цвет, картинка или панорама за объектами.
• scene.environment даёт отражения и подсветку, особенно металлу и стеклу.