SSAO: окружающее затенение в экранном пространстве

SSAO (Screen Space Ambient Occlusion) — метод имитации мягких теней, возникающих в углублениях, трещинах и местах контакта объектов. Он работает в экранном пространстве, используя глубину и нормали сцены для расчёта затенения, что делает его эффективным для интерактивной графики. В Three.js SSAO реализуется через THREE.SSAOPass, который является частью системы постобработки.

Подготовка сцены для SSAO

Для корректного функционирования SSAO сцена должна содержать:

  1. Геометрию объектов — стандартные меши (THREE.Mesh) с материалами.
  2. Камеру и рендерер:
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
  1. Эффекты постобработки — SSAO не применяется напрямую к сцене, а через EffectComposer.

Настройка EffectComposer

EffectComposer позволяет создавать цепочку постобработки:

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { SSAOPass } from 'three/examples/jsm/postprocessing/SSAOPass.js';

const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

const ssaoPass = new SSAOPass(scene, camera, window.innerWidth, window.innerHeight);
composer.addPass(ssaoPass);

Основные параметры SSAOPass

  • kernelRadius — радиус выборки вокруг каждой точки. Увеличение радиуса делает тени более мягкими, но снижает производительность.
  • minDistance и maxDistance — минимальное и максимальное расстояние для затенения. Позволяют контролировать, насколько близкие объекты влияют на AO.
  • output — режим вывода (THREE.SSAOPass.OUTPUT.Default, SSAO, Blur, Beauty). Используется для отладки.
ssaoPass.kernelRadius = 16;
ssaoPass.minDistance = 0.005;
ssaoPass.maxDistance = 0.1;
ssaoPass.output = SSAOPass.OUTPUT.Default;

Использование нормалей сцены

SSAO требует корректных нормалей. Если материалы используют vertex normals, важно убедиться, что они обновлены:

mesh.geometry.computeVertexNormals();

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

Обновление и рендеринг

При использовании EffectComposer стандартный вызов renderer.render(scene, camera) заменяется на:

function animate() {
    requestAnimationFrame(animate);
    composer.render();
}
animate();

Это гарантирует корректное применение всех пассов постобработки.

Оптимизация SSAO

  1. Снижение разрешения пасса SSAO можно рендерить в меньшем разрешении для повышения FPS:
ssaoPass.setSize(window.innerWidth / 2, window.innerHeight / 2);

  1. Разделение ядра выборки Меньшее значение kernelRadius ускоряет вычисления, но делает тени менее реалистичными. Обычно используется компромисс 8–32.

  2. Размытие SSAOBlurPass позволяет смягчить шум SSAO без увеличения ядра. Three.js использует встроенный блюр при выводе AO.

Применение SSAO с PBR-материалами

SSAO отлично сочетается с физически корректным рендерингом (PBR) через MeshStandardMaterial. При этом тени добавляют реализма, подчёркивая трещины и углубления, особенно на сложных поверхностях:

const material = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.7, metalness: 0.2 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Важно помнить, что SSAO накладывается поверх базового освещения, поэтому его влияние не заменяет источники света.

Динамическая сцена и SSAO

Для движущихся объектов SSAO корректно пересчитывает тени в каждом кадре, но статические объекты можно оптимизировать через предрендеринг AO в текстуру. Однако в Three.js это требует создания отдельного RenderTarget и собственной шейдерной обработки.

Советы по визуальному качеству

  • Использовать мягкое освещение — жёсткие светильники могут перебивать эффект SSAO.
  • Настраивать kernelRadius под масштаб сцены.
  • Комбинировать с тональной коррекцией (ToneMapping) и цветокоррекцией, чтобы AO выглядела естественно.
  • Проверять SSAO в разных разрешениях, так как шум и артефакты проявляются сильнее на низком разрешении.

Расширенные возможности

  • Multi-scale SSAO — комбинирует несколько уровней ядра выборки для улучшенной детализации теней.
  • Ambient Occlusion с отражениями — сочетание SSAO и Screen Space Reflections повышает глубину сцены.
  • Интеграция с HDR — использование THREE.WebGLRenderTarget с HDR позволяет SSAO работать с яркими и контрастными сценами без потери качества.

SSAO в Three.js — мощный инструмент для придания сцене глубины и реализма, особенно при сочетании с PBR и сложным освещением. Его гибкая настройка через SSAOPass и EffectComposer позволяет оптимизировать производительность и визуальное качество под конкретные задачи.

Оглавление