Шейдер за 15 минут для новичков

привет интернет напишем твой первый shader за 15 минут это видео для тех кто вообще никогда не сталкивался даже с программированием если у вас какой-то опыт есть это только лучше в итоге мы сделаем что-то такое и с этим вы сможете работать дальше экспериментировать и я покажу тот способ который использую я и получаются каждый раз какие-то невероятные вещи мне нравится очень красиво это редактор кода online специально для шейдеров называется g sl сэндбокс ссылка будет в описании к этому видео откройте его и то это такая песочница для шейдеров все что вам нужно сделать это нажать create new эффект и у вас уже откроется готовый shader я перейду в полноэкранный режим нажав full screen любой shader можно сохранить кнопка саиф она появится после изменения и этот шайдер будет доступен по ссылке его можно быть открыт на телефоне и сделать скриншот записать видео что такое shader шейдеры это набор инструкций то есть программа который выполняется на видеокарте и выполняется для каждого одновременно для каждого пикселя это наверное все что я скажу чтобы не переходить какие-то безумные обсуждения так вот поставок в открыли эту вещь нас интерактивный shader который еще завязано движении мыши что здесь уже можно сделать прямо сейчас можно начать экспериментировать с числами меня эти числа меняете синус на косинус и у вас появится возможно уже что-то интересное и прикольная как только наиграетесь вообще как бы играться это круто это правильно это нужно делать я только так понимаю я осваиваю какую-то новую информацию меньше читаю больше пытаюсь что-то сломать и потом починить возможно это неправильно но мне так мне так проще хорошо я это все удаляю дела и удаляю все что находится внутри jail фраг ковер этот свет эта переменная который отвечает за цвет и это rgb эрба если быть точным потому что последнее число это альфа канал от 0 до села единицы и например если у меня все будет по нолям до последней нецид у меня будет синий цвет и можно добавить немного можно много и цвет нажать ok с этим есть и из позиции тоже я немного сейчас поменяю это переменная в отличие от джова скрипта здесь больше типов переменных и вообще здесь есть типа но не будем об этом я тоже уберу но нам сегодня не пригодится важно что в конце каждой командой нужно ставить точку запятой нынче вас будет ошибка и код вам будет строка подсвечиваться красному проверьте скорее всего вы забыли поставить точку, я сократил по здесь позиция да пост чтобы просто было удобно писать и масс resolution сверху нам тоже не понадобится поэтому их тоже можно смело брать первое что уже можно сделать можно попробовать поставить нашу перемена у нас уже есть две переменных это позиция x и позиция y позишн y и единственное что я сейчас прям сразу я сделаю я добавлю то что самые простые тригонометрические функции это синус и косинус ваши лучшие друзья генеративной графики и анимации как работает синус вы в эту функцию отправляете использовать любое число передаете любое число и число которое вам вернется будет число между минус единицей да я сейчас просто что я сделаю я позицию x то есть все цвета я поменяю на

координату точки и в этом случае это очень подходит ее ну еще на синус цветоk кстати смешиваются второе что мне стоит сделать до уже получилась такая прикольная сетка мне уже очень нравится напоминает немного фильм трон кстати сильным трон была интересная история но я рассказывать не буду так движемся дальше 15 минут джир дальше что я сделаю я добавлю зум разделю на 100 да и у меня не получилось сильное приближение для наглядности я так очень я привык так делать я вынесу переменную наверх и вынесу и следующим образом const float назову переменную зум оно будет равняться 100 и отсюда я напишу мою эту переменную это удобно потому что теперь я буду менять значение переменных в одном месте да у меня будет что-то меняться это просто это удобно и это целое число a flow to the числа с плавающей запятой const значит что она будет постоянным и не будет меняться во время действия кода что мы делаем дальше так и зума добавили с цветами да что еще тоже стоит делаете гадатель на графике это можно добавлять такие вещи но это то же самое что и разделить на 10 важно 10 0 потому что это все числа с плавающей запятой умножить на 0 1 еще с ко всем числам добавлю так умножить на 0 1 ножи добавит плавностью плавность и плавности в переходах что теперь мы делаем давайте добавим какую то анимацию простую что такая анимация этот движение точки как сделать здесь движение точки позишн x да например позишн x + 1 у нас будет сдвиг выше плюс 10 до получается движение и если бы у меня это происходило много раз у меня бы много раз было движение и я это все удалю у нас есть позишн x у нас есть переменная time переменной a time это переменная которое доступно на шейдеры в этой перемены находится количество секунд с того момента как shader был запущен поэтому получается небольшое движение можно тоже самое сделать для игрека позиция y равняется позицию на y + time и если отжимать немного повыше то видно что появилось небольшое движение в этом случае я на самом деле добавлю синус и сюда и можно на самом деле добавлять еще она менять всегда-всегда экспериментируйте меняйте плюс на минус меняйте синус на косинус давайте какие-то новые значения будет на самом деле только интересней и лучше что мы делаем дальше мы добавляем добавляем зависимость от другой переменной например в позицию exe добавлю y и наоборот плюс различным y ну давайте плюс и если добавить синус сюда же получится уже поинтереснее убили чужом давайте 5 да чтоб было видно получилось случилось лесенка тоже самое можно сделать с игреком отлично

ничего так же можно не забывать добавлять такие вещи получится размытие экспериментируйте с этими всеми вещами и вас осталось две вещи которые нас отделяют от того что показывал вначале добавлю первую вещь это этот цикл циклы это инструкция прага в языках программирования которое позволяет выполнять другие инструкции заданное количество раз в этом случае мне выполнить все то что находится внутри фигурных скобок внутрь обычно скобок записывают условия цикла мои и условия в данном случае будут создания переменной который будет являться счетчиком отчет будет идти с 0 цикла будет выполняться пока переменная будет меньше десяти например после каждого слоя ставится точка запятой в конце мы увеличиваем переменную на 1 и на у нас получается такое круговое движение и я сейчас добавлю новый цвет черного много ok всегда экспериментируйте получаться классные вещи не забывайте экспериментировать и последняя вещь среднего чека торном отделяет нам нужна еще одна переменная и эта перемена это дистанция это расстояние между точкой x. y будет число с плавающей запятой и раза его dist оно будет равняться дистанции это встроенная функция между точкой x и. y и я могу начать его уже использовать например и закрыть скобку могу его добавить тоже меняйте зум единственное что в какой-то момент сейчас время будет работать очень быстро поэтому будет лучше его разделить и как раньше я вынесу его float speed я вынес в отдельную переменную десять ноль и я заменю speed теперь могу управлять им отсюда это тоже очень удобно сумма величин где ошибка спит., забыл но будет гораздо интересней если я эту переменную буду генерировать внутри цикла я оставлю объявления переменной но значение я буду ей объявлять здесь и та же самая добавлю здесь минус синус и сон поменяю одна вещь и добавлю в переменное так once in the time's это то сколько раз у меня выполняется цикла это тоже влияет на то как выглядит наша вещь наше изделие и да теперь его можно менять площадь еще более безумные вещи

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