Тор · Пляшка Клейна · Стрічка Мебіуса · Сфера · Гіперболоїд · 3D каркас
Параметрична поверхня визначається відображенням двох параметрів (u, v) у 3D координати: x = f(u,v), y = g(u,v), z = h(u,v). Ця симуляція рендерить п'ять класичних поверхонь як інтерактивні каркасні сітки:
Пляшку Клейна вперше описав Фелікс Клейн у 1882 році. У 4D вона не має самоперетинів — лише при зануренні у 3D виглядає так, ніби проходить крізь себе. Стрічку Мебіуса, відкриту Августом Мебіусом і Йоганном Лістінгом у 1858 році, увічнив М.К. Ешер у відомій роботі «Стрічка Мебіуса II», де мурахи крокують нескінченною петлею. Гіперболоїди градирень обирають за їх структурну міцність — кожна точка поверхні лежить на прямій лінії, що дозволяє будувати з прямих сталевих балок.
Цей дослідник рендерить п'ять класичних поверхонь, заданих відображенням двох параметрів (u, v) у 3D координати: x = f(u,v), y = g(u,v), z = h(u,v). Він вибирає сітку точок у діапазонах u і v, будує чотирикутні грані між сусідніми точками, застосовує матриці обертання навколо осей X та Y і просту перспективну проєкцію, після чого сортує грані за середньою глибиною (алгоритм художника) перед відмальовуванням їх у контексті Canvas 2D.
Випадний список «Поверхня» перемикає між тором, сферою, пляшкою Клейна, стрічкою Мебіуса та гіперболоїдом. Повзунки U і V задають густину сітки (від 8 до 80 та від 4 до 40 сегментів), повзунок швидкості керує автообертанням, а прапорці вмикають каркас, заповнені грані та осі. Ви можете перетягувати по canvas, щоб обертати вид вручну. Параметричні поверхні лежать в основі CAD-моделювання, комп'ютерної графіки та вивчення топології й диференціальної геометрії.
Що таке параметрична поверхня?
Це поверхня, описана функцією двох параметрів, u і v, яка повертає точку (x, y, z) у просторі. Коли u і v пробігають свої діапазони, точки окреслюють усю поверхню. Це позбавляє потреби в єдиному рівнянні, що пов'язує x, y і z.
Як ця симуляція малює поверхні?
Вона вибирає сітку значень u і v, обчислює 3D точку в кожному вузлі, обертає ці точки навколо осей X та Y і проєктує їх у 2D за допомогою базового перспективного ділення. Потім чотирикутні грані сортуються від далеких до близьких за глибиною та відмальовуються в контексті Canvas 2D.
Що контролюють повзунки сегментів U і V?
Вони задають, наскільки дрібно поверхня поділена вздовж кожного напрямку параметрів. U змінюється від 8 до 80, а V — від 4 до 40 сегментів. Більше сегментів дають гладкішу, щільнішу сітку ціною відмальовування більшої кількості граней, тоді як менша кількість оголює базову сітку.
Тор використовує великий радіус R = 1.0 і малий радіус r = 0.4, з x = (R + r·cos v)·cos u, y = (R + r·cos v)·sin u і z = r·sin u. Обидва u і v змінюються від 0 до 2π, обгортаючи трубку навколо центрального кільця, формуючи форму бублика.
Справжня пляшка Клейна — це неорієнтована поверхня, яка вкладається без самоперетину лише у чотирьох вимірах. При зануренні в наш 3D простір шийка змушена проходити крізь стінку, що породжує видимий самоперетин. Поверхня все одно не має окремих внутрішньої та зовнішньої сторін.
Стрічка Мебіуса має лише одну сторону та один край. Симуляція будує її, проводячи малий відрізок по колу й одночасно повертаючи його на пів оберту, так що два кінці з'єднуються з перевертанням. Якщо вести пальцем уздовж неї, ви повертаєтесь до початку на протилежній грані.
Геометрія кожної поверхні математично коректна, але рендерер — це легкий рушій Canvas 2D, а не повноцінний 3D конвеєр. Він використовує сортування за глибиною, а не z-буфер, плоске затінення на грань і не має належної моделі освітлення, тож призначений для інтуїції та дослідження, а не для точної візуалізації.
Однопорожнинний гіперболоїд — це двічі лінійчата поверхня: кожна точка лежить на двох прямих. Це дозволяє інженерам будувати вигнуту, міцну форму з прямих сталевих балок, а зведений у талії профіль ефективно протистоїть вітровим навантаженням, тому його віддають перевагу для градирень і деяких високих споруд.
Він сортує всі чотирикутні грані за їх середньою глибиною і малює найдальші першими, так що ближчі грані перекривають їх. Це створює правдоподібне відчуття суцільності без попіксельного буфера глибини, хоча може давати збій для взаємопроникної геометрії, як-от самоперетин пляшки Клейна.
Так. Клацніть і перетягуйте по canvas, щоб вільно обертати поверхню; горизонтальні перетягування змінюють обертання навколо Y, а вертикальні — навколо X. Повзунок швидкості задає темп автоматичного обертання, а кнопка «Скинути» повертає орієнтацію до її типових початкових кутів.