Создай эффект с OpenGL и Python. Пишем шейдер GLSL
HTML-код
- Опубликовано: 2 окт 2024
- Это видео о работе и создании эффектов при помощи OpenGL. За основу взят язык программирования Python и модуль ModernGL, а весь упор сделан на работу с фрагментным шейдером на языке GLSL
ModernGL:
github.com/mod...
Фрагментный шейдер из видео:
gist.github.co...
#standalonecoder
![Как создать 3D Туннель на Python. Имитируем Шейдер OpenGL/GLSL [ Pygame ]](http://i.ytimg.com/vi/HybEMMrZMIg/mqdefault.jpg)
Этот канал - отличное место для вдохновения :)
Он нам врет! Это не кардиоида! Это сердечко и он говорит нам что он нас любит)
давно в теме разобраться хочу
, классно что такие видосы появляются)
Да, вот для таких штук и нужна векторная алгебра. Так что если интересна эта тематика - учите вышмат в вузе
Не векторная, а линейная. Это всё линейная алгебра и вышмат не нужен тут.
Самые важные функции в шейдерах, которые надо понять
clamp(a, mn, mx) - ограничивает a в пределах min - max. Если a больше max, оно становиться равным max и наоборот.
mix(a, b, k) - mix выдаёт число между a и b в пропорции k. Если k = 0.5, это как (a + b) / 2. Если k = 1, это b. Если k = 0, это а. Если k = 2... вот тут весело, т.к. это как это b + расстояние между a и b в ту же сторону. Если бы вы представили линию на линейке, a = 2 см, b = 4 см, mix(a, b, 2) будет 6 см.
fract(a) - отбрасывает целую часть a
floor(a) - отбрасывает дробную часть a
а ещё map, которой нет в glsl, но часто применяется
float map(float x, float in_min, float in_max, float out_min, float out_max) {
return (clamp(x, in_min, in_max) - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
превращает диапозон чисел от in_min до in_max в диаполон от out_min до out_max. Очень ооооочень полезная функция.
@@ATtiny13a-PU параметрические уравнения кривой, да и в общем-то базовые ведомости про кривые проходят на первом курсе в модуле векторная алгебра, который в свою учередь является подразделом линейной алгебры. В каком месте тут не нужна вышка мне не понятно. Возможно, не в полном объёме, но очень даже нужна
@@lollopin3362, максимум матрицы, что тоже линейная.
Комбинаторика и мат анализ, это ЯВНО НЕ ТО, что ты должен вычислять в шейдере, где до версии 4.0 есть только float. Тем более на некоторых старых картах есть только fixpoint float-ы. Так что это ещё раз подчёркивает предназначения карт для вычисления исключительно линейной алгебры в векторной форме (вектор имеет разное смысловое значение в разных областях науки. Тут вектор это не геометрический вектор, а вектор чисел, над которыми операции производятся одновременно (атомарно) за одну инструкцию)
@@ATtiny13a-PU ну это как посмотреть, видеокарты на многое способны, больше чем примитивные операции векторХматрица и подобные, просто она имеет какие не какие ограничения, и нацелена на обработку данных а не инструкций, а вышмат в определенном смысле нужен, ещё зависит что вышматом считать.. например решения задач тесселяции на видеокартах, уровней детализации мешей, и ускорение видеокартой определенных процессов, по типу целого ремешинга, мало их архитектуры, возможностей и производительности, у нее обычно достаточно настраиваемый конвейер функций, который часто можно использовать без ограничений, и с преимуществами данными Tmu,rop,etc .. до directx 12 многое было невозможно, или хотя бы vulkan, ибо толку от всяких cuda ptx обычно мало было, столько же толку как от видеокарты с сломанным биосом, можно исправить и тд но.. тебе это обычно не надо, вообще того не стоило, но ито , не мешало по сути, используй итак огромные возможности и не горюй
@@sti3167, ещё бы переворить всё это...
самое серьёзное ограничение шейдеров в
а) нельзя выделять память и использовать рекурсию. Сильно ограничивает спектр алгоритмов на шейдерах.
б) сильно ограниченная пропускная способность потока инструкций для ядер. Из-за чего они обязаны выполнять одно и тоже, в противном случае одни будут ждать других, пока те не завершат задачи, если вдруг потоков не хватило.
Ремеш моделей выполняют на CPU (иногда на cuda/OpenCL), да и вообще это очень дорогой процесс, который могут позволить себе только 3d редакторы, или игры, подготавливающие для работы ресурсы при старте. Явно не задача шейдеров никаким боком. А ещё уже есть готовые утилиты и движки с данными инструментами.
предлагаю тебе написать ray tracing на modernGL
Haha, yeah 100%. I know what you're saying and totally speak russian
Видео крутое и кстати було бы класно щоб ты сделал курс уроков по opengl бо по этой теме мало контента для python
Немного линейной алгебры для новичков в glsl
clamp(a, mn, mx) - ограничивает a в пределах min - max. Если a больше max, оно становиться равным max и наоборот.
mix(a, b, k) - mix выдаёт число между a и b в пропорции k. Если k = 0.5, это как (a + b) / 2. Если k = 1, это b. Если k = 0, это а. Если k = 2... вот тут весело, т.к. это как это b + расстояние между a и b в ту же сторону. Если бы вы представили линию на линейке, a = 2 см, b = 4 см, mix(a, b, 2) будет 6 см.
fract(a) - отбрасывает целую часть a
floor(a) - отбрасывает дробную часть a
а ещё map, которой нет в glsl, но часто применяется
float map(float x, float in_min, float in_max, float out_min, float out_max) {
return (clamp(x, in_min, in_max) - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
превращает диапозон чисел от in_min до in_max в диаполон от out_min до out_max. Очень ооооочень полезная функция.
а также
pow(a, p) - возводит a в степень p. p не может быть отрицательным, иначе будет nan и на выходе будет чёрный пиксель, или в if всегда false
min max... тут объяснять нечего. НО как и все мат операции в glsl, min(vec3(a), vec3(b)) вернёт не самый малый вектор, а отдельно 3 самых минимальных в них числа по отдельности. Т.е. из (14, -4, 6) и (2, 0 , 3) будет (2, -4, 3)
для инициализации массивов нужна конструкция
float arr[] = float[](1,2,4,5,6); // типы можно менять, а число в arr[] задавать не обязательно. Так работают все конструкторы в glsl, для vec234 и mat234
В glsl есть функции отражения луча, преломления, скалирования, вычисления произведений векторов и многие другие. Перед тем, как писать очередной велосипед, проверьте не написал ли он уже в glsl.
Также если вы программируете под VisualStudio, для вас есть бесплатное расширение с подсветкой синтаксиса для файлов .frag . vert .glsl и т.д.
если кому надо, могу ещё написать пару тройку разных рандомайзеров
Вот ещё новичкам немного *ОЧЕНЬ* полезной информации
хакерские штучки с кэшем браузера помогли восстановить его.
если вы как в видео используете gl функции, то учить вы их можете по гайдам для любого ЯП, но больше всего их для С++ (для С обычно только устарелые). пупуп удаляет комы со ссылками, но на ravesli (тут типо ну точечка, может быть ещё с комом, пупуп не бань пж третий раз) есть вкладка уроки по OpenGL.
Кол-во байт в каждой строке в OpenGL должны быть кратны 4-м. Иначе вашу текстуру перекосоёбыт. Так часто бывает, когда вместо RGBA люди юзают RGB, и например (представьте | переводит строку)
RGBA,RGBA|RGBA,RGBA|RGBA,RGBA всё ок, кратно 4-м,
RGB,RGB,**|BRG,BRG**|GRB,GRB**| ну тут понятно пи*** рулям. поведение не предсказуемо
Используйте иногда вместо texture функцию texelFetch. Она читает текстурные данные напрямую, намного быстрее и без фильтров.
Вот пример использования texelFetch(ИМЯТЕКСТУРЫ, ivec2(x, y), 0).rgb; // да-да, координаты ЦЕЛОЧИСЛЕННЫЕ по пикселям
в glsl можно делать вот так vec3(1, 2, 3).rrg, что вернёт vec3(1, 1, 2). Да хоть vec2(1, 2).yxyy, вернёт vec4(2, 1, 2, 2)
а ещё есть разные конструкторы для vec. Например vec4(vec3(1.).rgb, a).rgba; вполне корректно будет работать
Текстуры перед отправкой можно очень удобно настроить в OpenGL.
1) они могут иметь разные типы данных (и размерности 2D 3D), например 2 16-ти битных uint значения, и много каких ещё форматов.
2) при выходе за границы текстуры она может
* закрашиваться определённым цветом (0 1 2 3 -1 -1 -1...) (GL_CLAMP_TO_BORDER при "цвете" -1)
* закрашиваться ближайшим цветом в диапозоне (0 1 2 3 3 3 3) (GL_CLAMP_TO_EDGE)
* повторяться без зеркала (0 1 2 3 0 1 2 3...) (GL_REPEAT),
* повторяться с зеркалом (0 1 2 3 3 2 1 0 0 1 2 3...) (GL_MIRRORED_REPEAT),
Так вы можете переложить разные тяжёлые задачи на аппаратные реализации OpenGL, например при отрисовке игрового поля можно убрать ДОРОГУЮ проверку выхода за пределы карты пикселем.
3) Если текстура большая, а загружается каждый кадр, то следите за типами входных данных, т.к. OpenGL хоть и на аппаратном уровне преобразовывает типы, но это стоит времени.
4) можно юзать для функции texture фильтр интерполяции GL_LINEAR, что позволит иногда сгладить цвета. Может пригодиться.
НЕ ИСПОЛЬЗУЙТЕ 1D ТЕКСТУРЫ. Они не поддерживаются современными картами AMD выше 4.3 и nVidia 4.6
Больше информации смотреть на том сайте, что я написал сверху
Старайтесь не писать вот такой фигни
if(условие)
оченьтяжёлаяфункция(аргумент1);
else
оченьтяжёлаяфункция(аргумент2);
это заставит выполниться сразу 2 тяжёлые функции, что просто убьёт производительность в шейдере, если "условие" не константа, или униформа.
Пишите вот так!!!
оченьтяжёлаяфункция((условие) ? аргумент1 : аргумент2);
это в двое повысит производительность от первого примера. И вообще поменьше пишите if, если они заставляют часто выполняться большие разные ветки кода (даже если это одна и та же функция но с разными аргументами, не имеет значения)
Не используйте float-ты там, где это не нужно. Старайтесь придумать, как можно избавиться от них в шейдере и тем более от преобразований int(float) и float(int). Никогда не пишите int(uint)
out vec4 FragColor; задаёт имя переменной и выходной тип данных. Он может быть например out int FragColor; и тогда OpenGL на выходе будет ожидать число от 0 до 255 (или от 0 до 65535, если вы рендерите в 16-ти битную текстуру. Да-да, на шейдерах можно ВЫЧИСЛЯТЬ)
SSAA (MSAA) можно сделать прямо в шейдере! жалко только что я код не могу скинуть, я уже написал SSAA для x 1 2 3 4 5 9 16 64 256. Это значительно улучшает картинку, если у вас есть элементы по типу всяких тонких линий и т.д. Чуть ниже комментарий напишу
И последний небольшой совет. Видеокарты в современности просто нереально производительны. Вам нужно сдвинуть ваши устои по поводу алгоритмов, т.к. на шейдере то что процессор будет выполнять в 1 fps, можно это же вычислять в 300, и это не шутки. Вы можете делать безумные вещи, на подобии RTX в реальном времени, если у вас воксельная графика например .
@@ATtiny13a-PU не хило, моё почтение,но не проще ли на хабр статью написать и ссылку кинуть
@@ATtiny13a-PU а разве не достаточно просто написать out, а дальше любые тип и название
@@ATtiny13a-PU press F(
а я бы мог еще порекомендовать найти естественные координаты кривой, где параметр будет длиной дуги кривой, это можно сделать найдя зависимость t=t(s) (t - старый параметр, s - длина дуги) таким образом:
псевдокод на пайтон
T, S = [0], [0]
while t
Давай больше видосов про шейдеры, ничего не понятно конечно, но смотреть интересно!
5:58 - ой, вот ГПСЧ это реально проблема в шейдерах. Тот, что в видео, ну... не очень. Он очень быстро перестанет работать, если входной сид станет больше буквально 100, да и в то же время будет плохо работать при изменениях масштаба 10^-5 степени (это не будет похоже на случайные числа, или они не будут иметь равного распределения).
Но для цели в видео это подходит. Там не особо нужна случайность.
Вершинный шейдер с версии 3.3 core как минимум можно и нужно писать
layout (location = 0) in vec3 in_position;
вместо
in vec3 in_position;
а в строчке у обоих шейдеров
#version 430
надо не забывать про core, то есть должно быть
#version 430 core
а во фрагментном также стоит указать положение для выхода, вместо
out vec4 fragColor;
вот так
layout (location = 0) out vec4 fragColor;
Аргументы в студию, почему можно и нужно? На что влияет? В чём принципиальность?
О, приближаем питон к православию на Си/С++. Уже gl_функции в бой идут. Так не далеко до работы с указателями в питоне хихихи
Ну шейдер реально способен "разогнать питон", т.е. выполняется видеокартой и независим от того, кто его вызывает.
Что я на шейдерах только не делал (графику CellLab, только красивее например). а что только не делали челики с шейдертоя, там вообще безумие.........
НАЧИНАЮЩИМ в шейдерах советую внимательно посмотреть на названия переменных в видео. Они правильные, соблюдайте тот же стиль.
Них*я не понял, но очень интересно!
о боже, это просто прекрасно
Очень крутое видео. Реально качественная подача, без какой либо воды.
Интересный проект, совместить бы шейдинг и твой предыдущий проект с вокселями-звёздами
За месяц узнал о питоне больше, чем за год чтения всяких гавнокнижек и непонятных форумов. Спасибо!
Красиво
Ага
Есть возможность объединения opengl и например tkinter для создания форм в приложени?
Все так понятно, что я уже знал, что будет отображаться, потом уже, что надо прописывать, чтоб менялся эффект...
Помню когда у тебя было 500 подписчиков, ещё помню ты по типу дума сделал😳
А когда ты его впервые смотрел?
@@kirixoto я сначала наткнулся на змейку, насколько я помню которая была сделана неделю назад, после этого видео меня заинтересовал рейкастинг, а в тот момент вроде только 3 серии по нему было
@@kirixoto Неделю назад, на тот момент
@@dropzik_5661 Какую неделю? Уже год прошёл с того времени. Я его смотрел то ли 1000 либо с другого времени.
На тот момент когда ч это смотрел неделю назад -_-
Только версия устаревшая. Сейчас уже 4.6
Привет, видео топ, лайк.
Какой голос для озвучки используешь?
Чем больше смотрю, тем больше понимаю сколько интересного я упустил.
Только я в школе с математикой был не особо дружен, скорее всего не получится ничего😂
хотелось бы посмотреть по какому принципу отрисовываются полигоны и весь ландшафт в Майнкрафт
Изучив все ваши видео можно стать богом NFT🤘🏻👏🏻👏🏻
Классно, очень здорово!
большое спасибо за видеоролик!
Мне очень нравятся ваши уроки, не могли бы вы подсказать, как вы учили pygame?
можно ли сделать задержку между отрисовками точек? Не нашел функций по типу delay
Какую задержку? они все вычисляются и рисуются одновременно
хорошо будет такое вставить в вульфенштейн 3Д
Предлагаю сделать что - то типо сцены с реалистичными отражениями
У тебя уникальный контент... дальше видно ждём
Жду продолжение про инфарктоиду
Прошу тебя, верни старый голос хотя бы на один ролик
Иначе мы никогда больше не услышим "МЕТÓД"
Я думаю теперь придется пилить воксели на гпу. )
Ты бы еще на c++ сайт написал, гений мысли
Топ, как всегда в принципе) Жду новых видосов
Спасибо, интересно. Побольше бы видосов про шейдеры
Жаль можно поставить только один лайк
thanks auto translate thing
бля видос пушка!!!
Это наверное самые интересные видосы, которые хоть чему-то учат.
что за мелодия на фоне?
3:38 - у меня в итоге шейдер фонарика появился.
Красиво. Пусть теперь кто-нибудь только попробует сказать, что математика - это скучно
Интересно возможно ли такое на threejs webgl?
Да, конечно. Шейдер будет такой же, может с минимальными отличиями. Независимо от используемого языка (JS, C++, C#, Python) - все шейдеры пишутся на GLSL языке
сердечко
Хотелось бы увидеть на канале курс по pygame / OpenGL
Тема малоразвита
Копетц, как же просто, я для использования ОпенГЛ использовал GLFW (на плюсах)
Можешь сказать, откуда брал уроки/читал по Питону? Спасибо
нужно не просто GLFW (он фактически является OpenGL, т.к. реализует апи расширения)
тебе нужно glad, потому что в нём всё очень просто. Ты просто подключаешь к проекту обычный .h файл (тупо include в одну строку), ну и GLFW у тебя подключен, а далее пишешь что душе угодно.
учить можно у ravesli (как же душит упуп по отношению к даже намёкам на ссумки)
я писал про быкслш и точки, в итоге он даже так понял, что я пытают описать, афигеть умный
Слушай, попробуй выложить отрывок видео в ТТ и название канала, это будет отличной и бесплатной рекламой!
А может вернёшь рубрику с игрой на pygame?👉👈
Не чего не понял,нооо оочень интресно)
👏👏
Супер! Спасибо за видео!
надо было "фигуры лиссажу" строить, что там та кардиоида..... а если ещё набросать вложенных синусов/косинусов для каждого параметра, то получится "весьма кузяво" (баловался в 90-х, правда на ассемблере, шейдеров тогда не было)
Вернулся ,Наконец. Это самый лучший канал на программирование
Оболдено! Лайканул
Круто!
Попробуй написать игровой движок
Подскажите, есть ли методы развернуть данный цикл? Задача: нужно написать систему частиц для аудиоэффектов, но при итерациях больше 100 на телефоне заметные тормоза, хотя на пк все летает (такая разная производительность на мобилках). Есть ли какая литература по этой теме? Сам пока сильно в шейдерную математику не уходил, а видимо придется ради пары эффектов (
Офигенно. С меня лайк и подписка
А что там по 3D кардиоида и вообще 3D
Фракталы и 3д фракталы в студию!
Слушай, а сделай игру с сюжетом. Будет круто :).
На сердце похоже)))
Не зря она называется Кардиоида )
Приятно быть первым.
Какой речевой генератор используете?
красивое!
Красиво!)😁
почему нельзя два лайка поставить?
OpenGL пушка
из какой программы этот голос ?
Я правильно понимаю, что если я хочу красивую картинку в игре, то мне нужно переходить с pygame на OpenGL и каждый кадр рендерить, тогда и медленное движение объектов можно сделать плавным, и всякие эффекты свечения сделать, например для симуляции космических тел
в вашем случае подойдет библиотека "Arcade" - создание 2Д игр c использованием OpenGL
@@StandaloneCoder есть какой нибудь ресурс, почитав который можно разобраться, почему pygame не может рисовать к примеру шар в позиции (4.5 4.5), а OpenGL может
Pygame всего лишь является оберткой над библиотекой SDL, почитайте про SDL (Simple DirectMedia Layer). И в Pygame тоже работают с OpenGL
Очень загорелся идеей создания такого арта. Я новичок в технологиях, прошу сориентировать по шагам, как правильно настроить инструментарий/среду разработки.
На данный момент у меня установлена последняя версия Python и установлен PyCharm. Что делать дальше?
Создайте новый проект в Pycharm, потом в терминале установите модули ModernGL и ModernGL_Window
Команда:
pip install moderngl, moderngl_window
А далее используйте весь код из видео
@@StandaloneCoder
Сказанное сделал, CMD показывает, что модули успешно установлены.
Но возникают другие проблемы:
1. Написал в main строку import moderngl_window as mglw, вылез красный восклицательный знак No module named 'moderngl_window'
2. В окне PC не подсвечивается синтаксис Python по аналогии с видео, строки просто серого цвета
3. Создал (вручную) директорию programs и в ней таким же образом создал два файла с расширением .glsl, но почему-то они вышли с иконкой Python, но не как в видео. Может я что-то не то сделал ?
Спасибо!
@@dnsvrkv203 ещё раз отдельно попробуйте команду:
pip install moderngl_window
А для подсветки синтаксиса GLSL установите в Pycharm плагин - "GLSL Support"
@@StandaloneCoder
У меня получилась кардиода на библиотеке pygame из другого вашего видео. Спасибо за помощь!
Скажите, возможно ли конвертировать получившуюся красоту в gif-файлы?
@@dnsvrkv203 из самого простого - каждый кадр сохранять в картинку (pygame.image.save), а из них потом собрать гифку
Почему качество собирает меньше чем какой нибудь Влад А4
import moderngl_window as mglw
ModuleNotFoundError: No module named 'moderngl_window' У кого такая же проблема? Смогли вы ее решить?
pip install moderngl_window
@@StandaloneCoder У меня он установился, но в visual studio говорит что такого модуля не существует
@@StandaloneCoder Уже решил проблему, почему-то visual stuido code не может его найти, если запустить программу через консоль
то всё работает
Когда ты запускаешь новый проект в VS - создается виртуальное окружение, из под которого выполняется код. Ты же установил пакеты из терминала не в виртальное окружение - а в системную папку python. Поэтому скрипт из консоли видит нужные зависимости, а из ИДЕ не видит - так как ищет зависимости в специальной папке виртуального окружения.
Посмотри на taichi
сказать что это круто - ни сказать ничего
Брат, напиши 2д движок на kivy типа вот есть окно редактора,
нажимаешь кнопку New, создается файл .py где будет шаблон kivy приложения с пустым окном,
далее нажимаешь в редакторе кнопку а-ля "добавить спрайт", в редакторе появляется спрайт который ты выберешь,
а в файл проекта допишется код который добавляет этот спрайт, и так далее, получится 2d движок на уровне unity 2d
не дурно