Creative Coder

ENCHARMVERSE

The world was born.

999 METABOROS are waiting for its keepers. The journey is starting right now!

encharmverse.com

Jam3 Trend Reports

Ребят из студии Jam3 (работали с Google, Levi’s, adidas, Postmates, eBay и др.) запустили проект Trends Report – это серия маленьких презентаций-размышления о будущем интернет-технологий.

Первый репорт о модной концепции Метавселенных, который сейчас на слуху у всех, кто следит за развитие топовых интенет-компаний (Фейсбук, например, делает огромную ставку на концепцию метавсленных).

Интересная для изучения презентация: о первых примерах по созданию вселенных от известных компаний (Roblox x Lil Nas X), к текущему состоянию дел, и к чему мы придём через несколько лет.

trends.jam3.com

Новое видео Юры Артюха

Помимо создания симпатичной анимации, Юра рассказал про крутую тулзу для работы с анимациями — Theatre.js. Насколько я понял, она позволяет редактировать анимации с привычным для моушн дизайнеров GUI, что даёт возможность не сильно заморачиваясь делать нетривиальные изинги и ещё и значительно упрощает взаимодействие в команде. Можно отдать сцену дизайнеру, он сам доводит анимацию, возвращает таймлайн, готово. Больше не нужно проводить несколько итераций допиливания / сбора фидбека. И это кайф.

dat.gui на максималках. Я два года ждал такую либу :)

#tutorial #tool

Фантастическая интерактивная работа на юнити 😍

В вебе это тоже возможно с деградацией картинки на слабых устройствах

#reference by KeJyun Wu

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

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

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

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

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

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

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

#inspiration by Tatsuya

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

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

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

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

https://youtu.be/y0QASid1v8w

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

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

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

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

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

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

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

#tutorial

Немного рейтрейсинга и глитчей с отрицательной рефракцией 😄

Подумал что можно избежать появления полосок когда считаешь дисперсию для каждого канала отдельно, если вручную брать разные мип уровни в зависимости от разбега лучей. Примерно как реализован блум в трёхе или карты окружения в PBR там же. Но пока не могу придумать как это адекватно вычислять в шейдере где есть преломления и отражения по несколько раз 🤷‍♂️

Дрибббл

#my #reference

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

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

https://varun.ca/noise/

#inspiration by Artemiy Lebedev