Туннель из 5 синусов

Как справедливо заметил @StrangerintheQ про туннель из логотипов Reatom: "я вижу тут sin sin sin", а их оказалось 5

В начале я сделал просто рендер колец, идущих друг за другом, было уже поздно, решил оставить работу как есть, но добавить туда немного ряби, так как с ней все выглядит лучше. И увлекся синусами настолько, что за 20 минут превратил кольца во что-то неузнаваемое, даже создатель Codepen оценил и запинил работу в тренды.

float ripple(vec4 p, float rad, float freq, float amp, float time) {
        return 
          sin((rad) * freq) * amp
          + sin(p.x * freq) * amp 
          + sin(p.y * freq) * amp
          + sin((p.z * 0.01) * freq) * amp
          + sin(time * 0.01) * amp
          ;
      }

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

Очередная серия Animations vs, теперь про кодинг

Как сказали в комментариях:

Episode 4 of the "I don't understand much of it but it looks amazing"

https://www.youtube.com/watch?v=EFmxPMdBqmU

Молнии и магнетизм

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

Чтобы это вообще хоть как-то успевало считаться за один кадр использую паттерн Spatial partitioning (пространственное разделение), о котором прочел довольно давно, не самый эффективный зато пишется в 10 строчек:

const getKey = (x, y) => `${grid(x, 100)},${grid(y, 100)}`
  
  const spatial = {}
  points.forEach((point, index) => {
    const key = getKey(point.x, point.y)
    
    if (!spatial[key]) {
      spatial[key] = [point]
    } else {
      spatial[key].push(point)
    }
  })

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

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

Luma + Three.js = 1 апрельский пост

Давно не было такого, чтобы прямо увидел что-то и побежал сразу играться откинув все остальное.

Luma WebGL Library — это библиотека которая позволяет вставить 3д снимок из приложения Luma в сцену на Three.js вообще без каких-либо приседаний.

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

https://lekzd.github.io/demo/luma/dancing_castle.html

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

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. (подробнее про Триангуляцию)

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

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

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