Соединил наработки вместе

После репоста в сообществе @artalog получил массу подозрений в наркомании ценного фидбека и постарался улучшить демку.

Появилась идея, что все наработанное можно объединить в одну сцену: сначала будет хаос, затем его упорядочит Reatom, который потом распадется на цветы и обратно в хаос.

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

SDF или как сделана демка из этого поста

Signed Distance Fields (SDF) — это техника в шейдерах, позволяющая описывать формы с помощью функций, возвращающих расстояние до ближайшей поверхности объекта. Визуализация происходит путём вычисления расстояния для каждого пикселя и определения, находится ли он внутри или снаружи фигуры.

Наткнулся на крутую статью про это, там рисуют анимацию из Рика и Морти, пошагово: берем кружок, потом еще один, искривляем и вот у нас уже голова, далее рисуем остальную сову.

https://danielchasehooper.com/posts/code-animated-rick/

Туннель из 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!