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!

Кто такой этот 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 часов согласились выступить на открытом микрофоне, в конце первого дня.

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