Вечерняя демка. С вопросами приглашаю в чат @creativecoders 😊

https://king.encharm.studio/

#my

Реализовал симуляцию ткани и псевдо эффект боке для меню сайта.

Проект ещё в разработке, ссылкой поделиться не могу. С вопросами приглашаю в чаты @webgl_ru и @creativecoders 😊

#my

Не ожидал такого стопроцентного фидбека, спасибо всем кто принял участие в голосовании! Да, "интересно разбираться самостоятельно" это тоже положительный ответ 😉

Сегодня разберу вот эту анимацию:
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);
color.r = texture2D(tMap, uv + shift).r;
color.g = texture2D(tMap, uv - shift).g;

C shift нужно будет поэкспериментировать чтобы сделать абберации как в референсе. Вычислять его из uv нельзя, потому что изначально у меня геометрия куба. Хотя почему бы и нет, креативные эффекты должны быть креативными)
Ну и чтение текстуры конкретно из 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;
ray = normalize(ray);

И найдя пересечение прямой заданной worldPosition и ray с плоскостью заданной cameraPosition и vec3(0.), я получу uv координаты для отрисовки внутреннего кубошара на внешнем. Как именно не помню точно, но это гуглится. Если поставить камеру на ось z, xy координаты пересечения будут сдвинутым uv координатами тексуры отрисованной ранее:

vec3 planeHit = worldPosition.xyz + ray * dot(cameraPosition, -worldPosition.xyz) / dot(cameraPosition, ray);
vec4 screenSpaceReflection = projectionMatrix * viewMatrix * vec4(planeHit, 1.);
vec2 uv = screenSpaceReflection.xy / screenSpaceReflection.w;

После чего цвет смешивается с отражением из envMap и сцена готова 😊

Остальные решения:
2. Вместо path tracing отражения отрендерить каждую грань внешней кубосферы в текстуру перенормируя viewMatrix (очень сложно, задача для гениев аналитической геометрии)
3. Ray marching внутри внешней кубосферы
4. Ray marching всей сцены

Как вам? Стоит ли делать проще / сложнее, подробнее, и т.д.?

#my #tutorial #inspiration

На днях релизнулся один из крутейших проектов в которых я принимал участие – сайт 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

Демка по мотивам https://dribbble.com/shots/10879124-Morphing-Geometry

На следующей неделе выложу ссылку 😉

#my

Real-time raytracing при помощи WebGL

https://morphing.encharm.studio/

Под капотом ray-surface intersection functions и очень примитивная модель освещения.
Может очень лагать на некоторых устройствах, но с этим ничего не сделать 🤷‍♂️

Пишите в @creativecoders или @webgl_ru если хотите увидеть об этом статью 😉

#my

История одного эффекта

Часть 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

Поставил себе десяток редакторов видео чтобы быстро обрезать видео, ни в одном это не удобно, в большинстве нельзя без плясок сделать нестандартное разрешение на выходе.

В итоге оказалось на 777й странице выдачи гугла есть онлайн тулза которая делает именно и только то что мне нужно — https://online-video-cutter.com/

Ох уж это SEO...

На видео пример интерполяции между скелетными анимациями, одна из AnimationMixer, вторая из положения курсора. Мой великолепный костыль для mav.farm

#tool #my

Старое доброе ультранасилие

Оказалось, симуляция жидкостей не так хороша для смешивания жидкостей, но переделывать я это конечно же не буду. В целом комбинация этих решений открывает просто огромный простор для творчества, идей для реализации масса :) Где бы найти время для того чтобы причесать и повыкладывать все демки...

Кто знает, если выложить это в инсту и твиттер меня не забанят за музыку под копирайтом? Кстати, у меня есть инстаграм и твиттер :)

#my

Это видео было настолько вдохновляющее, что Иван не выдержал и реализовал это реймарчингом. Потом не выдержал уже я и попробовал себя в реймарчинге тоже :) Для первого раза вроде получилось неплохо, оказывается это тормозит меньше чем я думал, но всё же сильнее чем хотелось бы. В любом случае, меня можно поздравить с лишением реймарчинговой девственности :D

CineShader, Shadertoy

Большое спасибо Ивану и Павлу за помощь в реализации 🤝

Кстати, Иван — основатель генклуба, сообщества про генеративный арт. Там собралось много крутых ребят, которые постоянно обмениваются своими наработками и знаниями. Рекомендую к ним присоединиться :)

#my

Crystal Sculpture. Real-time raytracing.

https://expo.encharm.studio/crystal/

Кому понравилось, поддержите на дрибббле 🙏

#my

Живые материалы в ThreeJS

Идея не нова и довольно проста — бери да анимируй что-то в шейдере в зависимости о времени. Самое простое — изменять цвет, либо просто текстурные координаты, но если хочется чего-то покруче то приходится интегрироваться с PBR системой трёхи. И это не так удобно как хотелось бы :)

В этих демках ради скорости прототипирования я каждый кадр пререндерил карты шума и нормалей и использовал их для различных свойств материала. Сначала думал обойтись без нормалей и использовать шум как bump map, но на третьем видео отлично видна "пикселизация" — нехватка данных для dFdx. К счастью в Генклубе недавно выложили несколько ресурсов по шумам, и среди них был шикарный репозиторий с реализациями различных шумов с вычислением производных. Очень рекомендую! В принципе производные можно найти и вычисляя шум для соседних фрагментов, но это х5 больше вычислений 🤷‍♂️

В продакшн такое решение с пререндерингом не стоит запускать, лучше заморочиться и реализовать всё в шейдере собственно материала. Так должно работать сильно быстрее. Проблема тут в системе материалов ThreeJS и способе их кастомизации, придётся разобраться как она работает, подменять шейдер чанки на свои и это адский ад, но всё равно это быстрее чем писать свой PBR.

Кстати, существует инструмент типа Shader Chunks Explorer, который очень упрощает жизнь когда в этом разбираешься, но я потерял ссылку :) Если у кого есть, поделитесь пожалуйста.

Ну и конечно же поддержите на дрибббле 🙏

#my #reference

Сделал новый рендерер стекляшек #my

ENCHARMVERSE

Ну что ж, этот день настал. Сегодня я запускаю свой метавёрс, над которым я работал последние 4 месяца:

https://encharmverse.com/

За это время я написал свою оффлайн рендерилку на WebGL которая выдает глубину трейсинга больше чем многие профессиональные пакеты и к тому же работает быстрее. Конечно это не бесплатно и пришлось пожертвовать некоторыми возможностями, но я очень доволен результатами :) Заодно сильно прокачал скиллы в реймарчинге, PBR и генеративном арте. Конечно времени сделать всё идеально не хватало, поэтому ещё очень очень много чего нужно доделать и сделать.

Я думаю все в курсе что такое NFT и как эта кухня работает. Так как просто генеративным артом уже к сожалению никого не удивить, вслед за дропами будут идти мини игры и квесты, раскрывающие историю метавселенной. И на саму историю будут влиять решения сообщества и игроков. В общем планы масштабные, ближайший год будет очень интересным :)

Буду очень благодарен если вы поддержите это начинание в соц. сетях:
Твиттер
Инстаграм

Дадим шуму! 🥳🎉🥳

#my

Зробив сайт присвячений війні, для європейців, котрі ще не знають що вони наступні. Будь ласка, розповсюдьте по знайомим з-за кордону за можливості 😉

war.encharm.studio

Прохання підтримати також в Твіттері чи на Dribbble

#my

Півтора роки тому робив ось такий WebGL компонент для одного сайту, от він нарешті релізнувся :)

Лінк шейрити не буду, бо то москалі (каюсь і більше не працюємо)

#my #reference

Зробили з Юрою сайтик http://continuous.vc

Рейтрейсинг, патікли, флюїдсім — все як ми любимо 🔥

Проголосуйте на авардс 🙏
https://www.awwwards.com/sites/continuous-ventures

#my