Да, да... Это реалтайм. Да, она крутится. Да, в перспективе. Да, светится. Нет, это не фотошоп. Фотошоп был тут:

 

Powered by quad-engine

Сегодня запись посвящена созданию 2д освещению. А именно рейтрейсингу теней. Оговорюсь сразу, Идею я практически полностью повзаимствовал (за исключением моих доработок) у Catalin Zima. Так как идея приглянулась, а алгоритм расписан, я приступил к созданию. Однако, у автора статьи были толи ошибки в описании, местами недоговорки, поэтому пришлось повозиться.
Итак. Как сказано у автора сначала надо отрендерить альфаканалы в пустой рендертаргет для получения ЧБ изображения. Сразу же следует первая оговорка. Центр рендертаргета это источник света. Так что если у Вас источник не ровно по центру, рендерить в рендертаргет надо все со смещением. Это важно!

Хорошо, дальше надо все это безобразие немного раскрасить. Точнее сказать надо погасить интенсивность "стенок" от центра к краю. Для наглядности в красном цвете

 

 Дальше начинается очень интересная часть процесса. Дело в том, что левую и правую часть изображения надо "развернуть"! Суть в том, чтобы представить картинку в виде песочных часов >< а далее растянуть треугольники до прямоугольников. И тоже самое сделать в вертикальной составляющей. Полученные результаты дадут нам каждый луч идущий из центра картинки до края, но все эти лучи будут параллельны и лежать на одной картинке. В разных цветовых каналах соотвественно. Получаем что-то вроде этого:

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

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

 

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

И, еще раз по вертикали. Зачем тут синий? Чем синее точка, тем сильнее надо размыть (дальность от источника света).

Теперь эту область можно наложить через multiply на свою картинку. Это мы сделаем в финальном шаге. Так как мой пример что-то вроде пакмана, я через мультиплай добавлю "еду" для пакмана :)

Чтобы эффект был эффектнее, добавим нормалмеппинг на "пол". Рендереим саму сцену:

Рендерим стенки и точки-еду на пол:

И финал: Накладываем маску со светом через multiply:

Вопросов данная методика может породить больше чем ответов, поэтому не стесняйтесь спрашивать. На все отвечу.

Как это выглядит "в жизни"

Итак, немного об эволюции шейдера POM. 

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

Чтобы этого избежать, спекуляр был уменьшен до 15%, и был введен ambient источник света, дающий даже в тенях 10% яркость пикселей. Дополнительно был проведен тест с рисованием теней на поверхности. Так больше стало похоже на день:

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

 

Так как вода не плоская, необходимо добавить рябь. Мокрая — блики. Отражающая — отражения облаков.

 

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

 

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

 

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

Ну и на закуску с немного сюрреалистичным ржавым ландшафтом:

Скоро...

Безвозвратно двигаемся в сторону второй альфа-версии. Что же будет нового:

• Создание окошка и управление им средствами IQuadWindow интерфейса.
• Спрайтовый движок и интерфейс IQuadSprite. Разумеется с проверкой столкновений, анимациями и отбрасыванием невидимых спрайтов из отрисовки.
• Надстройка над IQuadShader для удобной реализации многопроходных поспроцесс фильтров.
• Раскрашивание выводимого через IQuadFont текста посредством тегов.
• Наконец-то IQuadParticles для реализации системы частиц.

Это навскидку. Что-то уже есть, что-то частично.

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

Сегодня никаких эффектов и новых фич. Сегодня анонс немного иного рода. Сегодня под маркой Quad-games  стартуют (точнее сказать анонсируются) две игры, постоенные на quad-engine. Это Rusty War и Void Story.

Rusty Wat представляет из себя классическую двумерную стратегию в реальном времени в стиле Dune и Comand&Conquer.

Void story — научно-фантастический скроллер. Не настолько олдскульный, как Rusty war, но также способный «пробить» на ностальгию уже бывалых игроков.

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