пост-дисклеймер.
В своих постах я не претендую на истину, до многих вещей я доходил сам и нигде не учился, поэтому возможны ошибки и неточности. Но все, что я буду сюда скидывать помогло мне при решении каких-то задач, или просто открыло глаза на какие-то вещи, или же это то, о чем стоит иногда напомнить самому себе в будущем)
так же стоит заметить, что много будет посвящено unity, так как это мой основной движок, но многие принципы и шейдера общие и их можно повторить в другом движке
В своих постах я не претендую на истину, до многих вещей я доходил сам и нигде не учился, поэтому возможны ошибки и неточности. Но все, что я буду сюда скидывать помогло мне при решении каких-то задач, или просто открыло глаза на какие-то вещи, или же это то, о чем стоит иногда напомнить самому себе в будущем)
так же стоит заметить, что много будет посвящено unity, так как это мой основной движок, но многие принципы и шейдера общие и их можно повторить в другом движке
🔥2
начнем с полезного ресурса!
https://thebookofshaders.com
сайт-книга о шейдерах
с примерами и удобными упражнениями, которые можно опробовать прямо на сайте, можно играться даже с телефона)
так же есть русский язык.
#tutorial #shader
https://thebookofshaders.com
сайт-книга о шейдерах
с примерами и удобными упражнениями, которые можно опробовать прямо на сайте, можно играться даже с телефона)
так же есть русский язык.
#tutorial #shader
The Book of Shaders
Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.
🔥3
недавно узнал об одной крутой штуке в #shaderGraph #Unity. Они выпустили описание буквально каждой ноды. более 140 штук.
что самое интересное, там кроме описание, еще пример иcпользовани и (что самое крутое!) описание того, как работает под капотом та или иная сложная нода
находится это все счастье в Package Manager ->Shader graph -> Samples ->Node Reference
а у меня в планах изучить все и скинуть сюда самое интересное. уже сейчас, пока мельком смотрел, нашел пару новых штук.
сама новость вот
https://blog.unity.com/engine-platform/new-shader-graph-node-reference-samples
что самое интересное, там кроме описание, еще пример иcпользовани и (что самое крутое!) описание того, как работает под капотом та или иная сложная нода
находится это все счастье в Package Manager ->Shader graph -> Samples ->Node Reference
а у меня в планах изучить все и скинуть сюда самое интересное. уже сейчас, пока мельком смотрел, нашел пару новых штук.
сама новость вот
https://blog.unity.com/engine-platform/new-shader-graph-node-reference-samples
🔥3
Media is too big
VIEW IN TELEGRAM
Эффект льда из текстуры камней с помощью одной ноды parallax mapping
#fundamental
#fundamental
❤3🔥2
Еще небольшая подборка примеров использования parallax mapping. на самом деле вообще большое поле для экспериментов - смотря какую текстуру использовать для карты высот и какую именно отображать в качестве базового цвета.
Единственная оговорка у этого всего- работает только в движении) если камера не двигается, картинка плоская
Единственная оговорка у этого всего- работает только в движении) если камера не двигается, картинка плоская
🔥5
один из самых распространенных способов искажение изображения с помощью текстуры шума.
область примения весьма обширна, оч часто можно наблюдать в текущих жидкостях)
описание - в следующем посте
область примения весьма обширна, оч часто можно наблюдать в текущих жидкостях)
описание - в следующем посте
🔥4
Разбор эффекта Distortion.
#fundamental #shader
Весь эффект можно разделить на 3 части.
по сути мы искажаем с помощью текстуры шума uv- карту другой текстуры.
на картинке это происходит посередине, с помощью ноды сложения (Add).
все, что идет до этого - делает так, чтобы шум двигался во времени и задает ему направление с помощью 2мерного вектора скорости.В данном примере используется процедурный шум Simple noise. Можно использовать затайленную готовую текстуру шума небольшого размера.
в третьей части мы просто добавляем с помощью ноды умножения(Multiply) цвет к исходной текстуре.
#fundamental #shader
Весь эффект можно разделить на 3 части.
по сути мы искажаем с помощью текстуры шума uv- карту другой текстуры.
на картинке это происходит посередине, с помощью ноды сложения (Add).
все, что идет до этого - делает так, чтобы шум двигался во времени и задает ему направление с помощью 2мерного вектора скорости.В данном примере используется процедурный шум Simple noise. Можно использовать затайленную готовую текстуру шума небольшого размера.
в третьей части мы просто добавляем с помощью ноды умножения(Multiply) цвет к исходной текстуре.
🔥3
Simple Noise и Gradient Noise
#fundamental #shader
в #Unity есть две ноды, генерирующие шум. Обе текстуры не имеет краев и повторений.
Simple Noise -более легкий вариант.
Забавный факт- генерирования простого шума стоит меньше, чем сэмплирование готовой текстуры. и это очень круто! Раньше я считал(исходя из разных источников), что сэмплирование будет всегда эффективнее.
Gradient Noise - более тяжелая версия, но дающая более интересные вариации шума. известен так же как Perlin noise.
она уже стоит чуть больше или примерно столько же, сколько и сэмплирование текстуры.
Hash type везде стоит оставлять значением по умолчанию - deterministic. другой тип оставлен просто для совместимости с предыдущими версиями
Так же стоит отметить о приведенных примерах создания вариаций текстуры шума с помощью математических операций c uv -картой шума. тут надо помнить что при умножения 4мерного вектора его нужно умножать на 4 мерный, чтобы получить различные результаты по разным направлениям и растянуть по какой-то оси.
#fundamental #shader
в #Unity есть две ноды, генерирующие шум. Обе текстуры не имеет краев и повторений.
Simple Noise -более легкий вариант.
Забавный факт- генерирования простого шума стоит меньше, чем сэмплирование готовой текстуры. и это очень круто! Раньше я считал(исходя из разных источников), что сэмплирование будет всегда эффективнее.
Gradient Noise - более тяжелая версия, но дающая более интересные вариации шума. известен так же как Perlin noise.
она уже стоит чуть больше или примерно столько же, сколько и сэмплирование текстуры.
Hash type везде стоит оставлять значением по умолчанию - deterministic. другой тип оставлен просто для совместимости с предыдущими версиями
Так же стоит отметить о приведенных примерах создания вариаций текстуры шума с помощью математических операций c uv -картой шума. тут надо помнить что при умножения 4мерного вектора его нужно умножать на 4 мерный, чтобы получить различные результаты по разным направлениям и растянуть по какой-то оси.
🔥5
Стилизованные огонечки с помощью процедурной текстуры voronoi и текстуры шума для большего рандома
🔥3
небольшой разбор первого эффекта из предыдущего поста.
Собрано в VFX graph
в качестве меша для частиц используется сфера, для которой используется кастомный шейдер. в нем же идет измение вертексов у сферы с помощью шума, чтобы были разные вариации и так же сама основная форма задается уже во фрагментном шейдере с помощью текстуры вороной. далее в самой системе частиц происходит измение прозрачности в зависимости от времени существования частицы
Собрано в VFX graph
в качестве меша для частиц используется сфера, для которой используется кастомный шейдер. в нем же идет измение вертексов у сферы с помощью шума, чтобы были разные вариации и так же сама основная форма задается уже во фрагментном шейдере с помощью текстуры вороной. далее в самой системе частиц происходит измение прозрачности в зависимости от времени существования частицы
🔥4
потихоньку хочется разгонять и начинать писать про более сложные штуки,но, пожалуй, еще хочется осветить более простые и очевидные вещи для начала. например, как сделать простой крутящийся круг под ногами- даже у этого есть несколько вариантов исполнения - как с помощью частиц так и просто ручками все сделать. да и в тех же частицах есть разные способы. тут вот можно заметить, что кружок заходит на ногу у манекена- кто скажет, почему?)
🔥3
в данном и предыдущем примере круги под персонажем выполены через #VFXgraph. только в посте выше используются встроенные в graph декали, а в данном примере - просто обычная плоскость но в том же VFX graph (кольца два, поэтому и графа два).
🔥4