#codepen дня

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

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

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

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

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

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

#webgl #shader

#codepen дня

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

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

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

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

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

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

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

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

#codepen дня

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

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

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

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

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

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

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

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

#фишка дня

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

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

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

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

#webgl #animation #shader #scroll

#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

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

Угадайте, что красиво летит по небу и укладывается в 249 символов?

Правильно, SpaceX Starship!

Не, ну правда:

vec2 p=(FC.xy-r*.5)/r.y*mat2(8,-6,6,8),v;for(float i,f=3.+snoise2D(p+vec2(t*7.,0));i++<50.;o+=(cos(sin(i)*vec4(1,2,3,1))+1.)*exp(sin(i*i+t))/length(max(v,vec2(v.x*f*.02,v.y))))v=p+cos(i*i+(t+p.x*.1)*.03+i*vec2(11,9))*5.;o=tanh(pow(o/1e2,vec4(1.5)));

Это валидный код шейдера на GLSL для приложения Twigl: https://twigl.app/?ol=true&ss=-OGqcXbWDIJun2QTR4Cm

Они буквально конкуренты Shadertoy, и тот и другой — онлайн-инструменты для мгновенной проверки и рисования шейдеров на языке GLSL.

Вот, кстати, пример на Shadertoy: https://www.shadertoy.com/view/XX3fDH

В этом варианте ещё и камера дрожит.

Красиво? Не то слово!

#shader #glsl #3d