Forwarded from Backtracking (Дима Веснин)
простая и внятная статья о том, как пользоваться шумом в creative coding
а ещё там есть интерактивные примеры, много красивых гифок и ссылки на инструменты
https://varun.ca/noise/
а ещё там есть интерактивные примеры, много красивых гифок и ссылки на инструменты
https://varun.ca/noise/
Varun Vachhar
Noise in Creative Coding
Noise is an indispensable tool for creative coding. We use it to generate all kinds of organic effects like clouds, landscapes and contours…
Немного рейтрейсинга и глитчей с отрицательной рефракцией 😄
Подумал что можно избежать появления полосок когда считаешь дисперсию для каждого канала отдельно, если вручную брать разные мип уровни в зависимости от разбега лучей. Примерно как реализован блум в трёхе или карты окружения в PBR там же. Но пока не могу придумать как это адекватно вычислять в шейдере где есть преломления и отражения по несколько раз 🤷♂️
Дрибббл
#my #reference
Подумал что можно избежать появления полосок когда считаешь дисперсию для каждого канала отдельно, если вручную брать разные мип уровни в зависимости от разбега лучей. Примерно как реализован блум в трёхе или карты окружения в PBR там же. Но пока не могу придумать как это адекватно вычислять в шейдере где есть преломления и отражения по несколько раз 🤷♂️
Дрибббл
#my #reference
https://www.youtube.com/watch?v=NCpaaLkmXI8
Ещё не смотрел, но с виду он рассказывает как я делаю эти свои демки :)
Update: он использует реймарчинг вместо рейтрейсинга, что не даёт ему возможности переотражать лучи больше пары раз без превращения в слайдшоу. С рейтрейсингом правда другая проблема — время компиляции шейдера растёт экспоненциально с каждым новым отражением 🤷♂️
А остальное всё то же самое, refract + reflect и готово 😉
Во второй части наверняка будет изменять IOR для каждого канала для анаглифа и форму изменит на тессеракт (вроде это он вначале)
В общем, годно, рекомендую к просмотру :)
А вот и вторая часть
https://www.youtube.com/watch?v=0RWaR7zApEo
#tutorial
Ещё не смотрел, но с виду он рассказывает как я делаю эти свои демки :)
Update: он использует реймарчинг вместо рейтрейсинга, что не даёт ему возможности переотражать лучи больше пары раз без превращения в слайдшоу. С рейтрейсингом правда другая проблема — время компиляции шейдера растёт экспоненциально с каждым новым отражением 🤷♂️
А остальное всё то же самое, refract + reflect и готово 😉
Во второй части наверняка будет изменять IOR для каждого канала для анаглифа и форму изменит на тессеракт (вроде это он вначале)
В общем, годно, рекомендую к просмотру :)
А вот и вторая часть
https://www.youtube.com/watch?v=0RWaR7zApEo
#tutorial
YouTube
Live Coding:Bending Light
In this video we'll look at refraction: the bending of light as it moves from one medium to another.
========== Social Media Links ==========
Twitter: @The_ArtOfCode
Facebook: https://www.facebook.com/groups/theartofcode/
Patreon: https://www.patreon…
========== Social Media Links ==========
Twitter: @The_ArtOfCode
Facebook: https://www.facebook.com/groups/theartofcode/
Patreon: https://www.patreon…
Forwarded from karpik.realtime
Крутой видос про оптимизацию шейдеров, вкратце:
• GLSL функции выполняются с разной скоростью: умножение и сложение 4 такта, sin/cos по 20 тактов, тангенс около 56. Посмотреть брейкдаун вашего кода можно здесь
• сэмплинг текстуры — самая дорогостоящая операция, 300+ тактов; лучше посэмплить текстуру в начале, потом посчитать не связанную с ней математику и в конце их соединить, так простой от ожидания текстуры будет минимальным
• при сэмплинге возвращается не один тексель, а ещё и небольшая область вокруг него, она остаётся в кэше; если в дальнейшем сэмплить соседние значения и не скакать по всей uv, то шейдер будет работать быстрее. благодаря этому же есть почти бесплатные функции dFdx() и dFdy(), но об этом в другой раз :)
https://youtu.be/y0QASid1v8w
• GLSL функции выполняются с разной скоростью: умножение и сложение 4 такта, sin/cos по 20 тактов, тангенс около 56. Посмотреть брейкдаун вашего кода можно здесь
• сэмплинг текстуры — самая дорогостоящая операция, 300+ тактов; лучше посэмплить текстуру в начале, потом посчитать не связанную с ней математику и в конце их соединить, так простой от ожидания текстуры будет минимальным
• при сэмплинге возвращается не один тексель, а ещё и небольшая область вокруг него, она остаётся в кэше; если в дальнейшем сэмплить соседние значения и не скакать по всей uv, то шейдер будет работать быстрее. благодаря этому же есть почти бесплатные функции dFdx() и dFdy(), но об этом в другой раз :)
https://youtu.be/y0QASid1v8w
Forwarded from Геймдев, который мы заслужили
Freya Holmér на днях выпустила шикарное видео про кривые Безье, где объясняются квадратичные кривые и кривые высших степеней, рассказываются способы прикладного применения и их отличие от сплайнов.
Отмечу, что вся визуализация в видео создана с помощью ее собственного плагина для Unity — Shapes
Отмечу, что вся визуализация в видео создана с помощью ее собственного плагина для Unity — Shapes
YouTube
The Beauty of Bézier Curves
Bézier curves - how do they do?
They're used for animation, text rendering, and all sorts of curved shapes! But how do they actually work? well, like, that's what the video is about, so, watch it to find out etc!!
• Lots of love to
💛 Jazz "queenjazz" Mickle…
They're used for animation, text rendering, and all sorts of curved shapes! But how do they actually work? well, like, that's what the video is about, so, watch it to find out etc!!
• Lots of love to
💛 Jazz "queenjazz" Mickle…
Forwarded from karpik.realtime
This media is not supported in your browser
VIEW IN TELEGRAM
Отличная статья про техники создания обводки, все пять методов можно реализовать в любом 3д движке, и бонусом обучиться практически всей известной магии fragment шейдеров
https://alexanderameye.github.io/notes/rendering-outlines/
#shader
https://alexanderameye.github.io/notes/rendering-outlines/
#shader
Forwarded from For Web — фронтенд, дизайн, программирование
Красивые тени в CSS: Джош Камю показывает, как делать более естественные и приятные глазу тени → https://www.joshwcomeau.com/css/designing-shadows
Forwarded from For Web — фронтенд, дизайн, программирование
Цветовые пространства: знаете ли вы разницу между sRGB, LAB и CIE XYZ? Джейк Арчибальд и Александр Сурма обсуждают, как устроены цветовые пространства, чем они отличаются и при чём здесь фронтенд → https://youtu.be/cGyLHxn16pE
Media is too big
VIEW IN TELEGRAM
Фантастическая интерактивная работа на юнити 😍
В вебе это тоже возможно с деградацией картинки на слабых устройствах
#reference by KeJyun Wu
В вебе это тоже возможно с деградацией картинки на слабых устройствах
#reference by KeJyun Wu
Новое видео Юры Артюха
Помимо создания симпатичной анимации, Юра рассказал про крутую тулзу для работы с анимациями — Theatre.js. Насколько я понял, она позволяет редактировать анимации с привычным для моушн дизайнеров GUI, что даёт возможность не сильно заморачиваясь делать нетривиальные изинги и ещё и значительно упрощает взаимодействие в команде. Можно отдать сцену дизайнеру, он сам доводит анимацию, возвращает таймлайн, готово. Больше не нужно проводить несколько итераций допиливания / сбора фидбека. И это кайф.
dat.gui на максималках. Я два года ждал такую либу :)
#tutorial #tool
Помимо создания симпатичной анимации, Юра рассказал про крутую тулзу для работы с анимациями — Theatre.js. Насколько я понял, она позволяет редактировать анимации с привычным для моушн дизайнеров GUI, что даёт возможность не сильно заморачиваясь делать нетривиальные изинги и ещё и значительно упрощает взаимодействие в команде. Можно отдать сцену дизайнеру, он сам доводит анимацию, возвращает таймлайн, готово. Больше не нужно проводить несколько итераций допиливания / сбора фидбека. И это кайф.
dat.gui на максималках. Я два года ждал такую либу :)
#tutorial #tool
YouTube
Deconstructing homunculus.jp distortion with three.js #11
Original: https://homunculus.jp/
Support: https://www.patreon.com/allyourhtml
Twitter: http://twitter.com/akella
Setup: https://gist.github.com/akella/a19954c9ee42e3ae85b76d0e06977535
Facebook: http://facebook.com/akella
#threejs #glsl #webgl
Support: https://www.patreon.com/allyourhtml
Twitter: http://twitter.com/akella
Setup: https://gist.github.com/akella/a19954c9ee42e3ae85b76d0e06977535
Facebook: http://facebook.com/akella
#threejs #glsl #webgl
Forwarded from Blink links
This media is not supported in your browser
VIEW IN TELEGRAM
Jam3 Trend Reports
Ребят из студии Jam3 (работали с Google, Levi’s, adidas, Postmates, eBay и др.) запустили проект Trends Report – это серия маленьких презентаций-размышления о будущем интернет-технологий.
Первый репорт о модной концепции Метавселенных, который сейчас на слуху у всех, кто следит за развитие топовых интенет-компаний (Фейсбук, например, делает огромную ставку на концепцию метавсленных).
Интересная для изучения презентация: о первых примерах по созданию вселенных от известных компаний (Roblox x Lil Nas X), к текущему состоянию дел, и к чему мы придём через несколько лет.
trends.jam3.com
Ребят из студии Jam3 (работали с Google, Levi’s, adidas, Postmates, eBay и др.) запустили проект Trends Report – это серия маленьких презентаций-размышления о будущем интернет-технологий.
Первый репорт о модной концепции Метавселенных, который сейчас на слуху у всех, кто следит за развитие топовых интенет-компаний (Фейсбук, например, делает огромную ставку на концепцию метавсленных).
Интересная для изучения презентация: о первых примерах по созданию вселенных от известных компаний (Roblox x Lil Nas X), к текущему состоянию дел, и к чему мы придём через несколько лет.
trends.jam3.com
Forwarded from ENCHARMVERSE
Media is too big
VIEW IN TELEGRAM
ENCHARMVERSE
The world was born.
999 METABOROS are waiting for its keepers. The journey is starting right now!
encharmverse.com
The world was born.
999 METABOROS are waiting for its keepers. The journey is starting right now!
encharmverse.com
ENCHARMVERSE
Ну что ж, этот день настал. Сегодня я запускаю свой метавёрс, над которым я работал последние 4 месяца:
https://encharmverse.com/
За это время я написал свою оффлайн рендерилку на WebGL которая выдает глубину трейсинга больше чем многие профессиональные пакеты и к тому же работает быстрее. Конечно это не бесплатно и пришлось пожертвовать некоторыми возможностями, но я очень доволен результатами :) Заодно сильно прокачал скиллы в реймарчинге, PBR и генеративном арте. Конечно времени сделать всё идеально не хватало, поэтому ещё очень очень много чего нужно доделать и сделать.
Я думаю все в курсе что такое NFT и как эта кухня работает. Так как просто генеративным артом уже к сожалению никого не удивить, вслед за дропами будут идти мини игры и квесты, раскрывающие историю метавселенной. И на саму историю будут влиять решения сообщества и игроков. В общем планы масштабные, ближайший год будет очень интересным :)
Буду очень благодарен если вы поддержите это начинание в соц. сетях:
Твиттер
Инстаграм
Дадим шуму! 🥳🎉🥳
#my
Ну что ж, этот день настал. Сегодня я запускаю свой метавёрс, над которым я работал последние 4 месяца:
https://encharmverse.com/
За это время я написал свою оффлайн рендерилку на WebGL которая выдает глубину трейсинга больше чем многие профессиональные пакеты и к тому же работает быстрее. Конечно это не бесплатно и пришлось пожертвовать некоторыми возможностями, но я очень доволен результатами :) Заодно сильно прокачал скиллы в реймарчинге, PBR и генеративном арте. Конечно времени сделать всё идеально не хватало, поэтому ещё очень очень много чего нужно доделать и сделать.
Я думаю все в курсе что такое NFT и как эта кухня работает. Так как просто генеративным артом уже к сожалению никого не удивить, вслед за дропами будут идти мини игры и квесты, раскрывающие историю метавселенной. И на саму историю будут влиять решения сообщества и игроков. В общем планы масштабные, ближайший год будет очень интересным :)
Буду очень благодарен если вы поддержите это начинание в соц. сетях:
Твиттер
Инстаграм
Дадим шуму! 🥳🎉🥳
#my