Интересная фишка с типографикой

#inspiration

Кинетическая типографика от https://dribbble.com/dannniel

#inspiration

Эффектная работа с абберациями

https://dribbble.com/shots/10863312-Insidemind-Mobile-Screens

#inspiration

Вау симуляции дыма, частиц и прочего. В WebGL такое нам не светит конечно же 😭

https://vimeo.com/396455188

#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);
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

Красивый UI. Интересно как бы такое смотрелось в контексте декстоп версии сайта.

https://www.instagram.com/p/B-RzjwjgyTO/

Как сделать – ничего необычного за рамками обычного строения 3D сцены.
Мягкие тени можно посмотреть тут https://threejs.org/examples/?q=shadow#webgl_shadow_contact
Тень на поворачивающейся перпендикулярно грани можно легко сделать в шейдере типа 1. - dot(normal, cameraPosition - modelViewPosition)

#inspiration

Эх, уметь бы реймарчить такие облака...

#inspiration

Просто красиво

https://twitter.com/KidMograph/status/1251590109792735235

#inspiration

Очень красивый эффект

#inspiration

by https://dribbble.com/nathanriley

#inspiration

Вышел из рабочего клинча, теперь будут посты :)

#inspiration

Подборка раритетных креативных сайтов

Так выглядел крутой веб 15-20 лет назад. Я его помню больше как красный текст на зелёном фоне с анимацией через <marquee>, но оказывается рядом с этой вакханалией было прекрасное 😁 На самом деле и по современным меркам выглядит круто.

Corpse Bride — https://youtu.be/gYJyWg9d8Yg
Nike Air — https://youtu.be/I0UGxVWFyPk
Levi's 150th Anniversary — https://youtu.be/gWxb7EEggPk
Neostream Company — https://youtu.be/bVq89gQdrcg

И ещё 360 сайтов в этом плэйлисте https://www.youtube.com/playlist?list=PL1a9Qk9koD80ss9CJUJVv9Mqt94tOCzT8

За наводку спасибо @maxgraey 😊

#inspiration

Есть идеи как такое сделать?)

В чате пошло больше обсуждения чем в комментариях 😉

#inspiration

Скорее всего это сделано в Cinema4D, но кодом геометрию повторить вроде должно быть просто. Взять тор с треугольным сечением, разъединить где-то, повернуть один конец на 120 градусов и получим вот такую поверхность Мёбиуса. Можно реймарчингом, можно из треугольников. Ну а градиенты уже отдельно думать :)

#inspiration by pak

В отличие от вчерашнего, сегодняшнее вдохновение гораздо сложнее повторить кодом. Хотя у меня есть вариант, да и симуляцию ткани я на днях написал (снова), адаптировать её под это будет непросто.

Ну а тем кто решится это повторить на старте поможет этот пример на threejs, нужно добавить туда трение, реакцию опоры и прилипание вместо ветра и сбалансировать это всё чтобы не КРОВЬ КИШКИ РАСПИ*****ИЛО (извиняюсь, накипело). Ну и лично мне метод Стёрмера — Верле не очень заходит, я наверное неправильно его готовлю, поэтому рекомендую тот код полностью переписать (ну или обратить внимание на раздел особенности в википедии).

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

Кстати, на днях выкачу свою новую ткань в онлайн, в этот раз можно будет поиграться 😉

#inspiration by mbsjq