Войти
ПрограммированиеФорумГрафика

Шейдер ветра на траве 2d

Страницы: 1 2 Следующая »
#0
(Правка: 16:25) 16:07, 8 дек. 2018

Привет! Ни у кого не завалялся шейдер на glsl, который симулирует ветер на  2d текстуре травы?
Трава - это спрайт, 2 треугольника. Проекция на треугольники строго сверху(игруха - 2d). или может есть какие нибудь рефы на что-то похожее готовое? я сам в шейдерах не разбираюсь почти, и математика мне увы даётся туговато. Искал на shadertoy.com, но ничего вроде не нашёл похожего.
Более того, не очень понимаю, как это может быть реализовано именно в topdown 2d. Есть предположение, что пиксель можно как бы вытягивать от силы ветра - при это градиентно меняя его цвет на более светлый что ли, будто травинка нагибается. Тогда можно ещё источник света придумать, чтобы менять цвет не только в светлый, но и в тёмный, если гнётся в другую сторону, на источник света например. В общем, модель этого действа мне непонятна, может есть идеи?

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


#1
19:25, 8 дек. 2018

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

#2
21:44, 8 дек. 2018

Проще 10 разных анимаций сделать, чем один такой шейдер.

#3
(Правка: 21:46) 21:45, 8 дек. 2018

https://habr.com/post/425989/

Еще мы шатаем на ветру пшеницу, но тут все просто — вертексный шейдер деформирует x-координаты, при чем учитывает y-составляющую. Чем выше точка, тем сильнее шатать. Это сделано, чтобы шаталась только верхушка, а корень — нет. Плюс — фаза шатания меняется от x/y координат, чтобы разные спрайты на экране качались вразнобой.
Изображение
#4
21:55, 9 дек. 2018

foxes
Спасибо, извиняюсь, я забыл уточнить - вид topdown. игра наподобие alienshooter. то есть персы небольшие, трава тоже. Но в целом вроде сути не поменяет. а есть готовый код, чтобы я его мог адаптировать?
В идеале - шатать травинки - как это делается для 3д игр. хотя я слабо представляют травитки в topdown. наверно это просто линии)

#5
23:33, 9 дек. 2018

self_
> я забыл уточнить
Да у тебя это (про topdown) вроде и в начальной версии вопроса было написано.
Совсем topdown - это Crimsonland. В Alien shooter камера всё-таки под углом ("изометрическая").
Тебе который надо?

> хотя я слабо представляют травитки в topdown.
В Crimsonland-style - почти точки.

#6
(Правка: 1:22) 1:16, 10 дек. 2018

self_
Математика там простая.
invec - входная вершина сетки.
vec3 offset - анимированное смещение. (для примера можно синус от таймера+invec.x взять)
float minh - минимальная высота травинки.
float maxh - максимальная высота травинки.
vec3 newvec = invec + offset * (invec.y-minh)/(maxh-minh); - вершина сетки с анимированным шатанием.

self_
> вид topdown. игра наподобие alienshooter.
а это ни чего не меняет, разные подходы можно применять и там и там.

#7
8:34, 10 дек. 2018

self_
> Трава - это спрайт, 2 треугольника.
Так имелся ввиду спрайт отдельной травинки, а не трава? Тогда да, это не сложно. Но я так понял, что топикстартер хочет анимировать траву прямо на текстуре.

#8
(Правка: 14:21) 14:18, 10 дек. 2018

FordPerfect
Вид строго сверху, нет изометрии. Там да, наверно линии какие то травинками можно представить

#9
14:35, 10 дек. 2018

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

#10
(Правка: 14:38) 14:37, 10 дек. 2018

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

#11
(Правка: 17:39) 16:58, 10 дек. 2018

self_
> То есть если текстуру представить в виде чб матрицы, где ячейка пиксель
> является вершиной травинки
Тут немного другой подход будет. С учетом того что твоя трава будет многослойной ее можно от части рассматривать как спрайт, поскольку за счет слоистости у тебя будет высота и минимум максимум. Единственная разница это как ты  будет ее смещать. Тут уже будут 2D координаты текстуры которые смещаются эффектом distortion. в статье есть нечто похожее.

Изображение Изображение

Справа Distort текстура которую скролируют (саму ее не показали только примененный эффект ко всей картинке целиком), ее тоже можно заменить на sin для начала. Можешь считать это верхним слоем твоей fur травы. И логика тут не сильно поменяется.

inuv - входящие координаты текстуры.
vec2 offset - анимированное смещение. (для примера можно синус от таймера+inuv.x взять)
int levels - количество слоев для fur эффекта.
int level - текущий слой от нижнего 0.
vec2 newuv = inuv + offset * level * (1.0f/levels);

self_
>И при этом раскрашивать эти линии градиентно.
Это уже другой вопрос, раскрашивать то ты в любом случае можешь.

self_
>а чб цвет - высотой, можно при приложении вектора ветра к этой матрице протягивать линии - травинки разной длины.
В принципе если брать не levels  за максимум, а интенсивность цвета то можно тоже получить интересный эффект, но тут уже сам тестируй.
Если ты хочешь их нарисовать именно линиями, а не слоеной текстурой то возвращаемся назад первому варианту.

#12
18:32, 10 дек. 2018

такая что ль трава нужна ? https://youtu.be/7DFHOMeHIoo

#13
(Правка: 19:04) 18:50, 10 дек. 2018

BingoBongo
Дада, очень похоже!  Только 2д надъ. Если есть шейдер этого, то возможно осилю и его в переложении на 2д

#14
19:22, 10 дек. 2018

self_
Это и есть 2д - весь вывод происходит отрисовкой двух треугольников с натянутой текстурой. В общем, забудь про этот вариант, если в шейдерах не разбираешься )
п.с. Видео не мое.

Страницы: 1 2 Следующая »
ПрограммированиеФорумГрафика