This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Я уже не раз выражал свою любовь к шейдерам и 3D в целом. Это какой-то свой особый мир, который требует отдельного погружения. Когда удаётся прикоснуться самостоятельно — хоть немного — уже ору от восторга.
Хочется выделить хотя бы недели две только на изучение нужной математики.
Ладно, хватит нытья. Сегодня у нас прошлогодняя работа Shopify: глобус чёрной пятницы.
Да, глобусы разных вариаций с какими-нибудь рюшками постоянно появляются в ежегодных отчётах разных компаний, то у GitHub, то у Google. Но Shopify добавили nice touch в виде шейдеров фейрверков.
И выкатили об этом статью! Вот: https://shopify.engineering/how-we-built-shopifys-bfcm-2023-globe
Пройдите сразу, насладитесь этой красотой. А уже потом провалитесь в статью и удивитесь, что все эти фейрверки — это просто вершины икосаэдров.
Кстати, статья интерактивная и начинена примерами кода с ног до головы. Включая работу с моделью глобуса, текстурами и камерой.
Это настоящий подарок.
#webgl #glsl #shaders
Я уже не раз выражал свою любовь к шейдерам и 3D в целом. Это какой-то свой особый мир, который требует отдельного погружения. Когда удаётся прикоснуться самостоятельно — хоть немного — уже ору от восторга.
Хочется выделить хотя бы недели две только на изучение нужной математики.
Ладно, хватит нытья. Сегодня у нас прошлогодняя работа Shopify: глобус чёрной пятницы.
Да, глобусы разных вариаций с какими-нибудь рюшками постоянно появляются в ежегодных отчётах разных компаний, то у GitHub, то у Google. Но Shopify добавили nice touch в виде шейдеров фейрверков.
И выкатили об этом статью! Вот: https://shopify.engineering/how-we-built-shopifys-bfcm-2023-globe
Пройдите сразу, насладитесь этой красотой. А уже потом провалитесь в статью и удивитесь, что все эти фейрверки — это просто вершины икосаэдров.
Кстати, статья интерактивная и начинена примерами кода с ног до головы. Включая работу с моделью глобуса, текстурами и камерой.
Это настоящий подарок.
#webgl #glsl #shaders
👍12❤4
Media is too big
VIEW IN TELEGRAM
#ссылка дня
Сегодня день такой, про SVG-фильтры.
Когда я в какой-то очередной раз писал дифирамбы шейдерам, мой коллега справедливо заметил, что так-то SVG-фильтры прекрасно с этим справляются и незаслуженно обделены вниманием.
Ну, вниманием они обделены не только со стороны сообщества веб-разработчиков, но и немного со стороны разработчиков браузеров. У WebGL и WebGPU перспективы шире.
Но это не означает, что у SVG-фильтров нет козырей в рукаве! Один из самых важных — их можно применить прямо на HTML-элемент и он как работал, так и будет работать!
Естественно, этим пользуется не только Ана Тюдор (кстати, не пользуется, она не работает как разработчик, только как художник в этом смысле и консультант).
Глядите, какая демка: https://svg-shaders.vercel.app/
И её код: https://github.com/shuding/svg-shaders
Она позволяет с лёгкостью или нагенерировать нужных фильтров, или вообще принять идею для своих проектов.
Повторю: HTML-элементы продолжают работать как работали и это в разы проще, чем спользовать решения на Three.js.
Кстати, прикольный и уместный вариант использования SVG-фильтров на контенте мы с вами уже наблюдали на примере... PornHub: https://t.me/htmlshit/1416
#svg #filters #html #shaders
Сегодня день такой, про SVG-фильтры.
Когда я в какой-то очередной раз писал дифирамбы шейдерам, мой коллега справедливо заметил, что так-то SVG-фильтры прекрасно с этим справляются и незаслуженно обделены вниманием.
Ну, вниманием они обделены не только со стороны сообщества веб-разработчиков, но и немного со стороны разработчиков браузеров. У WebGL и WebGPU перспективы шире.
Но это не означает, что у SVG-фильтров нет козырей в рукаве! Один из самых важных — их можно применить прямо на HTML-элемент и он как работал, так и будет работать!
Естественно, этим пользуется не только Ана Тюдор (кстати, не пользуется, она не работает как разработчик, только как художник в этом смысле и консультант).
Глядите, какая демка: https://svg-shaders.vercel.app/
И её код: https://github.com/shuding/svg-shaders
Она позволяет с лёгкостью или нагенерировать нужных фильтров, или вообще принять идею для своих проектов.
Повторю: HTML-элементы продолжают работать как работали и это в разы проще, чем спользовать решения на Three.js.
Кстати, прикольный и уместный вариант использования SVG-фильтров на контенте мы с вами уже наблюдали на примере... PornHub: https://t.me/htmlshit/1416
#svg #filters #html #shaders
👍5❤2
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Я уже не раз выражал свою любовь к шейдерам и 3D в целом. Это какой-то свой особый мир, который требует отдельного погружения. Когда удаётся прикоснуться самостоятельно — хоть немного — уже ору от восторга.
Хочется выделить хотя бы недели две только на изучение нужной математики.
Ладно, хватит нытья. Сегодня у нас прошлогодняя работа Shopify: глобус чёрной пятницы.
Да, глобусы разных вариаций с какими-нибудь рюшками постоянно появляются в ежегодных отчётах разных компаний, то у GitHub, то у Google. Но Shopify добавили nice touch в виде шейдеров фейрверков.
И выкатили об этом статью! Вот: https://shopify.engineering/how-we-built-shopifys-bfcm-2023-globe
Пройдите сразу, насладитесь этой красотой. А уже потом провалитесь в статью и удивитесь, что все эти фейрверки — это просто вершины икосаэдров.
Кстати, статья интерактивная и начинена примерами кода с ног до головы. Включая работу с моделью глобуса, текстурами и камерой.
Это настоящий подарок.
#webgl #glsl #shaders #бородач
Я уже не раз выражал свою любовь к шейдерам и 3D в целом. Это какой-то свой особый мир, который требует отдельного погружения. Когда удаётся прикоснуться самостоятельно — хоть немного — уже ору от восторга.
Хочется выделить хотя бы недели две только на изучение нужной математики.
Ладно, хватит нытья. Сегодня у нас прошлогодняя работа Shopify: глобус чёрной пятницы.
Да, глобусы разных вариаций с какими-нибудь рюшками постоянно появляются в ежегодных отчётах разных компаний, то у GitHub, то у Google. Но Shopify добавили nice touch в виде шейдеров фейрверков.
И выкатили об этом статью! Вот: https://shopify.engineering/how-we-built-shopifys-bfcm-2023-globe
Пройдите сразу, насладитесь этой красотой. А уже потом провалитесь в статью и удивитесь, что все эти фейрверки — это просто вершины икосаэдров.
Кстати, статья интерактивная и начинена примерами кода с ног до головы. Включая работу с моделью глобуса, текстурами и камерой.
Это настоящий подарок.
#webgl #glsl #shaders #бородач
❤10👍2