Введение в шейдеры: изучите основы! скачать в хорошем качестве

Введение в шейдеры: изучите основы!

0:00 Вступление 1:24 Что такое шейдер? 3:37 Настройка шейдеров в P5js 5:58 Типы данных GLSL 7:00 Векторы 8:58 Атрибуты, юниформы и переменные 10:19 Barebones фрагментный шейдер 11:00 Вершинный шейдер 14:57 Повтор фрагментного шейдера 15:30 Градиенты 16:45 Касательная FragCoord 18:28 Функция Mix 21:22 Настройка юниформ 22:43 Однородные изображения (sampler2D) 24:58 p5.filterShader 25:12 Однородные массивы 27:05 Окружности и SDF 31:47 Булева логика 33:25 Отладка шейдеров 34:13 Заключение Ресурсы: Inigo Quilez YouTube:    / @inigoquilez   Inigo Quilez Шейдер: https://www.shadertoy.com/view/ldScDh Kishimisu YouTube:    / @kishimisu   Шейдер Kishimisu: https://www.shadertoy.com/view/mtyGWy Типы шейдеров: https://www.khronos.org/opengl/wiki/S... Типы данных GLSL: https://www.khronos.org/opengl/wiki/D... Все доступные атрибуты и униформы шейдеров p5js: https://github.com/processing/p5.js/b... gl_FragCoord: https://registry.khronos.org/OpenGL-R... Функция mix: https://registry.khronos.org/OpenGL-R... Библиотека p5.filterShader: https://github.com/BarneyWhiteman/p5.... 2D SDF-файлы: https://iquilezles.org/articles/distf... Примеры: Все примеры: https://editor.p5js.org/BarneyCodes/c... Пример вершинного шейдера: https://editor.p5js.org/BarneyCodes/s... Пример градиента фрагментного шейдера: https://editor.p5js.org/BarneyCodes/s... Пример позиции фрагментного шейдера: https://editor.p5js.org/BarneyCodes/s... Пример изображения фрагментного шейдера: https://editor.p5js.org/BarneyCodes/s... Пример массива фрагментного шейдера: https://editor.p5js.org/BarneyCodes/s... Пример SDF фрагментного шейдера: https://editor.p5js.org/BarneyCodes/s... Пример логики фрагментного шейдера: https://editor.p5js.org/BarneyCodes/s... Шейдеры — невероятно полезный инструмент программирования, особенно для творческого кодинга и генеративного искусства. Они раскрывают огромный потенциал, но их изучение немного запутанно! В этом видео рассматриваются многие основы, и, надеемся, оно поможет вам в будущем использовать шейдеры! Видео довольно длинное и насыщенное, поэтому не забывайте делать перерывы, если нужно. Кроме того, вы всегда можете посмотреть его несколько раз, чтобы лучше усвоить материал! В этом видео и его примерах используется P5js в режиме WEBGL, однако эти концепции применимы практически к любой среде, где можно использовать шейдеры (некоторые синтаксисы могут отличаться, особенно в коде CPU). Подпишитесь на меня: Поддержать канал: https://www.youtube.com/@BarneyCodes/... Твиттер:   / barneycodes   Reddit:   / barneycodes   #shaders #graphics #creativecoding