WebGL · GLSL · Fragment Shader

Płynny shader : interaktywna ciecz

Symulacja płynu w czasie rzeczywistym. Kursor miesza kolorowy płyn, zostawiając smugi i zawirowania w palecie marki.

Poruszaj myszką lub dotknij ekranu

Ładowanie shadera…

WebGL · fragment shader

Ping-pong RT

Dwa WebGLRenderTarget przełączają się każdą klatkę: wyjście jednego staje się wejściem drugiego.

FBM Flow Field

Fractional Brownian Motion (4 oktawy szumu) generuje organiczne pole prędkości bez pliku tekstury.

Semi-Lagrangian

Każdy piksel próbkuje poprzednią klatkę przesunięty o wektor prędkości (advection). Stąd "płynne" smugi.

Mobile-first

Na mobile rozdzielczość symulacji 128px zamiast 256px. Pauza przy nieaktywnej karcie i IntersectionObserver.

Chcesz taki efekt na swojej stronie?

Podobne shadery mogę wbudować w hero, tło sekcji lub jako element brandingowy, efektownie i wydajnie.