Про цю симуляцію
Неоновий тунель малює нескінченний коридор світла виключно у фрагментному GLSL-шейдері, що виконується на GPU. Тут немає жодної 3-D геометрії — лише повноекранний квадрат, де кожен піксель забарвлюється за формулою полярного відображення тунелю: кут і обернений радіус пікселя задають 2-D простір тунелю, а координата глибини t = 1/r + час × швидкість створює ілюзію польоту вперед. Шари кілець і смуг, накладені на цей простір разом із косинусною палітрою кольорів, формують пульсуючу неонову сітку. Це чисте генеративне мистецтво: повністю процедурне, без текстур і полігонів.
🔬 Що демонструє
Симуляція показує полярне відображення тунелю — класичну техніку фрагментних шейдерів. Щокадру шейдер перетворює екранні UV-координати в полярну форму, застосовує перетворення глибини t = 1/r для перспективно правильної точки зникнення, потім малює кільця (що повторюються за t) і радіальні смуги (що повторюються за кутом), формуючи неонову сітку. Центральний bloom та вінієтка по краях додають просторову глибину без справжнього 3-D рендерингу.
🎮 Як користуватися
Повзунок Швидкість польоту регулює швидкість руху крізь тунель (0.1 – 4.0). Закрутка спіралізує стіни — спробуйте значення понад 1.5 для штопорного ефекту. Щільність кілець задає кількість неонових смуг навколо окружності тунелю (2 – 24). Швидкість зміни кольору визначає, як швидко косинусна палітра обертається крізь відтінки. Перемикайтеся між трьома палітрами (Неон рожево-блакитний, Зелена матриця, Захід сонця) і натискайте Прискорення для сплеску швидкості у 2.5× на 1.2 секунди.
💡 Цікаво знати
Формула косинусної палітри — колір = a + b·cos(2π(c·t + d)) — була популяризована Ініго Кілесом і може передати практично будь-який плавний кольоровий градієнт лише чотирма 3-компонентними векторами. Повільно зміщуючи фазу палітри з часом (повзунок Швидкість зміни кольору), весь тунель безперервно проходить крізь спектр — техніка, широко застосовувана у демосцені та лайв-кодингу.
Часті запитання
Як полярне відображення тунелю створює ілюзію 3-D глибини?
Секрет — у перетворенні оберненого радіуса: t = 1/r так відображає екран, що значення поблизу центру (малий r) дають дуже великий t, імітуючи велику глибину, а значення біля краю (великий r) дають малий t, імітуючи ближню стінку. Рівномірне збільшення t з часом змушує всі шари глибини одночасно прокручуватися до глядача, створюючи переконливу перспективу польоту — без камери, матриць або геометрії.
Що таке косинусна палітра і чому вона виглядає такою плавною?
Косинусна палітра генерує колір за формулою a + b · cos(2π(c · t + d)) для кожного кольорового каналу, де a, b, c, d — константи-вектори. Оскільки косинус неперервний і обмежений між −1 та 1, результат завжди є плавною циклічною кривою без різких стрибків. Три вбудовані палітри відрізняються лише значеннями чотирьох векторів: Неон рожево-блакитний використовує рівні амплітуди для психоделічної веселки, Зелена матриця зміщує амплітуду до зеленого, а Захід сонця — до теплих червоних і помаранчевих відтінків.
Що насправді змінює повзунок Закрутка у шейдері?
Закрутка додає залежне від глибини обертання до полярного кута: a = кут + t × закрутка. Оскільки t зростає в міру наближення до центру, глибші частини тунелю обертаються більше, ніж поверхневі, — лінії сітки спіралізуються замість того, щоб йти прямо. При закрутці = 0 смуги суто радіальні; при ~1.5 вони утворюють плавну спіраль; понад 2.5 коридор стає тугим штопором, що на великій швидкості може заплутати орієнтацію.
Чому кнопка Прискорення дає лише короткочасний сплеск?
Кнопка Прискорення тимчасово встановлює швидкість польоту рівною 2.5× від поточного значення повзунка (але не більше 10) на рівно 1.2 секунди, після чого повертає початкову швидкість. Це звичайний setTimeout у шарі керування JavaScript — шейдерний uniform uSpeed записується безпосередньо кожного кадру, тому нікякого пом'якшення немає; стрибок і повернення відбуваються миттєво. Якщо потрібна стала висока швидкість, просто перетягніть повзунок.
Чи використовує симуляція WebGL, Three.js або звичайний canvas?
Симуляція використовує Three.js як тонку обгортку над WebGL. Three.js відповідає за створення контексту, повноекранний квадрат PlaneGeometry і ShaderMaterial, що містить власні GLSL-шейдери. Вершинний шейдер тривіальний (лише передає позиції у кліп-просторі); вся візуальна логіка знаходиться у фрагментному шейдері. Жодних об'єктів Three.js, освітлення чи пост-процесингу не задіяно — Three.js використовується виключно для зручного управління WebGL-контекстом і uniform-змінними.