PL 
EnglishDomyślny
Українська🛸 Neonowy tunel
Leć bez końca przez świecący neonowy tunel z pulsujących pierścieni. Fragment shader z biegunowym mapowaniem tunelu.
O Neonowym tunelu
Neonowy tunel renderuje niekończący się korytarz światła w całości wewnątrz pojedynczego fragment shadera GLSL działającego na karcie graficznej. Nie ma tu żadnej geometrii 3D — jest tylko pełnoekranowy prostokąt (quad), którego każdy piksel jest kolorowany wzorem biegunowego mapowania tunelu: kąt piksela i odwrotność promienia definiują dwuwymiarową przestrzeń tunelu, a współrzędna głębi t = 1/r + czas × prędkość tworzy iluzję lotu do przodu. Okresowe wzory pierścieni i pasów nałożone na tę przestrzeń, w połączeniu z paletą kolorów opartą na funkcji kosinus, tworzą pulsujący neonowy wzór, który widzisz. To czysta sztuka generatywna: w całości proceduralna, bez tekstur, bez siatek.
🔬 Co przedstawia
Symulacja demonstruje biegunowe mapowanie tunelu — klasyczną technikę fragment shaderów. W każdej klatce shader zamienia współrzędne UV ekranu na formę biegunową, stosuje transformację głębi t = 1/r, tworząc poprawny perspektywicznie punkt zbiegu, a następnie rysuje pierścienie (okresowe względem t) i promieniste pasy (okresowe względem kąta), tworząc neonową siatkę. Blask centralny i winieta na krawędziach dodają głębi przestrzennej bez jakiegokolwiek prawdziwego renderowania 3D.
🎮 Jak korzystać
Suwak Flight speed (Prędkość lotu) kontroluje, jak szybko lecisz przez tunel (0,1–4,0). Twist amount (Skręcenie) skręca ściany korytarza w spiralę — spróbuj wartości powyżej 1,5, by uzyskać efekt korkociągu. Ring density (Gęstość pierścieni) ustala, ile neonowych pasów dzieli obwód tunelu (2–24). Colour cycle speed (Prędkość zmiany kolorów) zmienia, jak szybko paleta kosinusowa przechodzi przez odcienie. Przełączaj między trzema paletami (Neon Pink-Cyan, Green Matrix, Sunset) i naciśnij Boost, by uzyskać 2,5-krotny skok prędkości trwający 1,2 sekundy.
💡 Czy wiesz, że?
Wzór palety kolorów opartej na kosinusie — kolor = a + b·cos(2π(c·t + d)) — spopularyzował Inigo Quilez i za jego pomocą można przedstawić niemal każdy płynny gradient kolorów za pomocą zaledwie czterech trójskładnikowych wektorów. Powolne przesuwanie fazy palety w czasie (suwak Colour cycle speed) sprawia, że cały tunel płynnie przechodzi przez widmo barw — technika szeroko stosowana w produkcjach demoscenowych i wizualizacjach na żywo (live-coding).
Najczęściej zadawane pytania
Jak biegunowe mapowanie tunelu właściwie tworzy iluzję głębi 3D?
Sztuczka polega na transformacji odwrotności promienia: t = 1/r mapuje ekran tak, że wartości blisko środka (mały r) dają bardzo duże t, symulując dużą głębię, podczas gdy wartości blisko krawędzi (duży r) dają małe t, symulując bliską ścianę. Równomierne zwiększanie t wraz z czasem sprawia, że wszystkie warstwy głębi przesuwają się w stronę widza jednocześnie, tworząc przekonującą perspektywę lotu do przodu — wszystko to bez kamery, macierzy czy jakiejkolwiek geometrii.
Czym jest paleta kolorów oparta na kosinusie i dlaczego wygląda tak płynnie?
Paleta kosinusowa generuje kolor, obliczając a + b · cos(2π(c · t + d)) dla każdego kanału koloru, gdzie a, b, c, d są stałymi wektorami trójskładnikowymi (vec3). Ponieważ kosinus jest funkcją ciągłą i ograniczoną między -1 a 1, wynikiem jest zawsze płynna, cykliczna krzywa kolorów bez gwałtownych skoków. Trzy wbudowane palety różnią się tylko czterema wektorami stałych: Neon Pink-Cyan używa równych amplitud dla psychodelicznej tęczy, Green Matrix przesuwa amplitudę w stronę zieleni, a Sunset skłania się ku ciepłym czerwieniom i pomarańczom.
Co dokładnie zmienia suwak Twist w shaderze?
Twist dodaje zależną od głębi rotację do kąta biegunowego: a = kąt + t × twist. Ponieważ t rośnie w miarę zbliżania się do środka, głębsze części tunelu są obracane bardziej niż płytsze, przez co linie siatki tworzą spiralę zamiast biec prosto. Przy twist = 0 pasy są idealnie promieniste; przy twist ≈ 1,5 tworzą łagodną spiralę; powyżej 2,5 korytarz zamienia się w ciasny korkociąg, który przy dużej prędkości może być dość dezorientujący.
Dlaczego po kliknięciu Boost następuje krótki skok prędkości?
Przycisk Boost tymczasowo ustawia prędkość lotu na 2,5 × aktualną wartość suwaka (maksymalnie 10) dokładnie na 1,2 sekundy, po czym przywraca poprzednią prędkość. To prosty setTimeout w warstwie sterującej JavaScript — uniform shadera uSpeed jest zapisywany bezpośrednio w każdej klatce, więc nie ma żadnego wygładzania ani interpolacji; skok i powrót są natychmiastowe. Jeśli chcesz utrzymać dużą prędkość przez dłuższy czas, po prostu przesuń suwak Flight speed w górę.
Czy ta symulacja używa WebGL, Three.js, czy zwykłego canvasu?
Używa Three.js jako cienkiej nakładki na WebGL. Three.js obsługuje tworzenie kontekstu, pełnoekranowy quad PlaneGeometry oraz ShaderMaterial, który hostuje niestandardowe shadery wierzchołków i fragmentów GLSL. Shader wierzchołków jest trywialny (po prostu przekazuje pozycje w przestrzeni obcięcia); cała logika wizualna znajduje się w shaderze fragmentów. Nie są używane żadna geometria Three.js, światła ani przebiegi post-processingu — Three.js służy wyłącznie do wygodnego zarządzania płótnem WebGL i uniformami.