UK 
EnglishТипова
Polski🔮 Рей-марчинг і SDF
Interactive ray marching renderer using signed distance fields. Sphere-trace SDFs to render spheres, boxes and tori with soft shadows, ambient occlusion and smooth boolean operations — all computed in a GLSL fragment shader.
Про Ray Marching і функції знакової відстані
Ця симуляція рендерить 3D-сцену повністю на CPU за допомогою ray marching, також відомого як sphere tracing. Замість сіток сцена визначається функціями знакової відстані (SDF), які повертають відстань від будь-якої точки до найближчої поверхні. Кожен промінь камери просувається саме на цю відстань — t += sceneSDF(origin + t·dir) — доки значення не впаде нижче 0.001, позначаючи влучення. Пікселі обчислюються в буфері 160×120 і масштабуються у 4 рази до 640×480.
🔬 Фізика та математика
Ray march: просування 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. Шейдинг Phong: ambient + diffuse⋅max(0, n⋅L) + specular⋅(R⋅V)^n. М'які тіні просуваються до джерела світла, накопичуючи коефіцієнт напівтіні з просвіту SDF.
🎮 Як користуватись
Тягніть по полотну, щоб обертати камеру. Оберіть пресет, щоб завантажити іншу композицію сцени. Налаштуйте FOV (30–90°), радіус сфери, коефіцієнт плавного змішування k та напрям світла X. Перемикайте м'які тіні й ambient occlusion. Увімкніть режим Normals, щоб візуалізувати карту нормалей напряму. Stats показують час рендеру CPU за кадр і середню кількість кроків променя на піксель.
💡 Чи знали ви?
Smooth-min (smin) популяризував Іньїго Кільєс (Inigo Quilez) як спосіб змішувати примітиви SDF в органічні, безперервні форми — межа між двома об'єктами розчиняється в м'якому скругленні. Налаштовуючи коефіцієнт змішування k, ви контролюєте ширину зони злиття: k=0 — жорстке об'єднання, велике k створює широке грибоподібне змішування. Та сама комбінація примітивів, що й тут, — сфера, бокс і тор — з'являється майже в кожному вступному підручнику з ray marching, бо охоплює весь спектр базової математики SDF.
Часті питання
Що таке ray marching?
Ray marching — це метод рендерингу, який просуває промінь камери вперед крізь сцену, описану функціями відстані, а не полігонами. На кожному кроці промінь стрибає на найкоротшу відстань до будь-якої поверхні, тож ніколи не проскакує повз неї. Коли ця відстань падає нижче малого порогу, вважається, що промінь влучив у поверхню.
Що таке функція знакової відстані (SDF)?
Функція знакової відстані повертає відстань від точки до найближчої поверхні форми, з додатним знаком зовні форми й від'ємним усередині. Наприклад, сфера радіуса r з центром у початку координат — це просто довжина вектора точки мінус r. Уся сцена тут побудована з таких SDF, поєднаних разом.
Чому це також називають sphere tracing?
Кожен крок просуває промінь на відстань до найближчої поверхні, що визначає порожню сферу цього радіуса навколо поточної точки. Промінь може безпечно стрибнути до краю цієї сфери, не проходячи крізь жодну геометрію. Повторне трасування цих безпечних сфер і дало техніці альтернативну назву — sphere tracing.
Що робить повзунок smooth-min (k)?
Коефіцієнт змішування k керує плавним об'єднанням (smin), яке зливає два примітиви SDF в одну безперервну форму. При k, близькому до нуля, з'єднання — жорстке ребро перетину; більше k розширює м'яке скруглення, де форми переходять одна в одну. У цій демонстрації воно змішує сферу з боксом і тором, створюючи органічні, краплеподібні форми.
Як обчислюються нормалі поверхні?
Нормалі оцінюються за допомогою скінченних різниць SDF: поле семплюється з малими зміщеннями (EPS = 0.001) уздовж кожної осі, і береться градієнт. Нормалізований градієнт вказує від поверхні й використовується для шейдингу. Режим Normals відображає цей вектор напряму в червоний, зелений і синій кольори, щоб можна було досліджувати орієнтацію поверхні.
Як працюють м'які тіні?
Вторинний промінь просувається від поверхні до джерела світла. Просуваючись, він відстежує найменше відношення просвіту SDF до пройденої відстані, що оцінює, наскільки близько промінь проходить повз перешкоди. Це дає коефіцієнт напівтіні, створюючи м'які, поступово згасаючі краї тіней замість жорстких бінарних тіней.
Що таке ambient occlusion тут?
Ambient occlusion затемнює тріщини й ділянки контакту, де навколишня геометрія блокує непряме світло. Ця реалізація семплює SDF на п'яти коротких кроках уздовж нормалі й порівнює очікуваний і фактичний просвіт. Там, де сусідні поверхні скупчуються біля точки, оклюзія зростає, додаючи тонку глибину й прив'язуючи об'єкти до підлоги.
Яку модель шейдингу використано?
Рендерер використовує шейдинг у стилі Phong: амбієнтний член, дифузний член, пропорційний скалярному добутку нормалі й напряму світла, та відблиск, піднесений до степеня для глянцю. Результат тонується кривою Reinhard і гамма-коригується (степінь 0.4545) перед записом у буфер пікселів.
Чому рендер відбувається у такій низькій роздільній здатності?
Ray marching обчислювально важкий, бо кожен піксель може обчислювати SDF сцени десятки разів, до 64 кроків кожен. Виконання цього на CPU в JavaScript було б надто повільним при повній роздільній здатності, тож зображення обчислюється в буфері 160×120 і масштабується у 4 рази. Панель Stats повідомляє час рендеру та середню кількість кроків променя на піксель.
Чи цей рендеринг фізично точний?
Він фізично натхненний, а не фізично точний. Геометрія й нормалі математично коректні з SDF, але освітлення використовує емпіричний шейдинг Phong і наближені м'які тіні й ambient occlusion, а не повний path tracing. Результат передає реалістично виглядаючу глибину й шейдинг, залишаючись достатньо швидким для роботи наживо на CPU.
Де ray marching використовується на практиці?
Ray marching із SDF широко використовується в demoscene-шейдерах, експериментах Shadertoy і процедурних фракталах, таких як Mandelbulb. Він також з'являється в реальних іграх для об'ємних хмар, туману й м'яких полів, а також в інструментах, яким потрібно рендерити неявні поверхні без попереднього перетворення їх у полігональні сітки.