Найти в Дзене
52 подписчика

Почему стоит делать градиенты шейдерами?


Недавно вышел ролик про градиенты на шейдерграфе. Там конечно супер простой пример, но на мой взгляд там недостаточно раскрывается почему так стоит делать. Когда-то я писал целую статью про это. Но думаю стоит ещё раз упомянуть коротко и тезисно. Почему стоит делать градиенты шейдерами?

Они плохо компрессируются

Чаще всего алгоритмы сжатия типа того же ETC2 делают условно "лесенку" на градиентах. В целом посмотреть на разные артефакты можно в этой статье от nvidia по ASTC.

Они много весят

Опять таки текстура в хорошем разрешении для мобильной игры на телефоне с стандартным сжатием, чтобы весь градиент не пошёл лесенкой будет весить 1-2 мб. Шейдер же несколько килобайт и при этом даст идеальное качество.

Это быстрее по производительности

Чаще всего, особенно если не морочиться с поддержкой поворотов и т.п. многие шейдеры градиентов будут работать быстрее, чем самплирование текстуры. Тратить меньше видео-памяти и т.п. Но конечно стоит упомянуть, что так же есть недостаток в батчинге относительно классического шейдера интерфейса. Потому что для того, чтобы меши батчились они должны иметь один материал. Но это не всегда важно, так как не все спрайты можно поместить в один атлас. А из-за огромных размеров градиентов они чаше всего занимают большую часть атласа. Хотя там есть трюк сделать текстуру градиента высотой или шириной в один пиксель :) Тогда она будет занимать немного места в атласе)

Собственно в репозитории можно посмотреть реализацию. Там повтор всех фигмовских градиентов. Хотя не во всём удобный. https://github.com/Nox7atra/Unity-Figma-Gradients

Менее общее решение, но так же "валидное" с сохранением батчинга можно сделать через кастомный UI элемент. Это элементарно для того же линейного градиента. Дело в том, что шейдер используемый в UI для цвета использует информацию из Vertex Color (и то, что вы видите в компоненте Image, просто переписывает VertexColor меша. Поэтому можно через механизмы вроде Vertex Helper генерировать кастомный меш, написав в вершины нужные цвета, а дальше интерполяция всё решит за вас. И это будет вместе с батчингом и стоить +- ничего, ни по весу, ни по производительности, относительно классического подхода с UI.
1 минута