Как сделать хищную тень с помощью шейдеров: создание визуальных эффектов в Lightmatter

Итеративная разработка главной фишки игры.

Программист визуальных эффектов в студии Tunnel Vision Games Бенджамин Овергаард рассказал на сайте Gamasutra о работе над необычным визуальным стилем Lightmatter. Это особенно важная тема для игры, потому что в ней тьма несёт смерть, из-за чего пользователь должен чётко улавливать разницу между опасными и безопасными участками окружения. Мы выбрали из текста главное.

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

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

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

По словам Овергаарда, при создании контраста между тьмой и светом ему помог текст одного из разработчиков стелс-игры Aragami — это помогло найти код для модели отложенного освещения в Unity. В результате получалось более плоское рассеянное освещение, но при этом сохранялось стандартное зеркальное отражение для фрагментов, находящихся на свету.

Как сделать хищную тень с помощью шейдеров: создание визуальных эффектов в Lightmatter

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

Как сделать хищную тень с помощью шейдеров: создание визуальных эффектов в Lightmatter

Также возникла проблема с тем, что разработчики не могли справиться с нагрузкой, поэтому команде пришлось искать способ упрощения создания текстур и объектов. Тогда Овергаард, вдохновившись примером игры White Night, поэкспериментировал с шейдером постобработки edge detection, который давал детали без необходимости создавать множество текстур и сложных моделей.

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

Как сделать хищную тень с помощью шейдеров: создание визуальных эффектов в Lightmatter
Как сделать хищную тень с помощью шейдеров: создание визуальных эффектов в Lightmatter

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

Как сделать хищную тень с помощью шейдеров: создание визуальных эффектов в Lightmatter

Другой важный аспект — определение границ: без изменения интенсивности линии выглядели очень плоскими, адвоичный вывод делал их неровными. Основываясь на советах графического программиста из Playdead Миккеля Джоэла, вместо двоичного вывода Овергаард использовал исходную информацию о глубине и разнице нормалей для управления интенсивностью цвета линии. Так он добился более мягких и выцветших линий.

Как сделать хищную тень с помощью шейдеров: создание визуальных эффектов в Lightmatter
Как сделать хищную тень с помощью шейдеров: создание визуальных эффектов в Lightmatter

По словам Овергаарда, хоть обнаружение границ и улучшилось, всё ещё оставались проблемы с алиасингом. Чрезмерно детальное обнаружение границ вызывало сильные контрасты в геометрии. Особенно это было заметно на трещинах, если смотреть под углом и на расстоянии. Решением стал временной анти-алиасинг в Unity, основанный на работе студии Playdead. Но это не решило проблему полностью.

Красным овалом обозначена проблема с алиасингом, которую пытались решить разработчики
Красным овалом обозначена проблема с алиасингом, которую пытались решить разработчики

Поэтому студия вместе с Alexandra Institute начала искать индивидуальное решение для временного сглаживания (temporal anti-aliasing), которое на самом деле представляет собой модификацию решения Playdead.

Здесь можно увидеть, что разработчикам удалось справиться с алиасингом
Здесь можно увидеть, что разработчикам удалось справиться с алиасингом

Чтобы усилить объёмность картинки, Овергаард решил добавить отражения к отложенному освещению — оказалось, что в нём уже была заложена такая возможность, поэтому разработчику оставалось лишь найти подходящие значения.

До
До
После
После
Такие отражения выглядели хорошо далеко не на всех объёктах, поэтому разработчикам пришлось подходить к каждому случаю индивидуально
Такие отражения выглядели хорошо далеко не на всех объёктах, поэтому разработчикам пришлось подходить к каждому случаю индивидуально

На ранних стадиях разработки команда понимала, что тени должны визуально угрожать игроку. Сперва Овергаард придумал искажать белые линии как на изображении ниже.

Но это решение не очень хорошо работало в контексте игры. Из-за отложенного освещения вся геометрия визуализируется заранее, поэтому можно было только искажать теневые области в постобработке, из-за чего нельзя было показывать всё, что находится позади объекта.

Когда игрок попадает в тень, он медленно погружается в неё как в зыбучие пески, а не умирает сразу — авторы хотели, чтобы игрок понимал, что с ним произошло. Они вдохновлялись Веномом из Marvel, потому что хотели сделать тень по-настоящему зловещей.

Благодаря поведению тени и отражениям внутри неё, создаётся ощущение настоящей опасности. Овергаард хотел добиться этого с помощью эффекта Screen Space Reflection (SSP) — он пришёл к выводу, что вариант Kode80SSR обладает наименьшим количеством артефактов и легче всего поддается изменению.

SSR применятся только к тени на полу, благодаря проверке чёрных пикселей в кадровом буфере и восходящих нормалях в текстурах с нормалями глубины (depth-normals texture). Затем достаточно исказить SSR с помощью UV-смещения, чтобы отражение двигалось.

Без движения
С движением

Чтобы сделать даунсемплинг менее заметным, разработчик написал отдельный шейдер-пасс для искажения SSR. Также ему пришлось сделать так, чтобы отражение не напоминало воду, а самой тени добавил синеватый оттенок, чтобы сделать её более потусторонней.

Финальный результат

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

Тем не менее студия хотела добавить драматизма и передать настоящее ощущение того, что игрок тонет во тьме. Для вдохновения разработчики взяли Splatoon, в которой персонажи также могли потонуть в густой жидкости — краске.

В следующей итерации Овергаард продлил эффект погружения. Также он добавил эффект колебаний, который даёт понять, что что-то идёт не так.

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

Овергаард сделал множество других эффектов для других элементов игры, но он решил не расписывать подробно процесс их создания.

Для луча разработчик создал шейдер смещения вершин с HDR выводом. Для света, испускаемого лучом, он написал шейдер освещения, основанный на принципах трубчатой лампы
Шейдер кристалла основан на интерполяции между отражениями кубической карты и HDR вывода для эффекта bloom
Шейдер стеклянного шара: GrabPass (повторно используемая текстура) с преломлением на нормалях, обращённых в сторону от камеры, а также применение эффекта Френеля
Отражение стекла: UV-смещение, направленное в сторону камеры и основанное на скалярном произведении заданного вектора стекла, а также применение эффекта Френеля

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

7676
35 комментариев

А вы тоже добавляете подобные темы в закладки, надеясь что однажды вы начнёте осваивать 3D, а потом к хуям на все забиваете?

18

У меня на полном серьезе 8 лет в хроме висит закладка "как стать продуктивнее и перестать откладывать дела на потом"

До сих пор не нахожу времени прочитать  

12

Я надеюсь когда нибудь пройти талос, но потом к херам на него забиваю.

4

хищная тень - вашта нерада?

5

щас она сделает тебе кусь

1

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