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

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

https://yangx.top/creativecoders/1660

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

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

#reference

Сегодня каналу исполняется год.

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

Ворожба над тёмной водой, mathimages, karpik.realtime, @razuznak, Генклуб, TouchDesigner Far East — этот год был полон крутых открытий! Ну и не забываем про топовый чат @webgl_ru, который с нами уже очень давно :)

Про позиционирование канала — в описании вроде бы красуется "как брать аварды", а по факту тут и в чате в основном творится какая-то бесовщина с сложными и не-очень-продакшн вещами. Но как раз эти эксперименты и техники и создают то что будет возможно через год блистать в авардах, а ещё через два года окажется в конструкторах сайтов. Так что мы тут за передней гранью веб-разработки 😉 А каналов с очередными библиотеками, базовыми туториалами, дрибббл-шотами или списками сайтов с наградами — и так достаточно. Ну и само собой играет фильтр личных предпочтений, контент ради контента не стоит внимания, только лучшее, только самое интересное для мсье знающих толк 😏

За год на канале собралась аж почти тысяча подписчиков, чему я удивлён. Думал тут наберётся максимум пара сотен человек, исходя из описанной специфики, но, видимо, крутых ребят больше чем я думал, и это не может не радовать 😊 Но сами по себе люди вряд ли находили этот канал, поэтому хочу выразить благодарность за неоднократную помощь ребятам из чата Промакса, Бездарным ссылкам, Промаксконтенту, UX Live который за один пост умножил количество подписчиков на 2, чатам Bang Bang Education и Uprock Offtop которые не трут форварднутые посты, даже если в них есть призывы подписываться, и @Lex_Murrey за то что ему нравится мой канал и он не стесняется об этом иногда писать в самых неожиданных местах :) У него кстати есть уютное сообщество Designtegration, вы знаете что делать 😉

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

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

И на картинке спойлер, в чате обсудим 😉

Crystal Sculpture. Real-time raytracing.

https://expo.encharm.studio/crystal/

Кому понравилось, поддержите на дрибббле 🙏

#my

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

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

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

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

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

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

#my #reference

А вот и тот самый Shader Chunks Explorer, который оказывается Three ShaderLib Skim

https://ycw.github.io/three-shaderlib-skim/

#tool

простая и внятная статья о том, как пользоваться шумом в creative coding

а ещё там есть интерактивные примеры, много красивых гифок и ссылки на инструменты

https://varun.ca/noise/

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

Ещё не смотрел, но с виду он рассказывает как я делаю эти свои демки :)

Update: он использует реймарчинг вместо рейтрейсинга, что не даёт ему возможности переотражать лучи больше пары раз без превращения в слайдшоу. С рейтрейсингом правда другая проблема — время компиляции шейдера растёт экспоненциально с каждым новым отражением 🤷‍♂️

А остальное всё то же самое, refract + reflect и готово 😉

Во второй части наверняка будет изменять IOR для каждого канала для анаглифа и форму изменит на тессеракт (вроде это он вначале)

В общем, годно, рекомендую к просмотру :)

А вот и вторая часть
https://www.youtube.com/watch?v=0RWaR7zApEo

#tutorial

Крутой видос про оптимизацию шейдеров, вкратце:

• GLSL функции выполняются с разной скоростью: умножение и сложение 4 такта, sin/cos по 20 тактов, тангенс около 56. Посмотреть брейкдаун вашего кода можно здесь

• сэмплинг текстуры — самая дорогостоящая операция, 300+ тактов; лучше посэмплить текстуру в начале, потом посчитать не связанную с ней математику и в конце их соединить, так простой от ожидания текстуры будет минимальным

• при сэмплинге возвращается не один тексель, а ещё и небольшая область вокруг него, она остаётся в кэше; если в дальнейшем сэмплить соседние значения и не скакать по всей uv, то шейдер будет работать быстрее. благодаря этому же есть почти бесплатные функции dFdx() и dFdy(), но об этом в другой раз :)

https://youtu.be/y0QASid1v8w