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

Сегодня разберу вот эту анимацию:
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

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

Так выглядел крутой веб 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