Шары с физикой на компьютах

600 объектов, 1 draw call без учета пост процессинга благодаря инстансингу. Физика притяжения к аттрактору и калькуляция коллизий на видеокарте с помощью компьют шейдеров.

Просто залипательная штука. В сафари тоже работает :)

Эта демка - часть моего завтрашнего доклада на HolyJS. Буду вещать про то какой TSL классный, даже несмотря на то что еще сыроват.

Live: https://pavelmazhuga.com/lab/attractor-collisions/webgpu

Source code: https://github.com/pavel-mazhuga/portfolio/tree/main/src/app/lab/attractor-collisions/webgpu

Первый русскоязычный доклад про TSL уже завтра на HolyJS!

Кто такой этот TSL и почему это важно

Threejs Shading Language это новое апи, позволяющее декларативно описать флоу течения данных из одних переменных в другие, используя узлы и связи, как на гифке выше, но кодом. Ну и где там революция?, поясню:

— это все исполняется на видеокарте
— это замена GLSL
— просто пишешь ноды, а Threejs генерит два шейдера на GLSL из этого
— теперь чтобы поменять что-то в материалах Threejs не нужно делать string.replace() 🤦
— туда завезли кроссбраузерные вычисления на видеокарте

Только посмотрите какой путь предлагал Threejs ранее:

var myMaterial = new THREE.MeshStandardMaterial()
myMaterial.onBeforeCompile = shader => {
  shader.fragmentShader = //this is the fragment program string in the template format 
    shader.fragmentShader.replace( //we have to transform the string
      '#include <alphamap_fragment>', //we will swap out this chunk
      require('my_alphamap_fragment.glsl') //with our own
    )
}

И документации не было, все копали в исходниках сами. Короче ура

HolyJS Spring 2025

— Здравствуйте, Александр, вот вы очередной раз поучаствовали в организации крупной конференции, что чувствуете?
— Как же я задолбался...

Вот и прошли 2 дня встреч и долгожданных докладов, которые готовились последние 4 месяца, а некоторых спикеров я убеждал выступить с докладами на протяжении года. А другие буквально за 6 часов согласились выступить на открытом микрофоне, в конце первого дня.

Вот в эти дни довольно трудно было, но без них было бы еще труднее.

Прорыв в блюре, свечении и тенях

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

...our first priority had to be glows and shadows, or Guido would start flipping tables. (╯°□°)╯︵ ┻━┻

Ну сделали и сделали, а что раньше было не так?

Все дело, в том, что тени, антиалисинг и размытие реализованы на всех популярных платформах, которые могут выводить анимации Lottie и Rive, но вот беда: реализации везде разные, а значит с разными ограничениями.

— только на iPhone есть нативный блюр фона,
— на Android тени рассчитываются строго по гайдам Material Design и никак больше,
— на вебе есть Box Shadow.

При этом на каждой платформе можно самостоятельно взять и нарисовать тени и блюр, но здесь кроется главная проблема — производительность.

Вот пример кода, который нужен, чтобы получить R из RGB для центрального пиксела в сетке 3x3, где в с уже матрица со средним арифметическим соседних пикселей всего изображения (называется Convolution)

float r = c[0][0] 
+ c[1][0] + c[2][0]
+ c[0][1] + c[1][1] 
+ c[2][1] + c[0][2] 
+ c[1][2] + c[2][2];

и что это даст? сглаживание размером в 1 пиксел! Никто даже не заметит разницы на современных экранах, чтобы она была заметна нужно хотя бы повторить это 16 раз, последовательно, так и реализуется размытие по Гауссу.

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

Так что же сделали в Rive?

Во-первых, хороший рендер SVG который отлично разбивает полигоны на треугольники, для того, чтобы эффективнее рисовать это на GPU. (подробнее про Триангуляцию)

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

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

Про свой метод поиска пересечений и особенности триангуляции, конечно же, умолчали)

Новосибирск, 31 мая, попробую замотивировать людей создавать сообщества.

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

Надеюсь, все не зря

https://15.codefest.ru/lecture/2831

Муса тоже топ, увидел его посты и решил позвать выступить на HolyJS, получился очень нескучный доклад про WebGPU, срывающий покровы.

Фон для открывающей презентации SPB-Frontend

Так как у меня в семье ожидается пополнение, передал ребятам все дела по предстоящему митапу. Роль ведущего решил взять на себя Кирилл, который на прошлом митапе порадовал всех докладом о том как монтировать видео кодом. Он сделал презентацию для открытия, куда попросил меня сделать динамичный фон вместо статичных волн.

Для таких работ, где просто нужен шейдер во весь экран, я уже не первый раз использую библиотеку RGBA от Константина. Она настолько минималистична, что вместо двух треугольников для рисования там используется один!)

https://codepen.io/lekzd/pen/WbNVXzM

История на миллион, о которой никто не знает

Всё началось в 2016 году, когда я сделал браузерную версию Героев 3 на JavaScript и выступил с докладом об этом проекте. Тогда для меня открылся совершенно новый мир — мир выступлений, конференций и поездок по разным странам.

В декабре 2024 года мне начали массово присылать ссылку на пост про новых Героев 3 в браузере. Пост разлетелся по пабликам как вихрь. Несмотря на просьбы автора упоминать его при цитировании, СМИ благополучно проигнорировали это. В самом посте был упомянут @caiiiycuk как разработчик браузерного порта. Не раздумывая ни секунды, я написал ему и предложил выступить с докладом на HolyJS. Он согласился — и я был этому безумно рад.

Мы созвонились, и он рассказал, что всё началось ещё 10 лет назад, когда он начал работать над портом DOSBox под браузер — js-dos. Так он создал полноценную среду для эмуляции DOS-игр в вебе. Позже он познакомился с игровым журналистом по прозвищу 54-й, который обожает старые игры и загорелся идеей находить их, портировать и выкладывать на сайт. Так, не торопясь, вдвоём они собрали более 2000 ретро-игр на https://dos.zone. Причём всё это — ни разу не встретившись вживую.

Весь март 2025 года мы вместе готовили презентацию (я выступал в роли ревьюера). Изначально рабочее название звучало как «Проблемы портирования игр через WASM», но со временем оно трансформировалось в более цепляющее — «Герои Меча и Магии 3 в браузере. Сложно или нет?». Мне очень хотелось продать этот труд по максимуму, и я убедил автора, что в названии стоит использовать самый громкий тайтл из трёх, которые фигурируют в презентации. К счастью, работать с Александром было одно удовольствие — материал получился и хардкорным, и нескучным одновременно.

И вот наступает день выступления — 8 апреля. В зале собираются слушатели. Александр — простой парень в очках — выходит на сцену в футболке, которую он специально напечатал для доклада. На ней — логотипы Героев 3, Вангеров и Периметра — тех самых игр, про портирование которых он расскажет. Техники подключают микрофон, проверяют всё в последний раз. Начинаем. Я оглядываюсь по залу и… ДА КАКОГО ЧЕРТА, ТУТ ВСЕГО ЛИШЬ ТРЕТЬ ЗАЛА??? Каждый раз, когда я сам рассказывал про Героев 3, залы были битком, люди стояли в дверях. Неужели все забыли?..

Так зачем я всё это рассказываю?

Потому что благодаря HolyJS, Александр впервые за много лет посетил Москву и встретился с 54-м вживую — вот так, спустя 10 лет совместной работы.

Славянский орнамент

Построил из примеров SDF фигур из статьи Индиго Квилеза: https://iquilezles.org/articles/distfunctions2d/

https://codepen.io/lekzd/pen/KwwKmNP

Мою вчерашнюю работу повторили, но в 11 строчек кода 0_0

Ночью Иван Дианов, написал в Генклубе, мол привет, форкнул твою работу, а я глянул и ахнул, там всего 11 строчек кода на GLSL:

void main() {
  vec2 uv = (gl_FragCoord.xy*2.-resolution.xy)/resolution.y;
  uv=vec2(atan(uv.y,uv.x)/6.283*128.,(log(length(uv))-time)*20.);
  uv.x+=32.*sin(time+floor(uv.y/16.));
  uv=abs(mod(uv,16.)-8.);
  uv=-abs(uv)+4.;
  uv*=mat2(sin(vec4(11,0,0,33)+.785))*sqrt(2.);
  float l=abs(uv.y-2.)-1.;
  if(uv.y<uv.x)uv.yx=uv.xy;
  gl_FragColor.r+=step(0.,min(abs(abs(uv.x)-2.)-1.,l));
  gl_FragColor.a=1.;
}

Если у вас в голове только одна мысль: "Я что-то ничего в коде не понял", то у меня та же)

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

https://codepen.io/illus0r/pen/LEEYrKm