Карты теней в WebGL: Полное руководство по рендерингу в реальном времени

В мире трехмерной компьютерной графики немногие элементы вносят больший вклад в реализм и погружение, чем тени. Они предоставляют важные визуальные подсказки о пространственных отношениях между объектами, расположении источников света и общей геометрии сцены. Без теней 3D-миры могут казаться плоскими, разобщенными и искусственными. Для веб-приложений на базе WebGL реализация высококачественных теней в реальном времени является признаком профессионального уровня. Это руководство представляет собой глубокое погружение в самую фундаментальную и широко используемую для этого технику: карты теней (Shadow Mapping).

Независимо от того, являетесь ли вы опытным программистом графики или веб-разработчиком, осваивающим третье измерение, эта статья даст вам знания для понимания, реализации и отладки теней в реальном времени в ваших проектах на WebGL. Мы пройдем путь от основной теории до практических деталей реализации, исследуя распространенные подводные камни и передовые методы, используемые в современных графических движках.

Глава 1: Основы карт теней

По своей сути, карты теней — это умная и элегантная техника, которая определяет, находится ли точка в сцене в тени, задавая простой вопрос: «Видна ли эта точка источнику света?» Если ответ «нет», это означает, что что-то блокирует свет, и точка должна быть в тени. Чтобы ответить на этот вопрос программно, мы используем двухпроходный подход к рендерингу.

Что такое карты теней? Основная концепция

Вся техника вращается вокруг рендеринга сцены дважды, каждый раз с разной точки зрения:

• Проход 1: Проход глубины (с точки зрения источника света). Сначала мы рендерим всю сцену из точного положения и ориентации источника света. Однако в этом проходе нас не интересуют цвета или текстуры. Единственная информация, которая нам нужна, — это глубина. Для каждого отрендеренного объекта мы записываем его расстояние до источника света. Эта коллекция значений глубины хранится в специальной текстуре, называемой картой теней или картой глубины. Каждый пиксель в этой карте представляет расстояние до ближайшего объекта с точки зрения света в определенном направлении.
• Проход 2: Проход сцены (с точки зрения камеры). Затем мы рендерим сцену как обычно, с точки зрения основной камеры. Но для каждого отрисовываемого пикселя мы выполняем дополнительное вычисление. Мы определяем положение этого пикселя в 3D-пространстве и затем спрашиваем: «Как далеко эта точка от источника света?» Затем мы сравниваем это расстояние со значением, хранящимся в нашей карте теней (из Прохода 1) в соответствующем месте.

Логика проста:

• Если текущее расстояние пикселя от источника света больше, чем расстояние, сохраненное в карте теней, это означает, что на той же линии обзора есть другой объект, находящийся ближе к свету. Следовательно, текущий пиксель находится в тени.
• Если расстояние пикселя меньше или равно расстоянию в карте теней, это означает, что ничто его не блокирует, и пиксель полностью освещен.

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

Для реализации карт теней в WebGL вам понадобится несколько ключевых компонентов:

• Источник света: Это может быть направленный свет (как солнце), точечный свет (как лампочка) или прожектор. Тип света будет определять, какая матрица проекции используется во время прохода глубины.
• Объект фреймбуфера (FBO): Обычно WebGL рендерит в стандартный фреймбуфер экрана. Для создания нашей карты теней нам нужна цель рендеринга вне экрана. FBO позволяет нам рендерить в текстуру вместо экрана. Наш FBO будет настроен с присоединенной текстурой глубины.
• Два набора шейдеров: Вам понадобится одна шейдерная программа для прохода глубины (очень простая) и другая для финального прохода сцены (которая будет содержать логику расчета теней).
• Матрицы: Вам понадобятся стандартные матрицы модели, вида и проекции для камеры. Крайне важно, что вам также понадобятся матрицы вида и проекции для источника света, часто объединенные в единую «матрицу пространства света».

Глава 2: Детальное рассмотрение двухпроходного конвейера рендеринга

Давайте разберем два прохода рендеринга шаг за шагом, сосредоточившись на роли матриц и шейдеров.

Проход 1: Проход глубины (с точки зрения источника света)

Цель этого прохода — заполнить нашу текстуру глубины. Вот как это работает:

1. Привязка FBO: Перед отрисовкой вы указываете WebGL рендерить в ваш собственный FBO вместо холста (canvas).
2. Настройка области просмотра (viewport): Установите размеры области просмотра так, чтобы они соответствовали размеру вашей текстуры карты теней (например, 1024x1024 пикселей).
3. Очистка буфера глубины: Убедитесь, что буфер глубины FBO очищен перед рендерингом.
4. Создание матриц источника света:
   • Матрица вида источника света: Эта матрица преобразует мир в точку зрения источника света. Для направленного света она обычно создается с помощью функции `lookAt`, где «глаз» — это положение света, а «цель» — направление, в котором он светит.
   • Матрица проекции источника света: Для направленного света, у которого параллельные лучи, используется ортографическая проекция. Для точечных источников света или прожекторов используется перспективная проекция. Эта матрица определяет объем в пространстве (коробку или усеченную пирамиду), который будет отбрасывать тени.
5. Использование шейдерной программы глубины: Это минимальный шейдер. Единственная задача вершинного шейдера — умножить позицию вершины на матрицы вида и проекции источника света. Фрагментный шейдер еще проще: он просто записывает значение глубины фрагмента (его z-координату) в текстуру глубины. В современном WebGL часто даже не нужен пользовательский фрагментный шейдер, так как FBO можно настроить на автоматический захват буфера глубины.
6. Рендеринг сцены: Нарисуйте все объекты в вашей сцене, отбрасывающие тень. Теперь FBO содержит нашу готовую карту теней.

Проход 2: Проход сцены (с точки зрения камеры)

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

1. Отвязка FBO: Переключитесь обратно на рендеринг в стандартный фреймбуфер холста.
2. Настройка области просмотра (viewport): Установите размеры области просмотра обратно на размеры холста.
3. Очистка экрана: Очистите буферы цвета и глубины холста.
4. Использование шейдерной программы сцены: Здесь и происходит волшебство. Этот шейдер более сложный.
   • Вершинный шейдер: Этот шейдер должен делать две вещи. Во-первых, он вычисляет финальную позицию вершины, используя матрицы модели, вида и проекции камеры, как обычно. Во-вторых, он должен также вычислить позицию вершины с точки зрения источника света, используя матрицу пространства света из Прохода 1. Эта вторая координата передается во фрагментный шейдер как varying-переменная.
   • Фрагментный шейдер: Это ядро логики теней. Для каждого фрагмента:
     1. Получить интерполированную позицию в пространстве света из вершинного шейдера.
     2. Выполнить перспективное деление для этой координаты (разделить x, y, z на w). Это преобразует ее в нормализованные координаты устройства (NDC), в диапазоне от -1 до 1.
     3. Преобразовать NDC в текстурные координаты (которые находятся в диапазоне от 0 до 1), чтобы мы могли сэмплировать нашу карту теней. Это простая операция масштабирования и смещения: `texCoord = ndc * 0.5 + 0.5;`.
     4. Использовать эти текстурные координаты для сэмплирования текстуры карты теней, созданной в Проходе 1. Это дает нам `depthFromShadowMap`.
     5. Текущая глубина фрагмента с точки зрения света — это его z-компонента из преобразованной координаты пространства света. Назовем ее `currentDepth`.
     6. Сравнение глубин: Если `currentDepth > depthFromShadowMap`, фрагмент находится в тени. Нам нужно будет добавить небольшое смещение (bias) к этой проверке, чтобы избежать артефакта под названием «теневое акне», который мы обсудим далее.
     7. На основе сравнения определить коэффициент тени (например, 1.0 для освещенного, 0.3 для затененного).
     8. Применить этот коэффициент тени к финальному расчету цвета (например, умножить компоненты окружающего и диффузного освещения на коэффициент тени).
5. Рендеринг сцены: Нарисуйте все объекты в сцене.

Глава 3: Распространенные проблемы и их решения

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

Теневое акне (артефакты самозатенения)

Проблема: Вы можете видеть странные, некорректные узоры из темных линий или муароподобные узоры на поверхностях, которые должны быть полностью освещены. Это называется «теневое акне». Оно возникает потому, что значение глубины, сохраненное в карте теней, и значение глубины, вычисленное во время прохода сцены, относятся к одной и той же поверхности. Из-за неточностей вычислений с плавающей запятой и ограниченного разрешения карты теней, крошечные ошибки могут привести к тому, что фрагмент неверно определит, что он находится за самим собой, что приводит к самозатенению.

Решение: Смещение глубины (Depth Bias). Самое простое решение — ввести небольшое смещение к `currentDepth` перед сравнением. Делая фрагмент немного ближе к источнику света, чем он есть на самом деле, мы «выталкиваем» его из его собственной тени.

float shadow = currentDepth > depthFromShadowMap + bias ? 0.3 : 1.0;

Найти правильное значение смещения — это тонкий баланс. Слишком маленькое — и акне останется. Слишком большое — и вы получите следующую проблему.

Эффект Питера Пэна

Проблема: Этот артефакт, названный в честь персонажа, который умел летать и потерял свою тень, проявляется в виде видимого зазора между объектом и его тенью. Это заставляет объекты казаться парящими или оторванными от поверхностей, на которых они должны лежать. Это прямой результат использования слишком большого смещения глубины.

Решение: Смещение глубины, зависящее от наклона (Slope-Scale Depth Bias). Более надежное решение, чем постоянное смещение, — это сделать смещение зависимым от крутизны поверхности относительно света. Более крутые полигоны более подвержены акне и требуют большего смещения. Более плоские полигоны нуждаются в меньшем смещении. Большинство графических API, включая WebGL, предоставляют функциональность для автоматического применения такого смещения во время прохода глубины, что в целом предпочтительнее ручного смещения во фрагментном шейдере.

Перспективный алиасинг (зубчатые края)

Проблема: Края ваших теней выглядят блочными, зубчатыми и пикселизированными. Это форма алиасинга (ступенчатости). Это происходит потому, что разрешение карты теней конечно. Один пиксель (или тексель) в карте теней может покрывать большую площадь на поверхности в финальной сцене, особенно для поверхностей, близких к камере, или тех, что рассматриваются под скользящим углом. Это несоответствие в разрешении и вызывает характерный блочный вид.

Решение: Увеличение разрешения карты теней (например, с 1024x1024 до 4096x4096) может помочь, но это сопряжено со значительными затратами памяти и производительности и не решает проблему полностью. Настоящие решения лежат в более продвинутых техниках.

Глава 4: Продвинутые техники карт теней

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

Percentage-Closer Filtering (PCF)

PCF — это самая распространенная техника для смягчения краев теней и уменьшения алиасинга. Вместо того, чтобы брать одну выборку из карты теней и принимать бинарное решение (в тени или нет), PCF берет несколько выборок из области вокруг целевой координаты.

Концепция: Для каждого фрагмента мы сэмплируем карту теней не один раз, а по сеточной схеме (например, 3x3 или 5x5) вокруг спроецированной текстурной координаты фрагмента. Для каждой из этих выборок мы выполняем сравнение глубины. Финальное значение тени — это среднее всех этих сравнений. Например, если 4 из 9 выборок находятся в тени, фрагмент будет затенен на 4/9, что приводит к плавной полутени (мягкому краю тени).

Реализация: Это полностью делается внутри фрагментного шейдера. Это включает в себя цикл, который итерируется по небольшому ядру, сэмплируя карту теней при каждом смещении и накапливая результаты. WebGL 2 предлагает аппаратную поддержку (`texture` с `sampler2DShadow`), которая может выполнять сравнение и фильтрацию более эффективно.

Преимущество: Значительно улучшает качество теней, заменяя жесткие, ступенчатые края на плавные, мягкие.

Недостаток: Производительность снижается с увеличением количества выборок на фрагмент.

Каскадные карты теней (CSM)

CSM — это стандартное отраслевое решение для рендеринга теней от одного направленного источника света (например, солнца) на очень большой сцене. Оно напрямую решает проблему перспективного алиасинга.

Концепция: Основная идея в том, что объекты, близкие к камере, требуют гораздо более высокого разрешения теней, чем объекты, находящиеся далеко. CSM делит усеченную пирамиду видимости камеры (view frustum) на несколько секций, или «каскадов», по ее глубине. Затем для каждого каскада рендерится отдельная, высококачественная карта теней. Каскад, ближайший к камере, покрывает небольшую область мирового пространства и, таким образом, имеет очень высокое эффективное разрешение. Более дальние каскады покрывают все большие области с тем же размером текстуры, что приемлемо, потому что эти детали менее заметны игроку.

Реализация: Это значительно сложнее.

1. На CPU разделите frustum камеры на 2-4 каскада.
2. Для каждого каскада вычислите плотно прилегающую ортографическую матрицу проекции для света, которая идеально охватывает этот участок frustum.
3. В цикле рендеринга выполните проход глубины несколько раз — по одному для каждого каскада, рендеря в отдельную карту теней (или в область атласа текстур).
4. В финальном фрагментном шейдере сцены определите, к какому каскаду принадлежит текущий фрагмент, основываясь на его расстоянии от камеры.
5. Сэмплируйте карту теней соответствующего каскада для расчета тени.

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

Variance Shadow Maps (VSM)

VSM — это еще одна техника для создания мягких теней, но она использует другой подход, отличный от PCF.

Концепция: Вместо хранения только глубины в карте теней, VSM хранит два значения: глубину (первый момент) и квадрат глубины (второй момент). Эти два значения позволяют нам вычислить дисперсию распределения глубины. Используя математический инструмент, называемый неравенством Чебышёва, мы можем оценить вероятность того, что фрагмент находится в тени. Ключевое преимущество заключается в том, что текстуру VSM можно размывать с помощью стандартной аппаратно-ускоренной линейной фильтрации и мипмэппинга, что математически некорректно для стандартной карты глубины. Это позволяет создавать очень большие, мягкие и плавные полутени с фиксированными затратами производительности.

Недостаток: Главный недостаток VSM — это «просачивание света», когда свет может проникать сквозь объекты в ситуациях с перекрывающимися окклюдерами, так как статистическая аппроксимация может давать сбой.

Глава 5: Практические советы по реализации и производительности

Выбор разрешения карты теней

Разрешение вашей карты теней — это прямой компромисс между качеством и производительностью. Большая текстура обеспечивает более четкие тени, но потребляет больше видеопамяти и требует больше времени на рендеринг и сэмплирование. Распространенные размеры включают:

• 1024x1024: Хорошая отправная точка для многих приложений.
• 2048x2048: Предлагает заметное улучшение качества для настольных приложений.
• 4096x4096: Высокое качество, часто используется для ключевых объектов или в движках с надежным отсечением (culling).

Помните, что использование памяти масштабируется квадратично; текстура 4096x4096 использует в 16 раз больше памяти, чем текстура 1024x1024.

Оптимизация frustum источника света

Чтобы получить максимальную отдачу от каждого пикселя в вашей карте теней, крайне важно, чтобы проекционный объем света (его ортографическая коробка или перспективный frustum) был как можно более плотно подогнан к элементам сцены, которым нужны тени. Для направленного света это означает подгонку его ортографической проекции так, чтобы она охватывала только видимую часть frustum камеры. Любое потраченное впустую пространство в карте теней — это потраченное впустую разрешение.

Расширения и версии WebGL

WebGL 1 против WebGL 2: Хотя карты теней возможны в WebGL 1, они намного проще и эффективнее в WebGL 2. WebGL 1 требует расширения `WEBGL_depth_texture` для создания текстуры глубины. В WebGL 2 эта функциональность встроена. Более того, WebGL 2 предоставляет доступ к теневым сэмплерам (`sampler2DShadow`), которые могут выполнять аппаратно-ускоренный PCF, предлагая значительный прирост производительности по сравнению с ручными циклами PCF в шейдере.

Отладка теней

Тени могут быть notoriamente сложными для отладки. Единственная самая полезная техника — это визуализировать карту теней. Временно измените ваше приложение, чтобы рендерить текстуру глубины от конкретного источника света прямо на квад на экране. Это позволяет вам видеть именно то, что «видит» свет. Это может немедленно выявить проблемы с матрицами вашего света, отсечением по frustum или рендерингом объектов во время прохода глубины.

Заключение

Рендеринг теней в реальном времени — это краеугольный камень современной 3D-графики, превращающий плоские, безжизненные сцены в правдоподобные и динамичные миры. Хотя концепция рендеринга с точки зрения источника света проста, достижение высококачественных, свободных от артефактов результатов требует глубокого понимания лежащей в основе механики, от двухпроходного конвейера до нюансов смещения глубины и алиасинга.

Начав с базовой реализации, вы можете постепенно решать распространенные артефакты, такие как теневое акне и зубчатые края. Оттуда вы можете поднять качество вашей графики с помощью продвинутых техник, таких как PCF для мягких теней или каскадные карты теней для крупномасштабных окружений. Путь в рендеринг теней — это прекрасный пример сочетания искусства и науки, которое делает компьютерную графику такой увлекательной. Мы призываем вас экспериментировать с этими техниками, расширять их границы и привносить новый уровень реализма в ваши проекты на WebGL.