Как создать сел-шейдинг освещение для пиксель-арта — короткий туториал

Здесь нет обводки, но зато есть чёткое деление на разные зоны освещённости.

Инди-разработчик Джордж Грин показал в Твиттере, как создал шейдер пикселизации, который позволяет повторить эффект сел-шейдинга. Он использует эту технику в собственной игре Bone to Pix. Пересказываем его туториал.

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

Пример неправильного расчёта

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

Сначала привязываем вершины в шейдере вершин.

Как создать сел-шейдинг освещение для пиксель-арта — короткий туториал

Затем привязываем отдельные позиции фрагментов, чтобы всё, что находится в одном квадрате сетки, имело одинаковое значение.

Как создать сел-шейдинг освещение для пиксель-арта — короткий туториал
Как создать сел-шейдинг освещение для пиксель-арта — короткий туториал

Наконец, убедитесь, что в настройках импорта текстур для Mesh Type установлено значение «Full Rect». Если оставить значение «Tight» пиксели изображения не будут выровнены в сгенерированной сетке, поэтому вы получите неправильные значения.

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

Сейчас Грин работает над улучшением шейдера, которое позволит сделать более плавные переходы между уровнями освещённости объектов
Сейчас Грин работает над улучшением шейдера, которое позволит сделать более плавные переходы между уровнями освещённости объектов
189189
13 комментариев

Прикольно!
Но мне интересно, когда инди разработчики додумаются делать не просто пиксель арт, а эмуляцию CRT, как изначально и задумывалось? Вообще странно, что инди разрабы пытаются косить под ретро делая все тупо из пикселей. На современных экранах это не работает, будто они не помнят или вообще не знают как это выглядело тогда.

26
Ответить

Согласен, любопытно было бы посмотреть. Но ведь такие игры должны же уже быть, неужели никто не угарел и не настроил так графон в своей пиксельной игре. Мб кто знает проекты такие?

Ответить

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

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

Ответить

О прикольно, я такое же в блендере настроил

9
Ответить

Покажи плз скрин нод

4
Ответить

Глядя на первую гифку подумал что он ещё и дизеринг запилил, а потом дочитал до конца и оказалось, что это просто компрессия самой гифки такая :(

5
Ответить

Мне вот кажется, что когда источник света приближается к объекту, то самая яркая область должна становиться больше, а более тёмные меньше или исчезать совсем. А тут происходит наоборот – самая яркая область исчезает при приближении.

3
Ответить