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

#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

простая и внятная статья о том, как пользоваться шумом в 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