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

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

Как красиво делать списки с картинками

Технически ничего сверхъестественного, почти всё это — комбинации displacements, анаглифы, вершинные анимации. Хорошо видно как важно делать отзывчивые изинги и подмешивать к анимации реакцию на положение курсора / пальца.

https://jesperlandberg.dev/
https://www.kirkwhayman.com/work
https://kentatoshikura.com/
https://garden-eight.com/work/
https://nahelmoussi.com/
https://www.cher-ami.tv/en

#reference

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

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

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

#my

Слава из GeexArts поделился со мной переосмыслением идей с mav.farm

https://www.midwam.com/en

Очень крутая пост обработка, размытия, анаглифы, моушн блюр, классная галерея, отражения, звук и всё это укладывается в цельную концепцию. Арабская версия ещё и радует непривычными буковками. Кайф короче

Жаль SpectorJS его почему-то не берёт, так бы поковырялся в нём поглубже

#reference

Юра Артюх выпустил очень крутое видео как из модельки в блендере сделать 3D web конфигуратор всего в 81 строку кода. Must see!

И вроде я когда-то давно решил для себя не использовать r3f, это оверхед, а всё и так тормозит, но. Когда видишь этот dev experience, эту скорость разработки и эту лаконичность результата, соблазн очень велик. Как долго я бы пилил это на чистой трёхе или OGL? То то же.

И да, из описания репы:

Is it slower than raw threejs?

No. Rendering performance is up to threejs and the GPU. Components participate in the renderloop outside of React, without any additional overhead. React is otherwise very efficient in building and managing component-trees, it could potentially outperform manual/imperative apps at scale.

Такие вот дела. А видео стоит внимания 😉

#tutorial

С Новым Годом! Успехов и здоровья всем и скорейшего релиза WebGPU 😄

Год начался прекрасно 😊 Налюбовавшись вдоволь лучшей симуляцией морской поверхности и жизни под ней, я вернулся в симуляцию снега и мороза, а значит пора симулировать рабочие процессы. Эх

Чтобы знать в какую сторону работать полезно разбираться в бизнес стороне вопросов. Так что рекомендую свежайшее интервью с основательницей WeAR Studio:

https://youtu.be/7lpCIhUSRHk

Для меня было интересно в контексте WebAR, у них это самые дешёвые проекты в сравнении с VR решениями под всякие окулусы и мобильными приложениями на Unity. Думаю это связано с техническими ограничениями, сделать большой проект дополненной реальности в вебе не очень реально) Они продают такие проекты по 10к$.

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

На этом ютуб канале есть так же интервью с основателем Vintage, но лично по мне качество их работ сильно просело после того как они решили выстроить бизнес-процессы, так что для меня они не ориентир. Но с точки зрения бизнеса тоже интересно 😉

#business