Как создавался сайт Polly Kole

Вчера @NobodyRoo, сооснователь и арт-директор fluc28.io, рассказал в чате как создавался сайт Polly Kole. Весь процесс от идеи до собственно реализации через поиск референсов, стиля, создание концептов и преодоление сложностей творческого процесса. Очень крутое чтиво:

https://yangx.top/creativecoders/1660

Ну а кто не понимает о чём речь — просто зайдите на http://pollykole.com/

И вступайте в чат @creativecoders :)

#reference

Живые материалы в ThreeJS

Идея не нова и довольно проста — бери да анимируй что-то в шейдере в зависимости о времени. Самое простое — изменять цвет, либо просто текстурные координаты, но если хочется чего-то покруче то приходится интегрироваться с PBR системой трёхи. И это не так удобно как хотелось бы :)

В этих демках ради скорости прототипирования я каждый кадр пререндерил карты шума и нормалей и использовал их для различных свойств материала. Сначала думал обойтись без нормалей и использовать шум как bump map, но на третьем видео отлично видна "пикселизация" — нехватка данных для dFdx. К счастью в Генклубе недавно выложили несколько ресурсов по шумам, и среди них был шикарный репозиторий с реализациями различных шумов с вычислением производных. Очень рекомендую! В принципе производные можно найти и вычисляя шум для соседних фрагментов, но это х5 больше вычислений 🤷‍♂️

В продакшн такое решение с пререндерингом не стоит запускать, лучше заморочиться и реализовать всё в шейдере собственно материала. Так должно работать сильно быстрее. Проблема тут в системе материалов ThreeJS и способе их кастомизации, придётся разобраться как она работает, подменять шейдер чанки на свои и это адский ад, но всё равно это быстрее чем писать свой PBR.

Кстати, существует инструмент типа Shader Chunks Explorer, который очень упрощает жизнь когда в этом разбираешься, но я потерял ссылку :) Если у кого есть, поделитесь пожалуйста.

Ну и конечно же поддержите на дрибббле 🙏

#my #reference

Фантастическая интерактивная работа на юнити 😍

В вебе это тоже возможно с деградацией картинки на слабых устройствах

#reference by KeJyun Wu

https://www.youtube.com/watch?v=PjHKcdeRQiY

Відтворення ефекту на https://www.zikd.space/de від Юри Артюха. Заодно показує як модифікувати матеріали тришки, що є дуже потужною технікою, і дозволяє робити дива в браузері не пишучи кілометри реалізацій PBR. Хоча в цьому випадку мабуть можна було взяти геометрію ціліндра замість площини і керувати полем offset текстур.

До речі, нагадую про зручний спосіб дивитись шейдери тришки.

Загалом це крутий, хоч і доволі простий ефект. Було б цікаво поекспериментувати з оживленням типографіки і самої форми — це відкриє величезний простір до кінетичної типографіки наступного рівня. Хто спробує і в кого вийде, напишу його ім'я на снаряді 😉😄

#tutorial #reference

Для мене було цікаво як розробники Spline зробили таку швидку реалізацію розмиття, і на щастя прямо в коді шейдера є посилання на шейдертой. Вони навіть зробили визначення сили розмиття в залежності від глибини, але для цього всі об'єкти позаду "скла" рендеряться вдруге з DepthMaterial. Тому ця фіча має прихований оверхед. Подивитись можна самому з допомогою SpectorJS — взагалі рекомендую аналізувати з його допомогою всі цікаві вам сайти, дуже круто бустить скіл 😉

До речі, ще одне відео з цією технікою, цікава ідея:
https://www.youtube.com/watch?v=59NVCBo26TA

Сам Spline це майбутнє масове 3D в вебі, покриває багато потреб дизайнерів і здешевлює виробництво. Хороша новина в тому, що ті хто вміють робити вау за межами можливостей Spline будуть мати більше роботи через розширення ринку. Також можна почати корисутватись Spline і робити те саме 3D що зараз, тільки швидше. Вангую появу професії по сплайну, як от сталось з вебфлоу. І до речі, вони одне з одним чудово інтегруються.

#tool #reference

Дуже крута демка по інтеграції HTML інтерфейсу в тривимірну WebGL сцену.

https://codesandbox.io/s/interactive-spline-scene-live-html-f79ucc

Сцену зроблено в Spline (знову він, так :), інтегровано за допомогою react three fiber. До речі екосистема r3f поповнюється такими шалено крутими речами, що цьому варто присвятити цілу серію постів. Але зараз не про те. Мене вразило як круто це працює, зберігається повний функціонал HTML, навіть є автозаповнення імейлу (я для відео почистив). Це значно крутіше, ніж у будь-яких подібних демо.

Ефект досягається за рахунок накладання canvas з прозорим віконцем поверх сторінки, а контейнеру сторінки прописаний стиль transform: matrix3d(...), і ця матриця оновлюється відповідно до 3D сцени. Можна помітити як воно іноді не встигає, але з тим нічого не зробиш.

Очевидно, таке рішення дуже обмежене в можливостях, але. Курсор у вигляді руки тицяє по DOM кнопкам! І від неї ще відкидається тінь на сцену! І ховери! Дуже дуже круто 😍

#reference

Сайт-портфоліо David Heckhoff
Мабуть це буде тиждень мультяшного дизайну :D

https://david-hckh.com/

Цікаві анімації і мені прямо зайшло як на першому екрані він щось там собі друкує і крутить колесо мишки :) Дрібниця, що створює всю атмосферу.

Дрібниці, деталі і нюанси зазвичай дуже посилюють враження від досвіду. Чим більше референсів ви бачили, тим більше різних дрібниць ви можете вигадати і втілити, тим самим піднімаючи клас своєї роботи.

#reference

Сайт візитка Arno Di Nunzio.

https://adinunz.io/

Крутий інтерактив, водночас мінімалістичний і багатий дизайн, кайф :) І так, елементи падають по скролу 🔥

З неба капають сльози клонів портфоліо Bruno Simon 😅

Рефки для сьогоднішніх постів підказав автор @blinklinks. Обіцяю, наступного тижня буде інший дизайн :)

#reference