Если кто вдруг не знает, Юра Артюх сделал курс Слияние миров WebGL и HTML

In this course you will learn how to apply some stunning WebGL effects to the images you already have on your webpage. We will start from a beautiful but static HTML template. And spice it up with Three.js and WebGL.

До конца недели стоит 25€ вместо 100

Ссылочка

utm поставил чисто поржать с рекламщиков авардс, они не догадываются что у них есть такая кампания

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

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

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

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

#inspiration by mbsjq

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

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

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

Eye candy 😍

https://stuballinger.art/

#inspiration

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

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

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

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

#reference

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

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

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

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

#tutorial

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

CineShader, Shadertoy

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

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

#my

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

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

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

#reference #tutorial #article

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

#inspiraton by Gleb Kuznetsov

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

Самый надёжный и очевидный вариант предложил @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

Как создавался сайт 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