Gamedev
Глеб Алексеев
8821

О том как я делал шейдер птички :>

В закладки
Слушать

Всем привет!
Я в сети гуляю под ником glebster51 впервые надумал написать статью...
Решил рассказать вам о небольшой поделке своей, не судите строго :3

Все началось с того, что я увидел гифку в твиттере у одного разработчика (@OskSta), на которого я подписан, и подумал почему бы не попробовать повторить?!:D

чувак сумасшедшие вещи делает, от которых просто крышу срывает!

К примеру вот этих птиц.

Итак, ПОЕХАЛИ!

сперва я сделал простую модельку, отдаленно напоминающую птицу, чтобы было с чем работать! :D

делал ее в Unity с помощью встроенного плагина ProBuilder

Далее я создал новый Amplify шейдер, и начал думать…

птица должна махать крыльями, значит шейдер как то должен понимать где у нее крылья и тело…

следующим шагом я решил высчитать маску для эффекта смещения, чтобы отделить крылья от тела.

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

вынес два параметра MaskX и SizeMask чтобы настроить маску под мою модель…для наглядности я вывел маску вместо текстуры. Белое — то что будет сильнее подвержено деформации, черное то что останется неподвижным.

Далее я заставил ее махать крыльями, по сути просто сдвигать локальную позицию вертекса по вертикали и умножая на синус от времени, домножив на полученную ранее маску.

это основная мысль которая немного видоизменилась в последствии… но даже с такой простой формулой птица уже может делать вид, что машет крыльями!)

Но суть в том, что в реальности птицы машут крыльями немного сложнее…Чем то отдаленно напоминая плавание «брасом» но более плавающим и ускоренным.

Я добавил смещение по горизонтали и по направлению взгляда, чтобы крылья совершали «загребательное» движение и гнулись в верхней точке в сторону центра.

Еще крылья у птиц гнутся волнообразно, борясь с сопротивлением воздуха, пока основная кость уже разрезает воздух, в итоге кончик крыла всегда отстает по времени от основания крыла.

Учитывая все это можно получить вполне правдоподобные взмахи крылом.

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

Следующей фазой я решил взяться за подъем и парение птицы. При наклоне вверх, птица должна сильнее махать крылышками и вообще не махать, когда она снижается…

с помощью вычисления DotProduct (Скалярное произведение) между двумя векторами, взглядом птицы и мировой вертикальной оси, я могу узнать насколько сильно накренилась птица.

Это буквально угол в значениях от -1 до 1, где минус единица, это разворот на 180, смотрит вниз, а единица, это направление точно вверх.

в итоге я вычислил значение крена, и умножаю его на полученный ранее вектор смещения, чтобы получить:

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

полученный вектор и предыдущее значение смещения при наклоне я линейно интерполирую между собой в зависимости от наклона.И вот, птица умеет поджимать крылышки :3

в самом конце всю полученную информацию я смешиваю и получаю финальный сдвиг вертекса…

весь шейдер в итоге выглядит так:

затем я немного доработал модельку птицы)

В итоге у меня получились вот такие вот птички :D

16к птиц в кадре без просадок :3

Конечно же, у @OskSta реализация явно гораздо хитрее и лаконичнее, но суть всегда в том, что подобные вещи всегда состоят из кучи маленьких деталей, простых по отдельности, и их не сложно повторить.Надеюсь кому нибудь моя писанина окажется интересной, и в следующий раз я возможно заставлю этих птиц не только махать крыльями, но и летать! :D

Всем кто дочитал до конца, спасибо за внимание, отпишитесь о своих впечатлениях, мне будет интересно узнать, как вам моя первая статья? :D

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

{ "author_name": "Глеб Алексеев", "author_type": "self", "tags": ["\u0448\u0435\u0439\u0434\u0435\u0440\u044b","\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f","unity","shaders","shader","glebster51","gamedev","animation"], "comments": 76, "likes": 587, "favorites": 429, "is_advertisement": false, "subsite_label": "gamedev", "id": 113216, "is_wide": false, "is_ugc": true, "date": "Sun, 15 Mar 2020 20:44:02 +0300", "is_special": false }
0
76 комментариев
Популярные
По порядку
Написать комментарий...
59

Круто! Жму твою руку чувак!

Ответить
36

*крыло

Ответить
10

Покажи справку перед тем как жать руку. 

Ответить
16

1 птица не машет крыльями брасом, это повеселело, и нарисованный от руки голубь плохой пример, посмотри замедленную съёмку реальных птиц в частности как они загребают воздух. 

Нужно по оси крыльев в длину (она у тебя жёлтенькая кружок) скручивать крылья в одну сторону при подъёме и скручивать в другую при спуске. Тогда у тебя получится что плоскость крыльев "гонят волну".

2 "весь шейдер в итоге выглядит так" весь шейдер должен выглядеть как кусок кода если уж ты решил поделится.

С этими шейдерами ситуация на DTF как будто статьи пишутся не для того что бы чему то научить, а просто повыёбываться.

Спасибо.

Ответить
25

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

Ответить
7

Как орнитолог говорю - забей. В простеньких играх никто не критикует анимации лоуполи птичек) 
Хотя вот фоновые птицы в ассасинах меня напрягают

Ответить
11

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

Ответить
4

чел всё равно производит вычисления смещая крыло для "браса" ему просто нужно поменять ось, о какой экономии идёт речь?

Ответить
4

Я думаю речь идёт о «анимировать шейдером» vs «анимировать костями». В частности в Юнити Skinned Mesh Renderer достаточно ресурсоемкий и если таких птиц будет 100, то шейдерный вариант будет явно экономнее в плане затраченных ресурсов.

Ответить
0

Мы живем в век нодовых редакторов. Программирование мышкой это модно, стильно, современно (нет)

Ответить
16

Не гони на ноды, говнокодя у себя в Сызрани, сынок

Ответить
0

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

Та же ситуация с иньекцией ush/usf. Только там ещё и модуль-загрузчик компилировать. (Хотя в 4.25 уже добавили возможность линковки кода в кастом ноде).

Ответить
4

(Сорри за оффтоп)
Так вот ты какой - разработчик Кумитеки)

11-летний брат моей благоверной как-то взахлёб и с восторгом устраивал мне лекцию с демонстрацией своих побед, пока я копал картошку)

Ответить

Воздушный паук например

Денис
5

 весь шейдер должен выглядеть как кусок кода если уж ты решил поделится

в amplify шейдер не выглядит как кусок кода, а такую "лапшу" по картинке можно собрать в итоге и в ue4 и в shader graph и amplify

Ответить
–22

Круто! Главное игры на Unity не делай. Для игр есть UE.

Ответить
21

Ори? Пилары? Кингмейкер? Субнаутика? И т. д? Если у Вас руки из плеч то инструмент (почти) не важен. А если ты комментатор мамкин, то конечно же важен.

Ответить
–3

Пиларсы и Кингмейкер прямо скажем не топ графика, при этом с долгими загрузками. И еще в ту же кучку Бэтлтех. Так что хз как насчет рук, есть еще примеры игр? Ну только чтобы графика нормальная была?

Ответить
10

 только чтобы графика нормальная была

Чтобы графика нормальная была, есть кино. А в играх главное интерактивность.

Ответить

Садовый кот

M
–7

 в играх главное интерактивность

За что тогда поливают F76 и другие нелюбимые на этом сайте игрушки?

Ответить

Воздушный паук

Садовый
21

 За что тогда поливают F76

точно не за графику лол

Ответить
0

Напомню, я про графику спрашивал.

Ответить
2

Больше половины игр на PlayMarket на Unity...
Хардстоун на юнити, 
Inside

но самое прикольное в этом всем, это то, что в игре главное не графика, а ГЕЙМПЛЕЙ, и вот его можно делать где угодно, хоть на скретче)

Ответить
0

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

Ответить
0

Продажи как бы намекают, что требования к геймплею при хорошей графике ниже 

засрали геймплей киберпанка именно за графику

Откуда вообще такие данные?

Ответить
0

По первому вопросу - топ продаж стима. С хреновой графикой только цива и 3 соревновательных игрушки кс, дота и пабг.

А про киберпанк - прямо здесь каменты читал в стиле "Уг, графоний старый, никакого некстгена".

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

Ответить
0

Kenshi

Ответить
0

Ну сцены можно загружать асинхронно к примеру. К тому же весь функционал c# в юнити уже давно доступен. Главное уметь писать.

Ответить

Воздушный паук например

Евгений
0

Ori.

Ответить
0

Endless Legend

Ответить
0

И две из этих игр невозможно играть без ссд :) Одна с графоном из нулевых при этом. 

Ответить
1

Не надо так.

Ответить
0

Ага, а ты попробуй собрать билд под мобилки в своем UE)

Ответить
0

В чем трабл, с версии 24 уже модульность есть для сокращения размера билда

Ответить
0

Ну на самом деле я не юзал UE чтобы что либо авторитетно заявлять)
Но, кодить на плюсах меня пугает... на шарпе в Unity как то попроще и понятнее)  
Самый понятный путь для индюшатника, с гараздо большим комьюнити, статьями и туторами... как то так)

Ответить
0

тут все по делу, но поддержка шарпов вроде как в разработке 

Ответить
0

Не будет в Анриле Шарпа. (По крайней мере, написанного Эпиками). Я это говорю как человек который видит подобные вопросы в Анрил Дискорде раз в месяц.

Ответить
3

Классная анимация чувак! Лучше твоя птичка в руках, чем журавль в небе

Ответить
3

Спасибо, было интересно. Такие вещи, простые и в тоже время требующие некого осознания их логики, на самом деле, не слабо так вдохновляют и стимулируют творчество, особенно, на расписанных вот так примерах.

Даёшь ещё!,)

Ответить
0

Есть мысли - предпочтения что можно еще обсудить?) Какую тему потрогать...

Ответить
0

Вопрос в том, чем ты сам загоришься дальше — о том и вещяй,)

Ответить
–17

мда, с такими птицами тебе дорога в фаллаут 76

Ответить
9

Спасиба, хоть куда то дорога есть :)

Ответить
1

Круто. Я вот как раз хочу задолбить шейдер который будет заставлять двигать воду по похожему принципу. Так что данная статья даёт отличную мотивацию перестать лениться и сделать дело!

Ответить
0

можешь задавать вопросы, не стесняйся)

Ответить
3

Задолбил.

Ответить
1

Крутата)
Но я бы на твоем месте нарисовал текстуру шума и ее по миру двигал, чтобы оффсетить по ней пикселы...
Но круто, сочно!)

Ответить
1

Выглядит действительно красиво, а можно поделится подробностями реализации?)

Ответить
1

Конечно же, у @OskSta реализация явно гораздо хитрее

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

Ответить
1

Поподробнее, к чему ты?)
по моим наблюдениям, разные формы крылья принимают из за того, что он берет мировые координаты вертекса по Y оси для сдвига анимации... типа я подобное реализовал но не к каждому вертексу... а просто позицию обьекта... стоит попробовать скормить алгоритму каждый вертекс отдельно... думаю да, именно так и работает у него...
также достигнется не симетричность... и когда птица будет наклонена, то одно крыло будет выше другого и по разным таймингам работать.... да, точно так!)

Ответить
1

Элегантное и простое решение.

Ответить
1

Вот ради таких постов я и захожу на дтф. Лайк!

Ответить
1

Прикольная , интересная статья! С нетерпением буду ждать больше таких!

Ответить
1

АААААААААААААААААААААААААААААААААААААААААААААААФИГЕНО!!!1

Блин, супер круто! И про фичи которые рассказал и анимация и лоуполи, и хэндпенит

Ответить
1

Это просто бомба, пиши ещё, очень интересно 

Ответить
1

Из того же треда как на UE4 похожее сделали https://twitter.com/matt_nava/status/1219455328829333504

Ответить
0

Дааа, она шикарна!)

Ответить
0

Самое интересное не рассказал: сколько птиц можно спаунить? Если несколько тысяч на средней видяхе потянет, то можно сделать интересные вещи, вроде игрули про полчища птиц.

Ответить
1

16384 птицы в кадре без малейшего намека на фризы.

Ответить
0

Батчатся? Если фазу взамаха крыльями случайную сделать, не проседает? Наверно, придётся вручную батчить тогда.

Выглядит вообще эпично!

Ответить
1

можно фазу маха оффсетить от позиции, и ничео не изменится особо.

Ответить
0

Партиклами пробовал инстансить ? 
Второй вопрос, для более гладкого перехода почему не использовал вертекс колор, что бы обозначить веса для изгиба крыльев ? 

Ответить
0

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

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

Ответить
0

Зачем самолету махать крыльями ?)
А про партиклы ты зря, можно же каждым отдельно управлять, это самый дешевый рендеринг в связки с ECS.

Ответить
0

Слишом сложна для хуёжничка навроде меня %D

Ответить
0

Прикольно. И сколько много можно таких птиц в реальном времени показывать? В Алане Вейке такие птицы?

Ответить
0

Незнаю что в алан вейке, но в теории это должно быть производительнее чем классический способ костной анимации... Позже проверю, возможно)

Ответить
0

я ниже скинул гифку с 16к птицами)

Ответить
0

Если я не сдал егэ по математике на 100 баллов, то унити разрабомне быть?

Ответить
0

Математики за 9й класс вполне достаточно + гугл)

Ответить

Комментарии

{ "jsPath": "/static/build/dtf.ru/specials/DeliveryCheats/js/all.min.js?v=05.02.2020", "cssPath": "/static/build/dtf.ru/specials/DeliveryCheats/styles/all.min.css?v=05.02.2020", "fontsPath": "https://fonts.googleapis.com/css?family=Roboto+Mono:400,700,700i&subset=cyrillic" }
null