#статья дня

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

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

#статья дня

Помните пост про шейдеры? https://t.me/htmlshit/1865

Я все пытался вспомнить, где же я видел просто шикарную статью о том, как создать свой первый шейдер и таки нашел!

Немного математики, немного программирования — и вот уже получается классический google-style спиннер: http://pixelscommander.com/interactive-revolution/glsl-web-components-webgl/

Вы наверняка видели такие на SVG, но вряд ли — на WebGL :)

Вход в шейдеры очень прост, а вот выхода можно и не найти....

#glsl #spinner

#статья дня

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

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

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

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

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

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

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

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

#webgl #glsl #shaders

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

Угадайте, что красиво летит по небу и укладывается в 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

#статья дня

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

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

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

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

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

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

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

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

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