Смотрел какую-то Ракетную лигу и заметил там анимированные наклейки и колеса.
,
Я хотел бы реализовать нечто похожее на эффекты на изображении выше.
Как мне написать шейдер Unity для создания эффекта колеса?
Я не очень разбираюсь в шейдерах, но могу ли я отредактировать стандартный шейдер Unity для создания эффекта анимации?
_Time
переменную, которую вы можете добавить к своим координатам текстуры в (вершинном) шейдере, чтобы получить эффект прокрутки очень дешево. Эффект шестиугольника тоже будет довольно простым. Если вы отредактируете свой вопрос, чтобы выделить только один эффект и спросите «как бы я реализовал это в шейдере Unity», мы, вероятно, поможем вам. Обязательно укажите, должен ли шейдер реагировать на освещение / затенение, поскольку это влияет на то, как оно будет написано.Ответы:
Я построю это в несколько слоев, чтобы вы могли видеть, как это происходит вместе.
Начните с создания нового шейдера в Unity, выбрав
Create --> Shader --> Unlit
либо в меню «Ресурсы», либо в контекстном меню правой кнопкой мыши в окне «Проект».В верхнем блоке мы добавим
_ScrollSpeeds
параметр для управления скоростью перемещения текстуры в каждом направлении:Это открывает новое 4-компонентное свойство с плавающей точкой в инспекторе материалов с понятным названием «Скорости прокрутки» (аналогично добавлению переменной
public
илиSerialized
переменной вMonoBehaviour
сценарий).Далее мы будем использовать эту переменную в шейдере Vertex для смещения координат текстуры (
o.uv
), добавив всего две строки в шейдер по умолчанию:Наденьте это на четверку (с прекрасной бесплатной текстурой жирафа от Кенни ), и вы получите:
Чтобы получить текстуру, прокручивающуюся наружу в кольце, мы могли бы просто использовать сетку, подразделенную как паутина, с координатой uv v, увеличивающейся от центра наружу. Но это даст некоторые артефакты в форме пилы. Вместо этого я покажу, как мы можем рассчитать наши UV для каждого фрагмента.
Это немного дороже, как из-за операций trig и length (которые стоят дороже, чем базовая математика), так и потому, что не так эффективно прогнозировать и кэшировать данные текстуры в аппаратном обеспечении при расчете текстовых координат по фрагментам, по сравнению с простой их интерполяцией. между вершинами. Но для такого небольшого особого эффекта это не чрезмерно.
Это дает нам что-то вроде этого (здесь я увеличил параметры листов в материале, чтобы было яснее, что происходит - наматывание только одного повторения плитки вокруг круга выглядит искаженным и странным)
Наконец, чтобы подкрасить текстуру градиентом прокрутки, мы можем просто добавить градиент в качестве второй текстуры и умножить их вместе.
Сначала мы добавляем новый параметр текстуры вверху:
И объявите это в нашем блоке CGPROGRAM, чтобы шейдер CG мог видеть это:
Затем обновите наш фрагментный шейдер, чтобы использовать обе текстуры:
И теперь наш жираф становится действительно триповым:
С немного более художественным выбором текстур и скоростей прокрутки это может создать эффект, очень похожий на тот, который показан в вопросе.
Вы можете заметить два небольших артефакта с версией, которую я показал выше:
Лица около центра круга становятся растянутыми / тощими / заостренными, затем, когда они движутся наружу, они становятся раздавленными / широкими.
Это искажение происходит из-за того, что у нас есть фиксированное количество граней по периметру, но окружность, которую они охватывают, увеличивается с увеличением радиуса, а их высота остается неизменной.
Мы можем исправить это, переназначив вертикальный компонент образца текстуры так, чтобы он следовал логарифмической кривой, поэтому повторения текстуры находятся дальше друг от друга по мере увеличения радиуса и ближе к центру. (На самом деле, это дает нам бесконечный регресс маленьких и маленьких жирафов ...)
Есть ряд из одного или двух размытых пикселей по среднему левому краю четырехугольника.
Это происходит потому, что графический процессор просматривает две соседние координаты образца текстуры, чтобы выяснить, какую фильтрацию использовать. Когда сэмплы расположены близко друг к другу, он показывает, что текстура отображается крупно / близко, и показывает наиболее детальный уровень мипов. Когда сэмплы находятся далеко друг от друга, он догадывается, что мы должны показывать текстуру с небольшим увеличением или далеко, и он сэмплирует из более мелкого / размытого мип-карты, чтобы убедиться, что у нас не появятся искрящиеся артефакты наложения.
Проблема в том, что мы находимся в точке разворота в полярных координатах, от -180 до 180 градусов. Таким образом, мы на самом деле выполняем выборку из очень похожих точек в нашем повторяющемся текстурном пространстве, даже если их числовые координаты делают их похожими друг на друга. Таким образом, мы можем предоставить наши собственные векторы градиента выборки, чтобы исправить это.
Вот версия с этими исправлениями:
источник
tex2Dgrad
исправляет артефакт фильтрации, где угол изменяется от -pi до + pi (это тонкая линия размытых пикселей на левой стороне). Вот подкрашенный результат с большим количеством синего