Тема 8 · урок 1 з 2 · 120 хвилин
Сьогодні на парті лежать окуляри, і кожен приміряє їх по черзі.
Усередині — намальована кімната. Повертаєш голову — вона повертається разом із тобою.
Ми розберемо цю кімнату на частини. Виявиться, що вона складена з точок, трикутників і картинки, натягнутої зверху.
А наприкінці ти сам збереш сцену з трьох фігур і покладеш її
у теку ~/www/lesson-08/.
Наступного уроку ця сцена стане прототипом твоєї гри.
Слова «полігон», «меш», «паралакс» і «6DoF» поки нічого не означають. Розберемо їх по черзі.
| Етап | Хв | Що робимо |
|---|---|---|
| Демонстрація окулярів | 15 | По черзі приміряємо, решта заповнює таблицю VR/AR/MR |
| Шкала занурення | 15 | Де закінчується AR і починається MR |
| Анатомія 3D-об'єкта | 20 | Вершини, полігони, меш, матеріал, UV |
| Перерва | 10 | — |
| Переглядач і полігони | 15 | Крутимо фігуру, дивимося на лічильники |
| Кадри й кіберхвороба | 15 | 90 fps, 20 мс, чому стає зле |
| Стерео і DoF | 10 | Два зображення, міжзіниця, 3DoF проти 6DoF |
| Перша сцена A-Frame | 15 | Локально, потім по FTP |
| Підсумок і ДЗ | 5 | Задум гри, перевірка себе |
| Разом | 120 |
~/www/lesson-08/. Теки lesson-15 немає.Три букви, які плутають навіть у рекламі
Уяви лінійку. На одному її кінці — кімната, у якій нічого не намальовано. На другому — світ, у якому намальовано геть усе. Між ними — усе решта.
Саме так у 1994 році описали це Пол Мілґрем і Фуміо Кішіно. Не три окремі коробки, а суцільна шкала.
| Що бачиш | Чи знає система, де стіл | Приклад поза іграми | |
|---|---|---|---|
| AR | реальний світ плюс намальоване зверху | здебільшого ні: картинка «плаває» і заходить у стіни | переклад вивіски камерою, розмітка деталей у сервісі, приміряння кросівок |
| MR | реальний світ, у якому віртуальне поводиться як справжнє | так: будує карту кімнати, віртуальне ховається за реальним диваном | хірург бачить знімок КТ поверх пацієнта, монтажник — схему поверх верстата |
| VR | тільки намальоване, реального не видно взагалі | знає межі, щоб ти не врізався в шафу | тренажер пілота й машиніста, репетиція операції, віртуальна екскурсія музеєм |
Ось проста перевірка. Закоти віртуальний м'яч під справжнє крісло. У MR він за кріслом зникне, як зник би справжній. Це вміння зветься оклюзія.
А якщо м'яч завжди зверху й проходить крізь меблі — це AR. Хоч би що писали на коробці.
Додаток міряє, як диван стане у твоїй кімнаті. Дивишся в телефон — диван ніби на підлозі. Але коли обходиш його, він трохи «пливе» і краєм заходить у стіну. Що це насправді?
Шість шарів, які легко переплутати між собою
Усередині гри немає «м'ячика». Є список точок із координатами. Є список, як ці точки з'єднати. І є опис, як поверхня поводиться зі світлом.
Найближча побутова річ — картонна коробка. Кутики, склейки, стінки і наліпка зверху. Розбираємо по шарах саме так.
| Шар | Що це | Де ти це вже бачив |
|---|---|---|
| Вершина vertex | точка з трьома числами: x, y, z | кутик коробки |
| Ребро edge | відрізок між двома вершинами | склейка коробки |
| Полігон face | плоска ділянка, обмежена ребрами; майже завжди трикутник, бо через три точки завжди проходить рівно одна площина | стінка коробки |
| Меш mesh | усі вершини й полігони разом — це і є «форма» об'єкта | сама коробка без наліпок |
| Матеріал | правило, як поверхня взаємодіє зі світлом: колір, шорсткість, металевість, прозорість | різниця між матовим і глянцевим папером |
| Текстура | звичайна картинка (PNG, JPG, WebP — усе з теми 4), натягнута на меш | наліпка на коробці |
Меш задає форму. Матеріал і текстура — вигляд.
Звідси практичний висновок. Додаси полігонів — напис на коробці різкішим не стане. Різкість напису живе в розмірі картинки-текстури, а не в кількості трикутників.
Розберемо на коробці. Розріж її по ребрах і поклади на стіл — вийде пласка викрійка з шести прямокутників.
З мешем роблять так само. Поверхню ріжуть по ребрах і розкладають на площині. Отримана викрійка зветься UV-розгортка.
Кожна вершина отримує ще два числа: u і v.
Це її місце на картинці, від 0 до 1. Літери взяли такі просто тому,
що x, y і z уже зайняті.
Товариш каже: «Я підняв кількість полігонів на ящику — і напис на ньому став різкіший». Що сталося насправді?
Об'єкти самі по собі невидимі
Сцена — це список того, що є у світі, і де воно стоїть.
Двох речей у цьому списку не видно ніколи. Це камера і світло. Прибери будь-яку з них — і на екрані не буде взагалі нічого.
| Що | За що відповідає | Що буває, коли не так |
|---|---|---|
| Камера | звідки і куди дивимося, наскільки широкий кут | об'єкт усередині камери або позаду неї — екран порожній |
| Розсіяне світло ambient | рівне підсвічування звідусіль | без нього затінений бік об'єкта чорний, як діра |
| Спрямоване світло directional | сонце: паралельні промені з одного напрямку, дає тіні й об'єм | без нього все пласке, як наліпка |
| Небо / фон | що видно там, де немає об'єктів | порожнеча кольору за замовчуванням |
| Координати | X — вправо, Y — вгору, Z — на тебе; отже «вглиб екрана» це мінус Z | поставив куб на 0 0 3 — він за спиною |
0 1.6 0. Тобто приблизно 1,6 метра над
підлогою — зріст дорослої людини. Об'єкт у 0 0 0 опиниться
просто під ногами. Об'єкт у 0 1.6 0 — усередині твоєї голови.
Став приблизно так: 0 1.5 -3. Це три метри вглиб.Ти додав у сцену куб, відкрив сторінку — і бачиш порожнє небо. Помилок у консолі немає, колір заданий. Що перевіряєш першим?
Тут немає жодної бібліотеки — тільки вершини, трохи тригонометрії й SVG
Фігура нижче зібрана прямо на цій сторінці. Браузер бере список тривимірних точок. Повертає їх. Ділить на відстань до камери.
Виходять пласкі координати — куди саме малювати на екрані. Цей крок зветься проєкція. У справжній грі його робить відеокарта, мільйони разів за секунду.
Ти витягнув повзунок деталізації на максимум, увімкнув обертання — і фігура почала смикатися. Що саме подорожчало?
Чому 30 кадрів на телевізорі — нормально, а в окулярах — погано
Ти повернув голову в окулярах. За цей час система має встигнути чотири речі. Зчитати датчики. Порахувати нове положення. Намалювати два кадри — по одному на око. Вивести їх на екран.
Увесь цей ланцюжок звуть motion-to-photon, «від руху до фотона».
Прийнято тримати його менше 20 мс. Довше — і мозок починає помічати, що світ відстає від голови.
| Частота | Час кадру | Де трапляється |
|---|---|---|
| 120 Гц | 8,3 мс | режим із запасом на Quest 3 і PSVR2 |
| 90 Гц | 11,1 мс | звична цільова частота у VR |
| 72 Гц | 13,9 мс | мінімум, який Meta вимагає від інтерактивних застосунків |
| 60 Гц | 16,7 мс | кіно, відео, звичайні ігри на моніторі |
| 30 Гц | 33,3 мс | нормально на телевізорі, зле в окулярах |
Згадай, як стає зле в машині від читання. Очі втупилися в книжку й кажуть «нерухомо». А вухо відчуває, що машину трясе й хилить.
За це відчуття відповідає вестибулярний апарат у внутрішньому вусі. Він ловить прискорення й нахили.
В окулярах виходить те саме, тільки навпаки. Очі бачать, що ти мчиш уперед. Вухо повідомляє, що ти сидиш на стільці.
Мозок отримує два несумісні звіти. І реагує на них, як на отруєння: нудота, піт, головний біль. Це і зветься кіберхвороба.
У VR конфлікт підсилює ще й затримка. Світ повертається на кілька десятків мілісекунд пізніше за голову.
| Що зменшує кіберхворобу | Чому працює |
|---|---|
| Телепорт замість плавного ходіння | немає штучного прискорення — немає конфлікту з вестибулярним апаратом |
| Поворот ривками по 30° | плавний поворот камери мишею — найсильніший подразник у VR |
| Віньєтка: краї темніють у русі | прибирає рух із бічного зору, який найчутливіший до нього |
| Нерухома точка опори в кадрі | кабіна, ніс корабля, руль дають очам «нерухомий» орієнтир |
| Стабільні 72–90 fps без просідань | кожне просідання — це стрибок затримки, а стрибки помітніші за саму затримку |
Порахуймо чесно. Quest 3 малює 2064 × 2208 пікселів на кожне око. Це 4 557 312 пікселів на око, або 9 114 624 на кадр. При 90 кадрах за секунду виходить близько 820 мільйонів пікселів щосекунди.
Тепер звичайний монітор. 1920 × 1080 при 60 кадрах — це 2 073 600 × 60 ≈ 124 мільйони пікселів за секунду.
Різниця приблизно у 6,6 раза. І все це має влізти в окуляри, які працюють від акумулятора й гріються у тебе на обличчі.
Гонки на телевізорі при 30 fps тобі нормальні, а та сама швидкість в окулярах через дві хвилини робить зле. Чому саме в окулярах?
Два майже однакові зображення — і різниця між ними
Перевір прямо зараз. Витягни палець перед собою і закривай очі по черзі.
Палець стрибає туди-сюди, а дальня стіна — майже ні. Так виходить тому, що очі рознесені на кілька сантиметрів і бачать світ із двох різних точок.
Цей стрибок зветься паралакс. Саме він і несе відомості про відстань: що ближчий предмет, то сильніше він стрибає.
Відстань між центрами зіниць у дорослих у середньому близько 63 мм. У переважної більшості — від 50 до 75 мм. У дітей від п'яти років вона починається приблизно від 40 мм. Скорочено цю відстань звуть IPD.
Тому в окулярах є регулювання. У Quest 2 це три фіксовані положення: 58, 63 і 68 мм. У Quest 3 — плавний повзунок: лінзи їздять приблизно в межах 58–70 мм. Підтримуваний діапазон виробник називає ширшим — близько 53–75 мм.
Якщо центр лінзи не збігається з центром зіниці, картинка мутніє по краях. Вона двоїться і швидко втомлює очі.
Це не «окуляри погані». Це неправильно виставлена міжзіниця, і виправляється вона за десять секунд.
Ти дав окуляри молодшій сестрі. Вона каже, що все двоїться і болять очі, хоча тобі в тих самих окулярах чітко. Що перевіряєш першим?
Головна різниця між дешевими й дорогими окулярами
Порахуй, скількома способами можна ворухнутися. Обертань у просторі рівно три: кивнути, покрутити головою, нахилити її до плеча. Переміщень теж три: вбік, угору-вниз, уперед-назад. Разом шість.
Ці способи звуть ступенями свободи, англійською degrees of freedom. Звідси й скорочення DoF. Питання одне: скільки з шести пристрій уміє помітити.
| 3DoF | 6DoF | |
|---|---|---|
| Що вимірює | три обертання голови | три обертання плюс переміщення по трьох осях |
| Чим вимірює | гіроскоп і акселерометр — вони є в будь-якому телефоні | камери на корпусі, що впізнають кімнату (inside-out), або зовнішні датчики (outside-in) |
| Що можна | крутити головою й роздивлятися навколо | присідати, нахилятися, обходити предмет, зазирати за нього |
| Приклади | картонний тримач для телефона, старі Gear VR і Daydream | Meta Quest, PSVR2, Apple Vision Pro, шоломи для комп'ютера |
| Що добре | 360°-відео, віртуальні екскурсії, панорами | усе, де треба дотягтися рукою або зайти за ріг |
Тому 360-градусне відео чудово працює і в найдешевшому тримачі. Підходити там усе одно нікуди: картинку знято з однієї точки.
А от гра, де треба обійти колону, у 3DoF неможлива взагалі. Річ не у слабкому процесорі. Річ у тім, що система не знає, що ти зрушив з місця.
В окулярах за 2000 грн ти крутиш головою і все чудово роздивляєшся. Але нахилитися й зазирнути за колону не виходить: картинка не змінюється. Чому так?
Кроки 2—5 — у себе на комп'ютері, кроки 6—8 — у кабінеті на сервері. Крок 1 лише питає сервер, чи бібліотека вже на місці. Галочки зберігаються — сторінку можна закрити.
index.html
і game-design.json.
Бібліотеку aframe.min.js учитель уже розклав по кабінетах.
Ти її не завантажуєш — вона близька до ліміту 2 МБ.
Посилатися на чужі сайти теж не можна: чекер такі посилання шукає
й перевірку не пропустить.Три примітиви — це мінімум. Ім'я в <title>
постав своє, позиції поміняй. Якщо сцена збігатиметься з шаблоном один-в-один,
учитель на наступному уроці попросить переробити її під свій задум.
Сьогодні заповнюєш три ключі з семи. Решту чотири — вдома.
echo … > game-design.json
у Windows PowerShell 5.1 — вийде UTF-16.
Тоді чекер із jq скаже «невалідний JSON», хоч очима все правильно.
У PowerShell пиши так:
… | Out-File -Encoding utf8 game-design.json.
А найнадійніше — просто зберегти з редактора.Чекер відкриє сторінку справжнім браузером без вікна і подивиться, що в ній сталося. Спроби не обмежені.
Демонстраційний режим: результат згенеровано для показу. На сервері
ця кнопка викликає POST /api/check, який запускає
check 08 від імені учня.
aframe.min.js тягнеться
з твого сабдомена, а не з чужого сайту;Це те, що бачить учитель, коли виставляє оцінку.
| Складник | Вага | Результат |
|---|
Доповни game-design.json до повних семи ключів.
Додай mechanics — щонайменше три пункти, кожен окремим реченням.
Додай controls, win_condition
і target_device.
У полі target_device напиши чесно, 3DoF це чи 6DoF.
А в controls поясни, як гравець рухається.
Одне залежить від іншого — саме про це й був сьогоднішній урок.
Наукові статті, документація виробників і специфікації. Перевіряти дозволено й корисно.
Повний список із поясненнями, що саме звідки взято і які числа
є ілюстративними, — у файлі urok-15-джерела.md поруч
із цією сторінкою.