#ссылка дня

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

Эффекты глитча, игры с частицами, огонь, солнце, вода! Огонь, кстати, выглядит пугающе натурально. А я когда-то убедил заказчика обойтись вариантом попроще… не знал :)

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

#js #webgl

#статья дня

На сайте последней конференции по Next.js многих поразила WebGL-реализация прохождения света через призму. Возможно, не самая физически точная, но от этого не менее потрясающая.

Подобные вещи на промо-сайтах и лендингах определенно точно привлекают внимание не только широкой аудитории «на поиграться», но и разработчиков.

Вот только подробные посты о том, как это делать, выходят довольно редко. Почему-то чаще легче встретить достойное видео от того же Юрия Артюха, чем хорошую статью.

Да даже мой предыдущий пост должен был стать большой статьей… но лень да и формат Телеграма просто не позволяют это сделать.

Поэтому рекомендую обратить пристальное внимание на статью от, собственно, авторов призмы: https://vercel.com/blog/building-an-interactive-webgl-experience-in-next-js

Все шаги, от прототипа и расчетов до оптимизации производительности. Делается все на react-three-fiber. Настоятельно рекомендую пойти и пройти их самостоятельно.

#webgl #react

#статья дня

Пожалуй, всё же эта статья будет статьёй дня. Хотя кто мне запрещал несколько в день? Никто, правильно.

Итак… Работа с WebGL-шейдерами в React через React Three Fiber!

Раз:
https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber/

Два:
https://blog.maximeheckel.com/posts/the-magical-world-of-particles-with-react-three-fiber-and-shaders/

Целая серия (аж две!) статей о шейдерах и RTF, с интерактивными примерами и погружением не только в RTF, но и немного в основы WebGL вообще.

Я прям залип, потрясающего качества работа с очень плотной упаковкой знаний.

Всем шейдеров, котаны!

#webgl #react #rtf

#видео дня

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

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

Так вот, Юрий Артюх записал прекрасное руководство по разным аспектам создания и работы видео с прозрачностью: 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 #бородач