CPU рей-маршинг · SDF-примітиви · Smooth-min змішування · Затінення Фонга · М'які тіні · AO
Пресет
Сцена
Освітлення
М'які тіні
Оточуюче затемнення
Статистика
Час рендеру—
Сер. кроків промен.—
Буфер160×120 → 640×480
Перетягуйте полотно, щоб обертати камеру. Рендеринг виконується на CPU у буфері 160×120.
🎨 Рей-Маршинг та Функції Знакової Відстані
Рей-маршинг — техніка рендерингу, де промені камери просуваються крок за кроком у сцені, описаній виключно математичними функціями відстані — без полігонів і мешів. Розмір кожного кроку дорівнює мінімальній відстані до будь-якої поверхні, що гарантує безпеку. Коли відстань падає нижче порогу, промінь потрапив на поверхню. Ця реалізація виконується повністю на CPU, записуючи пікселі у буфер 160×120 ImageData, який масштабується в 4× до 640×480 — це робить CPU рей-маршинг можливим у реальному часі на 15–20 FPS.
Фізика та математика
Рей-марш: просуваємо t += SDF(origin + t⋅dir) до SDF < 0.001. SDF сфери = |p| − r. SDF бокса — формула sdBox. Тор: |vec2(length(p.xz) − R, p.y)| − r. smin(a,b,k) дає плавне об'єднання. Нормалі оцінюються через скінченні різниці градієнта SDF. Затінення Фонга: ambient + diffuse⋅max(0, n⋅L) + specular⋅(R⋅V)^n. М'які тіні маршують до джерела світла, накопичуючи коефіцієнт напівтіні від просвіту SDF.
Як використовувати
Перетягуйте полотно, щоб обертати камеру. Виберіть пресет для завантаження різних сценних композицій. Регулюйте FOV (30–90°), радіус сфери, фактор smooth-min змішування k та напрямок світла X. Вмикайте та вимикайте м'які тіні й оточуюче затемнення. Режим «Нормалі» відображає карту нормалей безпосередньо. Статистика показує час рендеру CPU та середню кількість кроків на піксель.
Чи знаєте ви?
Smooth-min (smin) популяризував Iñigo Quilez як спосіб злиття SDF-примітивів у органічні, неперервні форми — межа між двома об'єктами розчиняється у м'якому фаску. Регулюючи фактор k, ви контролюєте ширину зони злиття: k=0 — жорстке об'єднання, велике k — широкий плавний перехід. Та сама комбінація примітивів — сфера, бокс та тор — з'являється майже у кожному вступному посібнику з рей-маршингу, оскільки охоплює весь спектр базової математики SDF.
Про рей-маршинг з функціями знакової відстані
Ця симуляція рендерить 3D-сцену повністю на CPU за допомогою рей-маршингу, який також називають трасуванням сфер. Замість мешів сцена описана функціями знакової відстані (SDF), які повертають відстань від будь-якої точки до найближчої поверхні. Кожен промінь камери просувається на цю відстань — t += sceneSDF(origin + t·dir) — поки значення не впаде нижче 0.001, що означає влучання. Пікселі обчислюються у буфері 160×120 і збільшуються в 4× до 640×480.
Елементи керування дозволяють вибрати чотири пресети сцени (сфера, злиття сфери та бокса, тор та повністю змішане тріо), налаштувати FOV від 30° до 90°, радіус сфери, фактор smooth-min змішування k та напрямок світла X. Перемикачі вмикають м'які тіні та оточуюче затемнення, а режим «Нормалі» показує карту нормалей у кольорі. Ці самі SDF-техніки використовуються у демосценових шейдерах, процедурних фракталах та об'ємних ефектах у реальних іграх.
Поширені запитання
Що таке рей-маршинг?
Рей-маршинг — метод рендерингу, який покроково просуває промені камери крізь сцену, описану функціями відстані, а не полігонами. На кожному кроці промінь стрибає на найкоротшу відстань до будь-якої поверхні, томуніколи не перелітає через неї. Коли ця відстань падає нижче малого порогу, вважається, що промінь потрапив на поверхню.
Що таке функція знакової відстані?
Функція знакової відстані повертає відстань від точки до найближчої поверхні фігури: позитивне значення зовні і від'ємне всередині. Наприклад, SDF сфери радіусу r із центром в початку координат — це просто довжина вектора точки мінус r. Уся сцена тут побудована з таких SDF, об'єднаних між собою.
Чому цю техніку також називають трасуванням сфер?
Кожен крок просуває промінь на відстань до найближчої поверхні, що окреслює порожню сферу такого радіусу навколо поточної точки. Промінь може безпечно перестрибнути до краю цієї сфери, не проходячи крізь жодну геометрію. Повторне трасування цих безпечних сфер і дало техніці її альтернативну назву — трасування сфер.
Що робить повзунок smooth-min (k)?
Фактор змішування k керує плавним об'єднанням (smin), яке зливає два SDF-примітиви в одну неперервну форму. При k близькому до нуля з'єднання має жорстку крайку; більше k розширює м'який фаск, де фігури плавно переходять одна в одну. У цій демонстрації він змішує сферу з боксом та тором, створюючи органічні, краплеподібні форми.
Як обчислюються нормалі поверхні?
Нормалі оцінюються методом скінченних різниць SDF: поле вимірюється з малими зміщеннями (EPS = 0.001) вздовж кожної осі та обчислюється градієнт. Нормалізований градієнт вказує від поверхні і використовується для затінення. Режим «Нормалі» відображає цей вектор безпосередньо як червоний, зелений та синій колір, дозволяючи оглядати орієнтацію поверхні.
Як працюють м'які тіні?
Від поверхні до джерела світла відстежується вторинний промінь. Просуваючись, він відстежує найменше співвідношення просвіту SDF до пройденої відстані, що оцінює, наскільки близько промінь проходить до оклюдерів. Це дає коефіцієнт напівтіні, що формує м'які тіні з поступовим затуханням замість різких двійкових тіней.
Що таке оточуюче затемнення тут?
Оточуюче затемнення затемнює щілини та зони контакту, де навколишня геометрія блокує непряме світло. Ця реалізація вимірює SDF у п'яти коротких кроках вздовж нормалі та порівнює очікуваний і фактичний просвіт. Де поблизу є поверхні, затемнення зростає, додаючи тонку глибину та «приземлюючи» об'єкти до підлоги.
Яка модель затінення використовується?
Рендерер використовує затінення за Фонгом: ambient-складова, дифузна складова пропорційна скалярному добутку нормалі та напрямку світла, і дзеркальний відблиск, зведений до степеня для глянцю. Результат тонально відображається кривою Рейнгарда та гамма-коригується (степінь 0.4545) перед записом у буфер пікселів.
Чому рендеринг виконується у такій низькій роздільній здатності?
Рей-маршинг є обчислювально важким, оскільки кожен піксель може обчислювати SDF сцени десятки разів — до 64 кроків. Виконання цього на CPU у JavaScript було б надто повільним при повній роздільній здатності, тому зображення обчислюється у буфері 160×120 і збільшується в 4×. Панель статистики показує час рендеру та середню кількість кроків на піксель.
Чи є цей рендеринг фізично точним?
Він фізично натхненний, але не є фізично точним. Геометрія та нормалі математично коректні з SDF, але освітлення використовує емпіричне затінення Фонга та наближені м'які тіні й оточуюче затемнення замість повного трасування шляхів. Результат передає реалістичну глибину та затінення і при цьому залишається достатньо швидким для роботи на CPU у реальному часі.
Де рей-маршинг застосовується на практиці?
Рей-маршинг з SDF широко використовується у демосценових шейдерах, експериментах на Shadertoy та процедурних фракталах, таких як Мандельбулб. Він також застосовується в реальних іграх для об'ємних хмар, туману та м'яких полів, а також у інструментах, що потребують рендерингу неявних поверхонь без попереднього перетворення їх на полігональні меші.