Чи потрібне встановлення для симуляцій?

Ні. Кожна симуляція працює повністю у браузері за допомогою WebGL та Canvas 2D. Нічого встановлювати або завантажувати — відкрийте сторінку і симуляція запуститься негайно.

Чи можна використовувати ці симуляції для навчання?

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

Які пристрої підтримують симуляції?

Усі симуляції працюють у браузерах на комп'ютері (Chrome, Firefox, Edge, Safari). Багато працюють і на мобільних пристроях.

Рендеринг та Комп

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

Real-time graphics algorithms in WebGL 2 / GLSL

Rendering is just solving the light transport equation — tracing where photons come from before they hit the camera. Rasterisation is a fast approximation; ray tracing is the physically correct answer; ray marching lets you render geometry defined by equations instead of triangles.

🌀

★★☆ Середнє

Дослідник фракталів

GPU-accelerated Mandelbrot and Julia sets rendered by the fragment shader's escape-time algorithm. Infinite zoom with smooth colouring bands.

GLSL Escape-Time Smooth Colouring

🔮

★☆☆ Beginner

Kaleidoscope Shader

Fragment shader mirrors and repeats UV space with n-fold symmetry. Polar coordinate tricks and fract() create infinitely tiling patterns.

GLSL UV Tricks Symmetry

🌈

★★☆ Середнє

Rainbow (Mie Scattering)

Physically-based rainbow rendered by tracing sunlight through spherical water droplets. Snell's law, internal reflection, and wavelength dispersion.

GLSL Mie Scattering Optics

💡

★★★ Складне

Рей-марчинг та SDF

Трасування сфер у знакових дистанційних полях: відтворюй будь-яку геометрію за формулою у фрагментному шейдері. М'які тіні та AO.

GLSL Ray Marching SDF

🌑

★★★ Складне

Трасування Шляхів

Незміщений Монте-Карло транспорт світла. Кожен піксель випускає промені, що відбиваються до джерела. Прогресивний рендеринг.

WebGL 2 Monte Carlo BRDF

🎨

Новинка★★☆ Середнє

Процедурні Текстури

Мармур, дерево, хмари, вогонь, клітини Вороного та лава — текстури, згенеровані повністю у GLSL. Без файлів зображень, нескінченна роздільна здатність.

GLSL Шум Перліна Worley

Key Concepts

Algorithms behind every rendered pixel

Ray Marching

Cast a ray from the camera; advance it by the minimum SDF value at each step (sphere tracing). Guaranteed to reach the surface without overshooting. Enables rendering of fractals, infinite repetition, and procedural geometry with no mesh data.

Signed Distance Field

A function sd(p) returning the distance to the nearest surface — negative inside, positive outside. Primitives combine with min (union), max (intersection), and smin (smooth blend). Any geometry is one formula away.

Monte Carlo Rendering

Approximate the rendering integral ∫ L(x, ω) dω by averaging N random ray samples. Error ∝ 1/√N. Importance sampling — shooting more rays toward bright regions — dramatically reduces variance.

BRDF

Bidirectional Reflectance Distribution Function: ratio of outgoing radiance in direction ωₒ to incident irradiance from ωᵢ. Lambertian BRDF = 1/π (perfectly diffuse). Microfacet BRDFs (GGX) model glossy metals and dielectrics.

Learning Resources

Articles and references for graphics programmers

Reference GLSL Cheatsheet Types, built-in functions, uniforms, precision qualifiers, and common shader patterns including SDF primitives and noise. → Article Ray Marching & SDF Techniques Sphere tracing algorithm, SDF primitives, smooth boolean operations, soft shadows, AO, and normals from SDF gradient. → Article Ray Tracing Algorithm From pinhole camera to path tracing. BVH acceleration, refraction (Snell’s law) and Fresnel reflectance. →

All articles →

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

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

Інтерактивна МодельБраузерна симуляція реального часу з живими параметрами

WebGL / Canvas 2DАпаратно-прискорений рендеринг у браузері

Математична ОсноваДиференційні рівняння та чисельне інтегрування

Відкритий КодMIT-ліцензія — вивчайте, змінюйте та використовуйте

Без ВстановленняПрацює у Chrome, Firefox, Safari, Edge

Освітній ФокусПобудовано для чіткого пояснення науки

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

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

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

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

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

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

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

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

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