Вечерняя демка. С вопросами приглашаю в чат @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