#видео дня

Я уже не раз говорил, что видео может сэкономить кучу времени на реализацию уже готовой идеи, будь то анимация по скроллу или просто красивый фон.

Да даже анимацию открытия модального окна можно сделать с помощью видео.

Так вот, Юрий Артюх записал прекрасное руководство по разным аспектам создания и работы видео с прозрачностью: https://youtu.be/Xg6aYfuvRHk

Как и откуда брать? Чем конвертировать? А что с Safari? Как работать в webm и hevc?

Ну и конечно, как имитировать прозрачность и как сделать видео еще меньше, загрузив его с WebGL-маской.

Как всегда прекрасно и вовремя.

#video #alpha #transparency #webgl

#статья дня

Сколько языков вы можете насчитать в браузере?

HTML, CSS, JavaScript, SVG... XML туда же в целом. Ну, это если брать современные.

А что если есть ещё один? И он позволяет делать потрясающие эффекты. И язык этот — GLSL. OpenGL Shading Language. С-подобный язык описания шейдеров.

И вот в представленной статье рассказывается, как сделать эффект сливающихся блямб на Three.js и GLSL: https://mofu-dev.com/en/blog/gooey-shader/

Вообще, шейдеры штука максимально мощная. Даже в вебе. Достаточно посмотреть на галерею https://www.shadertoy.com/

Математики море, конечно :)

#glsl #webgl #threejs

#codepen дня

А давайте, вдогонку к предыдущей новости о появлении popover, взглянем на такой вот шикарный эффект удаления диалога 🙂

Гори всё синим пламенем! Эх, жаль в своё время на проекте, где это было уместно, я не шибко много знал о шейдерах.

Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.

Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa

Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂

Спасибо Ксении Кондрашёвой.

#webgl #shader

#красивое дня

Если вам скажут, что разработка сайтов это не искусство — покажите этому... человеку вот такое: https://codesandbox.io/s/enter-portals-9m4tpc

Я уже минут двадцать просто залипаю.

А секрет-то "просто" в блендинге сцен... Даже документация есть: https://github.com/pmndrs/drei#meshportalmaterial

Вообще, обратите внимание на упомянутую библиотеку drei: это набор полезностей под react-three-fiber на которых можно собирать прекрасное.

#webgl

#статья дня

В период пандемии средства для совместной работы пережили самый настоящий бум. Особенно взлетели видеоконференции и вайтборды (ну, доски с заметками, только онлайн). Успех того же Miro известен всем.

И вот Atlassian, которая имеет в своем арсенале почти все необходимое для организации проектной работы, тоже захотела удержать людей у себя, повысив привлекательность пакета. И выпустила Confluence whiteboards.

Но нас все же интересует не бизнес сторона вопроса, а технологические решения.

И тут нам очень повезло! Они выкатили в своем технологе огромную статью с описанием технических решений своей доски. Упор делали на производительность, потому остановились в итоге на чистом WebGL. Но вот что интересно: React+DOM не то чтобы критично медленнее, вполне себе конкурентноспособно.

В общем, это мы читаем: https://www.atlassian.com/engineering/rendering-like-butter-a-confluence-whiteboards-story

В статье полно ссылок на открытые проекты и концепции вообще. Крайне рекомендую.

#webgl #whiteboard

#красивое дня

Если вам скажут, что разработка сайтов это не искусство — покажите этому... человеку вот такое: https://codesandbox.io/s/enter-portals-9m4tpc

Я уже минут двадцать просто залипаю.

А секрет-то "просто" в блендинге сцен... Даже документация есть: https://github.com/pmndrs/drei#meshportalmaterial

Вообще, обратите внимание на упомянутую библиотеку drei: это набор полезностей под react-three-fiber на которых можно собирать прекрасное.

#webgl #бородач

#codepen дня

Гори всё синим пламенем!

Эх, жаль, в своё время на проекте, где подобное было уместно, я не шибко много знал о шейдерах.

Впрочем Awwwards получили :)

Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.

Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa

Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂

Спасибо Ксении Кондрашёвой.

#webgl #shader #бородач

#codepen дня

Давно собирался написать игру по Гарри Поттеру, но не знал, как?

Не расстраивайся, я принёс решение! Steve Gardner и его прекрасное создание Spell Caster!

Вот: https://codepen.io/ste-vg/full/zYerxoR

Я обожаю подобные примеры. Игра буквально укладывается в несколько экранов кода, но красива до безобразия.

Из технологий — Three.js и стейт-машина Stately, позволяющая описывать состояния приложения через удобные диаграммы.

Много комментариев по коду, интересная реализация распознавания жестов. Хоть сейчас бери и в магазин выкладывай :)

Я залип, в общем, как в игре, так и в её исходниках.

#webgl #threejs #game

#заметка дня

Почему-то так получилось, что на канале очень мало WebGL и я даже React Three Fiber не обозревал. Думаю, надо исправить.

Давайте сразу ссылку на демо из видео, а потом поясню, что к чему: https://nrzns4.csb.app/

Итак, для работы с производительной 3D-графикой у нас имеется WebGL. Но работать с сырым API никому не охота, поэтому вокруг него образовалась куча фреймворков, и наиболее популярный — Three.js.

А вот чтобы объединить React-приложение и сцену (так принято называть 3D-работы) — имеется интересная штука с названием React Three Fiber. В итоге можно с лёгкостью смешивать HTML, хуки, сцены и вообще любой код вместе.

Как-то так:

<Canvas camera={{ position: [0, 0, 20], fov: 15 }}>
  <Lens>
    <Background />
    <Words />
  </Lens>
</Canvas>

Кажется странным, но если вспомнить, что JSX это не что иное как вид вызова функций и передачи аргументов — и всё встаёт на свои места.

Давайте уже к разбору примера. Когда-то давно мой однокурсник забрал RedDot Award за сайт яичного протеина: https://minglabs.com/our-work/pumperlgsund/

Особый кайф был в бутылке, которая искажала текст за собой. Да, зная о том, что это "всего лишь" карты нормалей — магия уже не кажется такой магической, но менее интересным это не становится. И я подумал, было бы забавно повторить этот эффект на React Three Fiber, хотя бы на минимальном уровне.

Если имеется желание сразу перейти к коду, то вот: https://codesandbox.io/p/sandbox/lens-component-nrzns4

Компонент линзы — хотя больше похоже на донышко бутылки — создан Полом Хеншелем, мне же оставалось разобраться с тем, как его подключить и расставить текст и изображение.

Необычно, что работать пришлось в полярных координатах, но простота, с которой добавлялись компоненты мне очень зашла, почти как писать обычный сайт!

Следующим шагом надо попробовать сделать портал, чтобы линза, например, работала как рентген. Или новогодний шар! Или параллакс.

В общем, давайте ваши предложения, котаны.

#webgl #3d #react

#codepen дня

Давно собирался написать игру по Гарри Поттеру, но не знал, как?

Не расстраивайся, я принёс решение! Steve Gardner и его прекрасное создание Spell Caster!

Вот: https://codepen.io/ste-vg/full/zYerxoR

Я обожаю подобные примеры. Игра буквально укладывается в несколько экранов кода, но красива до безобразия.

Из технологий — Three.js и стейт-машина Stately, позволяющая описывать состояния приложения через удобные диаграммы.

Много комментариев по коду, интересная реализация распознавания жестов. Хоть сейчас бери и в магазин выкладывай :)

Я залип, в общем, как в игре, так и в её исходниках.

#webgl #threejs #game #бородач

#видео дня

Я уже не раз говорил, что видео может сэкономить кучу времени на реализацию уже готовой идеи, будь то анимация по скроллу или просто красивый фон.

Да даже анимацию открытия модального окна можно сделать с помощью видео.

Так вот, Юрий Артюх записал прекрасное руководство по разным аспектам создания и работы видео с прозрачностью: https://youtu.be/Xg6aYfuvRHk

Как и откуда брать? Чем конвертировать? А что с Safari? Как работать в webm и hevc?

Ну и конечно, как имитировать прозрачность и как сделать видео еще меньше, загрузив его с WebGL-маской.

Как всегда прекрасно.

#video #alpha #transparency #webgl #бородач

#codepen дня

Гори всё синим пламенем!

Эх, жаль, в своё время на проекте, где подобное было уместно, я не шибко много знал о шейдерах.

Впрочем Awwwards получили :)

Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.

Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa

Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂

Спасибо Ксении Кондрашёвой.

#webgl #shader #бородач

#codepen дня

Мне сегодня захотелось поделиться одной своей старой работой на WebGL: https://codepen.io/alinaki/pen/NWbBbEG

Это пульсирующая сетка из шестиугольников (гексагональная). Заодно и на мышь реагирует. Принимаю предложения по улучшению, перенесено как было.

Во всяком случае, благодаря этой работе я узнал о прекрасной библиотеке для составления подобных: https://github.com/vonWolfehaus/von-grid

Там же, кстати, есть ссылка на математическое описание шестиугольных сеток: https://www.redblobgames.com/grids/hexagons/

Учитывая, что они часто используются в играх – почему бы и нет.

#webgl #three #hexagonal #бородач

#фишка дня

Рукописи не горят! А веб-сайты?

У нас уже был пример сгорающего попапа от Ксении Кондрашовой. Но ей, определённо, было этого мало :)

Итак, встречайте, великолепный пример сочетания шейдеров и анимаций GSAP, а конкретно — GSAP ScrollTrigger: https://codepen.io/ksenia-k/full/GRLqZVR

Впечатляющая работа.

#webgl #animation #shader #scroll

#ссылка дня

Сегодня я подобрал максимально красивый ресурс: набор демок на WebGL: https://ykob.github.io/sketch-threejs/

Эффекты глитча, игры с частицами, огонь, солнце, вода! Огонь, кстати, выглядит пугающе натурально.

Все примеры с исходными кодами, есть и весьма практичные, вроде галереи.

#js #webgl #бородач

#codepen дня

А давайте, вдогонку к предыдущей новости о появлении popover, взглянем на такой вот шикарный эффект удаления диалога 🙂

Гори всё синим пламенем! Эх, жаль в своё время на проекте, где это было уместно, я не шибко много знал о шейдерах.

Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.

Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa

Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂

Спасибо Ксении Кондрашёвой.

#webgl #shader #бородач

#статья дня

Мне очень нравится пытаться учить разработку под 3D и WebGL в частности. Опыт имеется, но минимальный в рамках разработки промо-сайтов.

Шум там наложить, модельку картой нормалей увешать...

Поэтому я очень люблю статьи, которые объясняют работу с шейдерами на примерах. Например, темой статьи, ссылку на которую оставлю ниже, является имитация ЭЛТ-мониторов и телевизоров.

Да-да, под ретро-игры!

Ссылка: https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/

Даны базовые принципы квантизации изображений, дизеринга и результат приводится как на GLSL, так и готовая сцена на react-three.

Очень круто выглядит.

#webgl #shader

#статья дня

Я уже не раз выражал свою любовь к шейдерам и 3D в целом. Это какой-то свой особый мир, который требует отдельного погружения. Когда удаётся прикоснуться самостоятельно — хоть немного — уже ору от восторга.

Хочется выделить хотя бы недели две только на изучение нужной математики.

Ладно, хватит нытья. Сегодня у нас прошлогодняя работа Shopify: глобус чёрной пятницы.

Да, глобусы разных вариаций с какими-нибудь рюшками постоянно появляются в ежегодных отчётах разных компаний, то у GitHub, то у Google. Но Shopify добавили nice touch в виде шейдеров фейрверков.

И выкатили об этом статью! Вот: https://shopify.engineering/how-we-built-shopifys-bfcm-2023-globe

Пройдите сразу, насладитесь этой красотой. А уже потом провалитесь в статью и удивитесь, что все эти фейрверки — это просто вершины икосаэдров.

Кстати, статья интерактивная и начинена примерами кода с ног до головы. Включая работу с моделью глобуса, текстурами и камерой.

Это настоящий подарок.

#webgl #glsl #shaders

#инструмент дня

Не так давно мы с вами использовали 3D-преобразования в CSS для эффектного выбора персонажа: https://t.me/htmlshit/2969

Тогда получилось неожиданно хорошо. Но пришло время для настоящих 3D-моделей!

Сходу демо: https://codepen.io/RAFA3L/pen/raBJjgO

Тут используется веб-компонент <model-viewer>: https://modelviewer.dev/

Атрибуты компонента схожи с тегом video, а JS API максимально простой, да и чаще всего нужна работа с «орбитальной» камерой, как в кодпене выше.

Есть поддержка VR и XR, но я, если честно, от этого совсем далёк :) Поддерживается смена текстур, освещения и теней, установка сцены.

Норм? По-моему, норм :)

#3d #component #webgl

#статья дня

Я уже не раз выражал свою любовь к шейдерам и 3D в целом. Это какой-то свой особый мир, который требует отдельного погружения. Когда удаётся прикоснуться самостоятельно — хоть немного — уже ору от восторга.

Хочется выделить хотя бы недели две только на изучение нужной математики.

Ладно, хватит нытья. Сегодня у нас прошлогодняя работа Shopify: глобус чёрной пятницы.

Да, глобусы разных вариаций с какими-нибудь рюшками постоянно появляются в ежегодных отчётах разных компаний, то у GitHub, то у Google. Но Shopify добавили nice touch в виде шейдеров фейрверков.

И выкатили об этом статью! Вот: https://shopify.engineering/how-we-built-shopifys-bfcm-2023-globe

Пройдите сразу, насладитесь этой красотой. А уже потом провалитесь в статью и удивитесь, что все эти фейрверки — это просто вершины икосаэдров.

Кстати, статья интерактивная и начинена примерами кода с ног до головы. Включая работу с моделью глобуса, текстурами и камерой.

Это настоящий подарок.

#webgl #glsl #shaders #бородач