Живые материалы в 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

Freya Holmér на днях выпустила шикарное видео про кривые Безье, где объясняются квадратичные кривые и кривые высших степеней, рассказываются способы прикладного применения и их отличие от сплайнов.

Отмечу, что вся визуализация в видео создана с помощью ее собственного плагина для Unity — Shapes

Отличная статья про техники создания обводки, все пять методов можно реализовать в любом 3д движке, и бонусом обучиться практически всей известной магии fragment шейдеров

https://alexanderameye.github.io/notes/rendering-outlines/
#shader

Сделал новый рендерер стекляшек #my

Красивые тени в CSS: Джош Камю показывает, как делать более естественные и приятные глазу тени → https://www.joshwcomeau.com/css/designing-shadows

Цветовые пространства: знаете ли вы разницу между sRGB, LAB и CIE XYZ? Джейк Арчибальд и Александр Сурма обсуждают, как устроены цветовые пространства, чем они отличаются и при чём здесь фронтенд → https://youtu.be/cGyLHxn16pE