2D Raytracing игра с искажениями

Статья о том как работает 2D Raytracing, примеры его необычного использования для создания эффектов, а также WebGl демка и ассет для Unity Urp.

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

Ссылки на WebGl демку и репозиторий для Unity Urp в низу статьи.

Cтатья направлена на то чтобы простыми словами объяснить как что работает 2D Raytracing реализованный через фрагментный шейдер. Тема расширяется игрой искажениями для создания эффектов что можно попробовать самому в WebGl демке или самому скачав ассет с GitHub для Unity Urp.

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

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

Идея ее достаточно простая, это заранее посчитать ближайшее расстояние до каждого объекта и записать ее в текстуру из которой потом будет браться смещение для каждого нового шага луча. Таким образом чтобы не пропустить и попасть в ближайший объект. Это очень сильно сокращает количество шагов и делает их не зависимым от разрешения текстуры. (DistanceMap называют SDF картой, но это более математический концепт который имеет мало общего с финальной реализацией, несмотря на общую суть - определять в пространстве расстояние до объекта)

Считается следующим образом. В буфер рисуются координаты объектов в экранном пространстве, потом заполняют собой ближайшее пространство с помощью с помощью Flood Fill алгоритма (заполнение жидкостью) , а точнее его оптимизированной версией для видеокарт JFA (Jump Flood Algorithm) алгоритма.

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

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

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

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

Обычный рейтрейсинг на этом заканчивается, побдирается разрешение, количество лучей, применяется текстура шума, результат размывается и высветляется(bloom эффект) чтобы сгладить неровности и провалы.

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

Играясь с параметрами, такими как

Можно найти довольно интересные эффекты и применения. Сделать что то абстрактное или стилизованное. Вот некоторые примеры. Больше можно посмотреть и поэкспериментировать в WebGl демке на itch.io