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

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