Kursor-metaball

Problem

Sprawdzić, ile da się wycisnąć z przeglądarki bez ani jednej zależności.

Rozwiązanie

Jeden plik HTML, który otwiera się prosto z dysku. Maska kursora powstaje z trzydziestu dwóch punktów śladu sklejonych funkcją gładkiego minimum, a rozszczepienie kolorów bierze się z policzenia tej samej maski trzy razy, po razie na kanał. Tekst nie jest elementem strony, tylko teksturą pokrycia liczoną na osobnym canvasie.

Co robi

• Ślad kursora z 32 punktów sklejany funkcją gładkiego minimum
• Aberracja chromatyczna z trzykrotnego liczenia maski z przesunięciem na kanał
• Tekst jako tekstura pokrycia, nie element strony
• Dwa procent ziarna filmowego — tyle wystarczy, żeby gradienty nie układały się w pasy
• Obsługa ograniczonego ruchu i dotyku
• Cztery warianty efektu w osobnych plikach

Na czym zbudowane

• Surowy WebGL1 plus canvas 2D, jeden samowystarczalny plik HTML
• Zero npm, zero CDN, zero bibliotek
• Tekst rysowany na offscreen canvas jako maska pokrycia, potem tekstura
• Ślad kursora: 32 punkty, tłumienie 0.15, łańcuch 0.34
• Blob jako SDF sklejany wielomianowym smooth-min, k rośnie z prędkością
• Jedno wywołanie rysujące na klatkę, TRIANGLE_STRIP, cztery wierzchołki

Jak to wygląda

Maska kursora z aberracją chromatycznąWariant atramentowy

Co to zmieniło

• Lab: nigdzie nie wdrożone, więc żadnego wyniku poza samym plikiem nie ma
• Zero zależności znaczy zero kosztu utrzymania: plik nie starzeje się razem z node_modules i otwiera się z dysku
• Cztery warianty efektu; założenie projektowe: jedno wywołanie rysujące na klatkę, pomiaru w plikach brak

Stack

• WebGL1
• canvas 2D
• zero npm
• zero CDN

Historia

Brief napisany do samego siebie, z kryterium akceptacji wyrażonym liczbą: sześćdziesiąt klatek na sekundę w 1440p, jedno wywołanie rysujące, cztery wierzchołki. Pomiaru w plikach nie ma, więc nie twierdzę, że próg został osiągnięty.