Creative Coder

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

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

#tool

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

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

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

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

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

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

#my #reference

Crystal Sculpture. Real-time raytracing.

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

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

#my

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

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

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

За год на канале собралась аж почти тысяча подписчиков, чему я удивлён. Думал тут наберётся максимум пара сотен человек, исходя из описанной специфики, но, видимо, крутых ребят больше чем я думал, и это не может не радовать 😊

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

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

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

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

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

https://t.me/creativecoders/1660

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

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

#reference

У нас очень кайфовое сообщество, вариантов накидали массу 😊

Самый надёжный и очевидный вариант предложил @vovazhuruk — использовать секвенции пререндеренных картинок
Плюсы: просто, красиво, апрувнуто Юрой Артюхом :D
Минусы: загрузка картинок, минимальный интерактив, для изменений нужно всё перерендеривать

Вместо секвенции можно использовать видео, о чём когда-то в нашем чате писал @dergachevm. Он предложил крутое решение проблемы с лагами при перемотке видео в обратную сторону
В теории оно хорошо уменьшает объём загружаемых данных и меньше кушает память браузера

@NobodyRoo предложил сделать cubemaps для кристалла и внутренних отражений, и отдельно запечь в текстурки внутренние грани. Не очень понял как это точно должно работать, но логика есть и по идее должно смотреться хорошо
Плюсы: не сложно, красиво, производительно
Минусы: не точная физическая отрисовка, может ничего не получиться

@karpik предложил использовать дары природы и почитать туториал с кодропс
Плюсы: готовое решение, не сложно, интерактивно, легко обновлять мэш
Минусы: не учитывается путь луча внутри кристалла, нет внутренних отражений, не вау

В соседнем посте в том же канале есть офигенное решение
Рефракции происходят в экранном пространстве, с учётом глубины, для повышения точности используется реймарчинг. Сходу сложно понять как это устроено, может когда-то разберусь
Плюсы: красиво, интерактивно, легко обновлять мэш, можно анимировать как хочешь
Минусы: сложно, тормозит, какой будет результат на кристаллах не понятно

Есть ещё такая вот работа и вроде должно получаться с аппроксимациями, но публичной реализации я не видел
https://www.researchgate.net/publication/220506766_Approximate_Ray-Tracing_on_the_GPU_with_Distance_Impostors
Может на самом деле это и сделано в предыдущем варианте, надо разбираться

@Xander_nome предложил использовать Пекс, хотя изначально такой способ реализовали Lusion на трёхе
По сути это развитие того что было на codrops
Плюсы: можно менять свойства материала, вроде учитывает глубину (но это не точно), интерактивно, производительно, красиво
Минусы: нет внутренних отражений, для кристаллов не пойдёт

И конечно же мой вариант — взять и порейтрейсить всё. Пост я скинул в отложенные вечером, а ночью попробовал. Сам кристалл рейтрейсить довольно просто и быстро, но вот с материалами, окружением и тенями пока беда. Но обкладываться костылями я мастер, так что это ещё не финал 😉
Плюсы: красиво, интерактивно, полная свобода
Минусы: дьявольская сложность, долгая компиляция шейдера, только лоу поли мэши, может тормозить (ещё не ясно, тут как выйдет)

Ну и @maksim_zov предложил сделать это на WebGL, за что ему спасибо :D Он крутой дизайнер если что

Кто не знал, для подобных обсуждений есть чат @creativecoders, вступайте 😊

#reference #tutorial

У кого какие идеи как это можно реализовать в браузере?)

#inspiraton by Gleb Kuznetsov

А вот список ещё покруче 😉

https://github.com/jasonwebb/morphogenesis-resources

#reference #tutorial #article

Подборка вообще ВСЕГО что есть в генеративном риалтайме, спасибо за наводку @gordee_va https://www.notion.so/Creative-Code-algorithms-techniques-c5550ef2f7574126bdc77b09ed76651b

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

CineShader, Shadertoy

Большое спасибо Ивану и Павлу за помощь в реализации 🤝

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

#my

Fun fact. Если скормить рендереру MSDF текста неправильный конфиг, выходит непонятно что но красивенько :) Пользы правда от этого ноль 🤷‍♂️

Ну и раз речь зашла о рисовании текста в WebGL — предлагаю почитать статью Techniques for Rendering Text with WebGL. Внутри 5 техник вывода текста с примерами и описанием их достоинств и недостатков. Хотя выбор в основном сводится либо к первому методу, либо к последнему.

После прочтения предыдущей статьи можно дополнительно ознакомиться с Kinetic Typography with Three.js. Теперь у вас будет возможность вдохнуть жизнь в любую, даже самую загрустившую надпись 😉

Ну а дальше огромный простор для творчества, достаточно поискать на ютубе kinetic typography. Пусть даже это всё вроде и вышло из трендов, знания и умения — сила :)

#tutorial

На днях, когда пересматривал подборку списков, заметил что у Kenta Toshikura обновился сайт. Очень крутая задумка, крутое исполнение 💪

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

Ну и само собой он получил SOTD & Dev award. Как и предыдущая версия этого же сайта :)

#reference

Брейкдаун дизайна красивенького сайта с трёхмеркой https://solutions.centogene.com/
https://jesper-vos.medium.com/centogene-solutions-c2e5ada41eaf

Eye candy 😍

https://stuballinger.art/

#inspiration

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

Бездарные ссылки

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

В отличие от вчерашнего, сегодняшнее вдохновение гораздо сложнее повторить кодом. Хотя у меня есть вариант, да и симуляцию ткани я на днях написал (снова), адаптировать её под это будет непросто.

Ну а тем кто решится это повторить на старте поможет этот пример на threejs, нужно добавить туда трение, реакцию опоры и прилипание вместо ветра и сбалансировать это всё чтобы не КРОВЬ КИШКИ РАСПИ*****ИЛО (извиняюсь, накипело). Ну и лично мне метод Стёрмера — Верле не очень заходит, я наверное неправильно его готовлю, поэтому рекомендую тот код полностью переписать (ну или обратить внимание на раздел особенности в википедии).

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

Кстати, на днях выкачу свою новую ткань в онлайн, в этот раз можно будет поиграться 😉

#inspiration by mbsjq