March 17, 2020
This media is not supported in your browser
VIEW IN TELEGRAM
Реализовал симуляцию ткани и псевдо эффект боке для меню сайта.
Проект ещё в разработке, ссылкой поделиться не могу. С вопросами приглашаю в чаты @webgl_ru и @creativecoders 😊
#my
Проект ещё в разработке, ссылкой поделиться не могу. С вопросами приглашаю в чаты @webgl_ru и @creativecoders 😊
#my
March 24, 2020
Не ожидал такого стопроцентного фидбека, спасибо всем кто принял участие в голосовании! Да, "интересно разбираться самостоятельно" это тоже положительный ответ 😉
Сегодня разберу вот эту анимацию:
https://dribbble.com/shots/10879124-Morphing-Geometry
Есть 4 варианта как это сделать, я распишу самый производительный и неточный. Буду использовать терминологию ThreeJS. Решения чисто из головы, могут быть ошибки, на них можно указать мне в чате @creativecoders или обсудить в сообщетсве @webgl_ru 😊
Работа с геометрией
Куб превращается в сферу и наоборот начиная с рёбер, по сути bevel фильтр. Чтобы это реализовать, нужно создать геометрию куба и для каждой вершины посчитать её расстояние до центра грани в диапазоне 0..1. Запишу это как атрибут геометрии float faceDistance.
Для морфинга нужна uniform переменная float morphPower в диапазоне 0..1, где 0 – куб, 1 – сфера. В вершинном шейдере перенормирую линейный морфинг в
Внутренний кубошар
Прозрачный материал, который просто выводит envMap. Для аббераций (цветные разводы) берётся значение какого-то канала со сдвигом, например
Ну и чтение текстуры конкретно из cubeMap я не помню, нужно посмотреть в примерах.
Сам кубошар отрендерю в текстуру.
Внешний кубошар
Вот тут уже всё гораздо сложнее. Буду использовать path tracing для отражений.
Чтобы получить отражения вычислю нормаль, она морфится так же как и позиция.
Теперь я могу получить преломлённый вектор используя коэффициент преломления float refractionPower:
Остальные решения:
2. Вместо path tracing отражения отрендерить каждую грань внешней кубосферы в текстуру перенормируя viewMatrix (очень сложно, задача для гениев аналитической геометрии)
3. Ray marching внутри внешней кубосферы
4. Ray marching всей сцены
Как вам? Стоит ли делать проще / сложнее, подробнее, и т.д.?
#my #tutorial #inspiration
Сегодня разберу вот эту анимацию:
https://dribbble.com/shots/10879124-Morphing-Geometry
Есть 4 варианта как это сделать, я распишу самый производительный и неточный. Буду использовать терминологию ThreeJS. Решения чисто из головы, могут быть ошибки, на них можно указать мне в чате @creativecoders или обсудить в сообщетсве @webgl_ru 😊
Работа с геометрией
Куб превращается в сферу и наоборот начиная с рёбер, по сути bevel фильтр. Чтобы это реализовать, нужно создать геометрию куба и для каждой вершины посчитать её расстояние до центра грани в диапазоне 0..1. Запишу это как атрибут геометрии float faceDistance.
Для морфинга нужна uniform переменная float morphPower в диапазоне 0..1, где 0 – куб, 1 – сфера. В вершинном шейдере перенормирую линейный морфинг в
float bevelPower = clamp((morphPower + faceDistance - 1.) / faceDistance, 0., 1.);Теперь я могу интерполировать положение вершины между кубом и сферой
vec3 pos = mix(position, normalize(position), bevelPower);Создам 2 таких куба – внешний и внутренний. Размерами и поворотами проще манипулировать из JS при помощи scale и rotation.
Внутренний кубошар
Прозрачный материал, который просто выводит envMap. Для аббераций (цветные разводы) берётся значение какого-то канала со сдвигом, например
vec4 color = texture2D(tMap, uv);C shift нужно будет поэкспериментировать чтобы сделать абберации как в референсе. Вычислять его из uv нельзя, потому что изначально у меня геометрия куба. Хотя почему бы и нет, креативные эффекты должны быть креативными)
color.r = texture2D(tMap, uv + shift).r;
color.g = texture2D(tMap, uv - shift).g;
Ну и чтение текстуры конкретно из cubeMap я не помню, нужно посмотреть в примерах.
Сам кубошар отрендерю в текстуру.
Внешний кубошар
Вот тут уже всё гораздо сложнее. Буду использовать path tracing для отражений.
Чтобы получить отражения вычислю нормаль, она морфится так же как и позиция.
vec3 morphedNormal = mix(normal, normalize(position), bevelPower);Чтобы перевести её в пространство мира, использую такой костыль
vec4 worldPosition = modelMatrix * vec4(pos, 1.);Если кто-то знает, как это сделать красивее – пишите.
vec3 worldNormal = (modelMatrix * vec4(pos + morphedNormal, 1.) - worldPosition).xyz;
Теперь я могу получить преломлённый вектор используя коэффициент преломления float refractionPower:
vec3 ray = normalize(worldPosition - cameraPosition) - worldNormal * refractionPower;И найдя пересечение прямой заданной worldPosition и ray с плоскостью заданной cameraPosition и vec3(0.), я получу uv координаты для отрисовки внутреннего кубошара на внешнем. Как именно не помню точно, но это гуглится. Если поставить камеру на ось z, xy координаты пересечения будут сдвинутым uv координатами тексуры отрисованной ранее:
ray = normalize(ray);
vec3 planeHit = worldPosition.xyz + ray * dot(cameraPosition, -worldPosition.xyz) / dot(cameraPosition, ray);После чего цвет смешивается с отражением из envMap и сцена готова 😊
vec4 screenSpaceReflection = projectionMatrix * viewMatrix * vec4(planeHit, 1.);
vec2 uv = screenSpaceReflection.xy / screenSpaceReflection.w;
Остальные решения:
2. Вместо path tracing отражения отрендерить каждую грань внешней кубосферы в текстуру перенормируя viewMatrix (очень сложно, задача для гениев аналитической геометрии)
3. Ray marching внутри внешней кубосферы
4. Ray marching всей сцены
Как вам? Стоит ли делать проще / сложнее, подробнее, и т.д.?
#my #tutorial #inspiration
Dribbble
Morphing Geometry
Morphing Geometry designed by Nathan Riley for Unseen Studio®. Connect with them on Dribbble; the global community for designers and creative professionals.
April 3, 2020
На днях релизнулся один из крутейших проектов в которых я принимал участие – сайт https://mav.farm/
Казалось бы, это должен был быть обычный лендинг сервиса, но ребята из geex-arts.com решили сделать магию и мощный визуал. Думаю это пример веба будущего, необычный пользовательский опыт вызывает сильнейший эмоциональный отклик, и он в итоге лучше продаёт товар или сервис.
Моей зоной ответственности был естественно WebGL, для работы я выбрал threejs. В целом всё строится на комбинации тривиальных техник и особой rocket science там нет, хотя это может быть эффект Даннинга-Крюгера 🤷♂️ Так что задавайте вопросы 😉
Сложнее всего было добиться нормальной работы AnimationMixer с экспортированной из Cinema4D моделью женщины. Пришлось вручную перебирать и удалять глитчевые ключевые кадры, а их там десяток тысяч. Так же была проблема с камерой, созданная в коде анимация между положениями камеры тоже глючила. Нормализация кватернионов результата не дала, в итоге оказалось Quaternion.slerp и slerpFlat выдают разные результаты в зависимости от фазы луны и проще скормить миксеру обрезанную анимацию чисто из результатов интерполяции без интерполируемых значений. Если кто-то знает что я делал не так, пожалуйста напишите)
Материал женщины это просто текстура, uv координаты вычисляются из позиции фрагмента и времени. Блики — dot нормали и положение источника света плюс положение мыши. Засвет границы мэша аналогично dot нормали и положения камеры. Пример того, как мелочи и вроде атомарные операции создают красоту)
Пол это обычный Plane, который сдвигается относительно камеры на фиксированный шаг размером с треугольник, за счёт чего получается эффект его бесконечности. Высота вершин зависит от функции симплексного шума, где на вход подаются координаты вершины, положение курсора и состояние анимации – получаем бесконечную и безумно отзывчивую поверхность
Могу расписать что-то подробнее или ответить на вопросы в чатах @creativecoders и @webgl_ua :)
#my #reference #tutorial
Казалось бы, это должен был быть обычный лендинг сервиса, но ребята из geex-arts.com решили сделать магию и мощный визуал. Думаю это пример веба будущего, необычный пользовательский опыт вызывает сильнейший эмоциональный отклик, и он в итоге лучше продаёт товар или сервис.
Моей зоной ответственности был естественно WebGL, для работы я выбрал threejs. В целом всё строится на комбинации тривиальных техник и особой rocket science там нет, хотя это может быть эффект Даннинга-Крюгера 🤷♂️ Так что задавайте вопросы 😉
Сложнее всего было добиться нормальной работы AnimationMixer с экспортированной из Cinema4D моделью женщины. Пришлось вручную перебирать и удалять глитчевые ключевые кадры, а их там десяток тысяч. Так же была проблема с камерой, созданная в коде анимация между положениями камеры тоже глючила. Нормализация кватернионов результата не дала, в итоге оказалось Quaternion.slerp и slerpFlat выдают разные результаты в зависимости от фазы луны и проще скормить миксеру обрезанную анимацию чисто из результатов интерполяции без интерполируемых значений. Если кто-то знает что я делал не так, пожалуйста напишите)
Материал женщины это просто текстура, uv координаты вычисляются из позиции фрагмента и времени. Блики — dot нормали и положение источника света плюс положение мыши. Засвет границы мэша аналогично dot нормали и положения камеры. Пример того, как мелочи и вроде атомарные операции создают красоту)
Пол это обычный Plane, который сдвигается относительно камеры на фиксированный шаг размером с треугольник, за счёт чего получается эффект его бесконечности. Высота вершин зависит от функции симплексного шума, где на вход подаются координаты вершины, положение курсора и состояние анимации – получаем бесконечную и безумно отзывчивую поверхность
Могу расписать что-то подробнее или ответить на вопросы в чатах @creativecoders и @webgl_ua :)
#my #reference #tutorial
Mav Farm
Mav Farm - You Are Here
The global marketplace for art and fashion. Shop the greatest luxury footwear, clothing, accessories and beauty directly from the world's best designers, stores, creators, and brands.
July 1, 2020
This media is not supported in your browser
VIEW IN TELEGRAM
Демка по мотивам https://dribbble.com/shots/10879124-Morphing-Geometry
На следующей неделе выложу ссылку 😉
#my
На следующей неделе выложу ссылку 😉
#my
October 1, 2020
This media is not supported in your browser
VIEW IN TELEGRAM
Real-time raytracing при помощи WebGL
https://morphing.encharm.studio/
Под капотом ray-surface intersection functions и очень примитивная модель освещения.
Может очень лагать на некоторых устройствах, но с этим ничего не сделать 🤷♂️
Пишите в @creativecoders или @webgl_ru если хотите увидеть об этом статью 😉
#my
https://morphing.encharm.studio/
Под капотом ray-surface intersection functions и очень примитивная модель освещения.
Может очень лагать на некоторых устройствах, но с этим ничего не сделать 🤷♂️
Пишите в @creativecoders или @webgl_ru если хотите увидеть об этом статью 😉
#my
October 11, 2020
November 6, 2020
История одного эффекта
Часть 1. Реверс-инжиниринг, интриги, расследования
Несколько недель назад я увидел классную подборку логотипов от Martin Naumann и подумал а что если сделать такое на WebGL и оживить? Выглядит не сложно, будто выдавленный вперёд логотип, отражающий окружение. Задача сводится к построить текстуру с расстоянием до контура (называется это SDF), по SDF определить высоту пикселя, посчитать направление отражения и взять какой-то хитрый градиент собственно для окружения. Ну что же, поехали! За пару вечеров справлюсь (ага, конечно :)
Для начала я сделал кружок прямо в шейдере, поигрался с градиентами и почти сразу получил неплохой результат (видео 2). Градиент вычислялся из двух кольцевых градиентов с линейной интерполяцией между ними в зависимости от высоты нормали, по сути цилиндр. Вдохновившись, я решил повторить эффект на букве D. У неё есть и углы и скруглённая часть, то что нужно для теста. Чтобы сильно не заморачиваться в качестве SDF я использовал outer glow в ФШ, градиент теперь строился в зависимости от положения курсора для интерактивности (видео 3). Ага, тоже прикольно, но как-то уже не то. Ну что же, начало положено, завтра продолжу – решил я и ушёл спать.
На следующий день я подумал что было бы неплохо взять всё же сразу какую-то надпись и работать с ней, например, название своей студии :) Дело в том, что до этого для определения горизонтальной составляющей нормали я брал вектор из центра экрана, но это работало бы только с кругом или с близкими к нему формами. А я же хочу впоследствии масштабировать эффект на угодно. Решение простое — для каждого пикселя текстуры с символом находим ближайший пиксель его контура и в rg каналах храним направление от него, в b — расстояние.
Довольно быстро накатал генератор таких картинок (4), отдельно внешнее поле, отдельно внутреннее. Заблюрил rg каналы в фш, чтобы не было видно совсем уж ступенек, быстренько адаптировал шейдер и вуаля, картинка 5 готова :D Отсутствие активации - это мой ответ Биллу Гейтсу за чипирование 5g ковида.
Гейтс Гейтсом, а результат по меньшей мере выглядит странно и нужно с этим что-то делать. Сейчас, в ретроспективе, очевидно, что с добавлением фич я мелкими шажками уходил в сторону от решения, но в процессе реализации одной фичи мне было сложно понять где я косячу с второй. Пришлось взять паузу, чтобы помедитировать на исходные логотипы.
После вечера раздумий, я переделал градиент ближе к начальному и решил брать какую-то нелинейную функцию от расстояния, чтобы получить собственно ту самую красоту на краях символов. Для того чтобы иметь возможность поиграть с этими функциями я и не генерировал карту нормалей изначально. Считать нормали в шейдере стало резко сложнее, но благо нормаль это перпендикуляр к касательной функции, а касательная функции это её производная. Производные за нас отлично считает WolframAlpha (особенно когда пробуешь взять что-то типа производной expSustainedImpulse). Получилось как-то так:
В общем, спустя неделю экспериментов я сдался. И написал автору эффекта :) Он не хотел делиться своими секретами, но его наводок оказалось достаточно чтобы на следующий же день получить классный результат. О том, как это у меня получилось я напишу позже, а вы пока попробуйте догадаться как это в итоге устроено 😉
#my #tutorial
Часть 1. Реверс-инжиниринг, интриги, расследования
Несколько недель назад я увидел классную подборку логотипов от Martin Naumann и подумал а что если сделать такое на WebGL и оживить? Выглядит не сложно, будто выдавленный вперёд логотип, отражающий окружение. Задача сводится к построить текстуру с расстоянием до контура (называется это SDF), по SDF определить высоту пикселя, посчитать направление отражения и взять какой-то хитрый градиент собственно для окружения. Ну что же, поехали! За пару вечеров справлюсь (ага, конечно :)
Для начала я сделал кружок прямо в шейдере, поигрался с градиентами и почти сразу получил неплохой результат (видео 2). Градиент вычислялся из двух кольцевых градиентов с линейной интерполяцией между ними в зависимости от высоты нормали, по сути цилиндр. Вдохновившись, я решил повторить эффект на букве D. У неё есть и углы и скруглённая часть, то что нужно для теста. Чтобы сильно не заморачиваться в качестве SDF я использовал outer glow в ФШ, градиент теперь строился в зависимости от положения курсора для интерактивности (видео 3). Ага, тоже прикольно, но как-то уже не то. Ну что же, начало положено, завтра продолжу – решил я и ушёл спать.
На следующий день я подумал что было бы неплохо взять всё же сразу какую-то надпись и работать с ней, например, название своей студии :) Дело в том, что до этого для определения горизонтальной составляющей нормали я брал вектор из центра экрана, но это работало бы только с кругом или с близкими к нему формами. А я же хочу впоследствии масштабировать эффект на угодно. Решение простое — для каждого пикселя текстуры с символом находим ближайший пиксель его контура и в rg каналах храним направление от него, в b — расстояние.
Довольно быстро накатал генератор таких картинок (4), отдельно внешнее поле, отдельно внутреннее. Заблюрил rg каналы в фш, чтобы не было видно совсем уж ступенек, быстренько адаптировал шейдер и вуаля, картинка 5 готова :D Отсутствие активации - это мой ответ Биллу Гейтсу за чипирование 5g ковида.
Гейтс Гейтсом, а результат по меньшей мере выглядит странно и нужно с этим что-то делать. Сейчас, в ретроспективе, очевидно, что с добавлением фич я мелкими шажками уходил в сторону от решения, но в процессе реализации одной фичи мне было сложно понять где я косячу с второй. Пришлось взять паузу, чтобы помедитировать на исходные логотипы.
После вечера раздумий, я переделал градиент ближе к начальному и решил брать какую-то нелинейную функцию от расстояния, чтобы получить собственно ту самую красоту на краях символов. Для того чтобы иметь возможность поиграть с этими функциями я и не генерировал карту нормалей изначально. Считать нормали в шейдере стало резко сложнее, но благо нормаль это перпендикуляр к касательной функции, а касательная функции это её производная. Производные за нас отлично считает WolframAlpha (особенно когда пробуешь взять что-то типа производной expSustainedImpulse). Получилось как-то так:
float slope = 1. - pow(1. - dist, 8.);
float slopeDerivative = 8. * pow(1. - dist, 7.);
if (slopeDerivative > 0.) {
normal = normalize(vec3(direction, 1. / slopeDerivative));
}
И вот мы уже на картинке 6, а до красоты ещё ооочень далеко. Проделывая кучу экспериментов с формой спусков у букв, цилиндрическими и куполообразными градиентами, с использованием источников света вместо градиентов (получив кстати в процессе тот самый баг), я отдалялся от исходной картинки всё дальше и дальше. Лучшим что у меня получилось была картинка 7 (наверное потому что на ней почти ничего нет 😄), но если включить окружение получалась картинка 8. И дело было даже не столько в корявости поля направлений или градиентов, сколько в некорректности моих решений на уровне идеи.В общем, спустя неделю экспериментов я сдался. И написал автору эффекта :) Он не хотел делиться своими секретами, но его наводок оказалось достаточно чтобы на следующий же день получить классный результат. О том, как это у меня получилось я напишу позже, а вы пока попробуйте догадаться как это в итоге устроено 😉
#my #tutorial
November 15, 2020
This media is not supported in your browser
VIEW IN TELEGRAM
Поставил себе десяток редакторов видео чтобы быстро обрезать видео, ни в одном это не удобно, в большинстве нельзя без плясок сделать нестандартное разрешение на выходе.
В итоге оказалось на 777й странице выдачи гугла есть онлайн тулза которая делает именно и только то что мне нужно — https://online-video-cutter.com/
Ох уж это SEO...
На видео пример интерполяции между скелетными анимациями, одна из AnimationMixer, вторая из положения курсора. Мой великолепный костыль для mav.farm
#tool #my
В итоге оказалось на 777й странице выдачи гугла есть онлайн тулза которая делает именно и только то что мне нужно — https://online-video-cutter.com/
Ох уж это SEO...
На видео пример интерполяции между скелетными анимациями, одна из AnimationMixer, вторая из положения курсора. Мой великолепный костыль для mav.farm
#tool #my
November 17, 2020
This media is not supported in your browser
VIEW IN TELEGRAM
Старое доброе ультранасилие
Оказалось, симуляция жидкостей не так хороша для смешивания жидкостей, но переделывать я это конечно же не буду. В целом комбинация этих решений открывает просто огромный простор для творчества, идей для реализации масса :) Где бы найти время для того чтобы причесать и повыкладывать все демки...
Кто знает, если выложить это в инсту и твиттер меня не забанят за музыку под копирайтом? Кстати, у меня есть инстаграм и твиттер :)
#my
Оказалось, симуляция жидкостей не так хороша для смешивания жидкостей, но переделывать я это конечно же не буду. В целом комбинация этих решений открывает просто огромный простор для творчества, идей для реализации масса :) Где бы найти время для того чтобы причесать и повыкладывать все демки...
Кто знает, если выложить это в инсту и твиттер меня не забанят за музыку под копирайтом? Кстати, у меня есть инстаграм и твиттер :)
#my
November 23, 2020
Creative Coder
Скорее всего это сделано в Cinema4D, но кодом геометрию повторить вроде должно быть просто. Взять тор с треугольным сечением, разъединить где-то, повернуть один конец на 120 градусов и получим вот такую поверхность Мёбиуса. Можно реймарчингом, можно из треугольников.…
This media is not supported in your browser
VIEW IN TELEGRAM
Это видео было настолько вдохновляющее, что Иван не выдержал и реализовал это реймарчингом. Потом не выдержал уже я и попробовал себя в реймарчинге тоже :) Для первого раза вроде получилось неплохо, оказывается это тормозит меньше чем я думал, но всё же сильнее чем хотелось бы. В любом случае, меня можно поздравить с лишением реймарчинговой девственности :D
CineShader, Shadertoy
Большое спасибо Ивану и Павлу за помощь в реализации 🤝
Кстати, Иван — основатель генклуба, сообщества про генеративный арт. Там собралось много крутых ребят, которые постоянно обмениваются своими наработками и знаниями. Рекомендую к ним присоединиться :)
#my
CineShader, Shadertoy
Большое спасибо Ивану и Павлу за помощь в реализации 🤝
Кстати, Иван — основатель генклуба, сообщества про генеративный арт. Там собралось много крутых ребят, которые постоянно обмениваются своими наработками и знаниями. Рекомендую к ним присоединиться :)
#my
March 1, 2021