Страницы

Поиск по вопросам

четверг, 15 ноября 2018 г.

Шейдеры в unity3d

Рискуя нахватать по шапке, я все таки задам этот вопрос.
Встала необходимость написать шейдер для Unity3d, казалось бы простейший, радиально проявляющееся изображение (как на gif ниже), но с эффектами блюра и градиентной прозрачности. То есть кусок сегмента (например градусов 30), который заполняет изображение - не резко видимый, а с плавным переходом прозрачности (пример на рисунке ниже).
При этом изображение при нулевой прозрачности имеет максимальную заблюренность (хоть на прозрачном и не видно, да и на этом примере не очень понятно, но т.к. при использовании шейдер будет применяться на переходах между фото, то там будет все четко видно) и по мере того, как прозрачность отдельно взятых пикселей уменьшается, уменьшается и степень блюра на них. Таким образом там, где прозрачность 100 (непрозрачный), там блюр = 0.


Прочитав несколько статей все же никак не могу разложить по полочкам это все в голове. Прочитал как именно реализуется размытие по гауссу (усреднение значение rgb ближайших пикселей на спрайте по каждому столбцу/линии), понимаю что к этому необходимо прицепить прозрачность и менять одно в зависимости от другого, но, например, как это все сделать, непосредственно в коде, прицепив еще и анимацию сюда, абсолютно не понимаю (хотя и понимаю что есть св-во _TransVal есть параметр #pragma alpha, который за прозрачность отвечает).
Т.к. писать шейдеры не приходилось ранее и, если честно, те статьи, что нашел в инете, не сильно внесли ясности - именно в вопрос реализации. Cамо понимание что такое шейдер, какие они бывают и зачем - у меня присутствует.
Буду благодарен, если кто-нибудь возьмется поэтапно расписать на примере моей задачи процесс реализации с пояснениями: мол нам нужно это для этого, а это для этого, вот так мы будем изменять блюр, вот так прозрачность, а вот так анимацию присобачим.
UPDATE Чего я смог добиться: Регулируя значения sigma и cutoff собранного мною в бреду непонимания (в силу отсутствия опыта в написании шейдеров) происходит все то что мне необходимо кроме одного НО, спрайт позади всего этого откуда он и как от него избавиться я так и не смог понять.

http://g.recordit.co/rUaGYdynQ3.gif (картинка в большем разрешении).
Данный материал (с шейдером) применен на image. image и canvas в котором они находятся вынесены на слой transparentfx который рендерит отдельная камера (на основной отключен этот слой). Осталось понять как отключить (или убрать из рендера) этот спрайт позади и в минимальном виде задача будет решена (прозрачность на краю заполнения уже не суть важно хотя бы с блюром разобраться).
UPDATE 2 задача решается если выставить на самом Image type filled и крутить ручку fill amount. Но остается непонятным, как по-человечески отключить рендер image'a, оставив рендер только того, что есть.
Результат работы шейдера:

UPDATE от 29 декабря Поняв что с написанием по человечески у меня все не очень, я попробовал использовать Shader Forge и в нем вроде бы добился необходимого эффекта (одного из необходимых). Но получилось очень странно, в том смысле что в окне инспектора в юнити эффект отображался как надо а в сцене гейм он вел себя "упрощенно" так сказать. Смотри гиф ниже для лучшего понимания. Гиф1, окно инспектора. Гиф2, окно игры


Ответ

А стоит все это через единый шейдер городить? Делал бы так:
Чтобы использовать разблуреное изображение вам понадобиться еще одна камера которая через постэффект BLUR будет писать в RenderTexture экран без накладываемого изображения(поместите его в отдельный Layer и в этой камере этот слой выключите). Далее делаем анимацию проявления любой формы которая вас интересует. Cделайте форму с анимированием маски по альфе. А дальше уже все просто, для анимированной формы используем простейший материал который в зависимости от прозрачности текстуры на материале рисует через смешение либо с основной текстуры либо с размытой в RenderTexture.

Комментариев нет:

Отправить комментарий