🔮

Рендеринг та Комп'ютерна графіка

Вивчайте ray tracing, SDF ray marching, path tracing та GLSL шейдери через інтерактивні симуляції рендерингу прямо у браузері.

3 симуляцій GLSL · WebGL 2 Ray Marching · SDF · Fractals

Симуляції категорії

Графічні алгоритми реального часу на WebGL 2 / GLSL

Рендеринг — це просто розв’язання рівняння переносу світла — відстеження того, звідки приходять фотони, перш ніж вони потраплять у камеру. Растеризація — це швидке наближення; трасування променів — фізично коректна відповідь; рей-марчинг дозволяє відтворювати геометрію, задану рівняннями, а не трикутниками.

✨
★★★ Складне
GPGPU-система частинок
Сотні тисяч частинок оновлюються повністю на GPU через ping-pong float-текстури. Виберіть поведінку — curl-шум, N-тіл атрактори, бойди або Лоренц — і обертайте рій.
Three.js GPGPU GLSL Частинки
🌀
★★☆ Середнє
Дослідник фракталів
Множини Мандельброта та Жулія з прискоренням на GPU, відтворені алгоритмом часу виходу у фрагментному шейдері. Нескінченне масштабування з плавними кольоровими смугами.
GLSL Escape-Time Smooth Colouring
🔮
★☆☆ Початківець
Шейдер калейдоскопа
Фрагментний шейдер віддзеркалює та повторює UV-простір з n-кратною симетрією. Трюки з полярними координатами та fract() створюють нескінченно повторювані візерунки.
GLSL UV Tricks Symmetry
🌈
★★☆ Середнє
Веселка (розсіювання Мі)
Фізично коректна веселка, відтворена шляхом трасування сонячного світла крізь сферичні краплі води. Закон Снеліуса, внутрішнє відбиття та дисперсія за довжиною хвилі.
GLSL Mie Scattering Optics
💡
★★★ Складне
Рей-марчинг та SDF
Трасування сфер у знакових дистанційних полях: відтворюй будь-яку геометрію за формулою у фрагментному шейдері. М'які тіні та AO.
GLSL Ray Marching SDF
🌑
★★★ Складне
Трасування Шляхів
Незміщений Монте-Карло транспорт світла. Кожен піксель випускає промені, що відбиваються до джерела. Прогресивний рендеринг.
WebGL 2 Monte Carlo BRDF
🎨
Новинка★★☆ Середнє
Процедурні Текстури
Мармур, дерево, хмари, вогонь, клітини Вороного та лава — текстури, згенеровані повністю у GLSL. Без файлів зображень, нескінченна роздільна здатність.
GLSL Шум Перліна Worley

Ключові концепції

Алгоритми, що стоять за кожним відтвореним пікселем

Рей-марчинг
Випускайте промінь з камери; просувайте його на мінімальне значення SDF на кожному кроці (трасування сферами). Гарантовано досягає поверхні без перельоту. Дозволяє відтворювати фрактали, нескінченне повторення та процедурну геометрію без даних сітки.
Знакове поле відстаней
Функція sd(p), що повертає відстань до найближчої поверхні — від’ємну всередині, додатну зовні. Примітиви поєднуються через min (об’єднання), max (перетин) та smin (плавне змішування). Будь-яка геометрія — за один крок до формули.
Рендеринг Монте-Карло
Наближайте інтеграл рендерингу ∫ L(x, ω) dω, усереднюючи N випадкових вибірок променів. Похибка ∝ 1/√N. Вибірка за важливістю — спрямування більшої кількості променів до яскравих ділянок — значно зменшує дисперсію.
BRDF
Двонапрямна функція розподілу відбиття: відношення вихідної яскравості у напрямку ωₒ до падаючої опроміненості з ωᵢ. Ламбертова BRDF = 1/π (ідеально дифузна). BRDF мікрограней (GGX) моделюють глянцеві метали та діелектрики.

Навчальні ресурси

Статті та довідники для програмістів графіки

Довідник Шпаргалка з GLSL Типи, вбудовані функції, уніформи, кваліфікатори точності та поширені шейдерні патерни, зокрема SDF-примітиви та шум. → Стаття Техніки рей-марчингу та SDF Алгоритм трасування сферами, SDF-примітиви, плавні булеві операції, м’які тіні, AO та нормалі з градієнта SDF. → Стаття Алгоритм трасування променів Від камери-обскури до трасування шляхів. Прискорення BVH, заломлення (закон Снеліуса) та відбивна здатність Френеля. →
Усі статті →

Ключові Концепції

Теми та алгоритми, які ви досліджуєте в цій категорії

Інтерактивна МодельБраузерна симуляція реального часу з живими параметрами
WebGL / Canvas 2DАпаратно-прискорений рендеринг у браузері
Математична ОсноваДиференційні рівняння та чисельне інтегрування
Відкритий КодMIT-ліцензія — вивчайте, змінюйте та використовуйте
Без ВстановленняПрацює у Chrome, Firefox, Safari, Edge
Освітній ФокусПобудовано для чіткого пояснення науки

Часті Запитання

Поширені запитання про цю категорію симуляцій

Чи потрібне встановлення для симуляцій?
Ні. Кожна симуляція працює повністю у браузері за допомогою WebGL та Canvas 2D. Нічого встановлювати або завантажувати — відкрийте сторінку і симуляція запуститься негайно.
Чи можна використовувати ці симуляції для навчання?
Так — усі симуляції розроблені як освітні та не потребують облікового запису. Вони широко використовуються на університетських лекціях та уроках природничих наук.
Які пристрої підтримують симуляції?
Усі симуляції працюють у браузерах на комп'ютері (Chrome, Firefox, Edge, Safari). Багато працюють і на мобільних пристроях.

Про Симуляції Рендерингу та Комп’ютерної Графіки

Трасування променів, шейдери, частинки та рендеринг реального часу

Симуляції рендерингу візуалізують алгоритми, що перетворюють математичні моделі на зображення. Від рейтрейсингу та рекурсивних відбиттів до растеризації та шейдерних програм.

Моделі освітлення демонструють закон Ламберта, модель Кука-Торренса та фізичне затінення (PBR). Системи частинок створюють реалістичні ефекти вогню, диму та води.

Кожна симуляція побудована з акцентом на точність. Алгоритми рендерингу ідентичні тим, що використовуються в промислових движках.

Інші категорії