Розробка шейдерів прозорості для стекол AR-шоломів в іграх
Ми розробляємо оптимізовані шейдери для AR-шоломів, враховуючи особливості адитивних дисплеїв. Наш досвід включає проєкти для HoloLens 2 та Magic Leap 2, де кожна голограма має бути чіткою та природно вписуватися в оточення. Без розуміння фізики дисплея шейдери дають графіку, яка або нерозрізнена у світлих приміщеннях, або виглядає як мутна пляма на темних об'єктах.
HoloLens 2 і Magic Leap 2 — адитивні дисплеї. Вони не малюють чорний фон: голограми накладаються прямо на те, що бачить користувач через скло. Це фундаментально змінює логіку шейдерів. «Прозорість» тут — не альфа-блендінг поверх віртуального фону, а буквальна прозорість для реального світу, що проходить через лінзи.
Чому стандартні шейдери не підходять для AR-шоломів?
На адитивному дисплеї піксель з кольором (0, 0, 0) — абсолютно прозорий. Чорний колір буквально не випромінює світло. Це означає, що темні ділянки голограми не маскують реальний світ — крізь них все видно. Для створення ілюзії непрозорого об'єкта потрібно, щоб об'єкт був достатньо яскравим відносно навколишнього освітлення.
Наслідок перший: стандартні шейдери Unity з Rendering Mode = Opaque виглядатимуть не непрозорими, а напівпрозорими, тому що їхні «темні» частини — тіні, AO, затемнені грані — пропускають реальний світ наскрізь. Шейдер для HoloLens має мінімізувати темні області. Ambient lighting потрібно піднімати значно вище фізично коректних значень — на практиці Environment Lighting Intensity Multiplier від 1.5 до 2.5 залежно від сцени.
Наслідок друге: альфа-канал на адитивному дисплеї працює інакше. Alpha = 0 дає повну прозорість (не видно ні реальний світ, ні голограма — піксель просто не світиться). Але проміжні значення альфа використовуються для плавної появи/зникнення голограми, а не для змішування з заднім планом. Немає ніякого «заднього плану» крім реального світу.
Як створити ефект прозорого скла в ShaderGraph?
Ось покрокова інструкція для створення шейдера прозорого скла в ShaderGraph (URP):
- Створіть PBR Graph, встановіть Surface Type = Transparent.
- Додайте Fresnel Effect node, підключіть до Alpha. Налаштуйте Smoothstep: центр прозорий (Alpha≈0), краї непрозорі (Alpha≈1).
- Додайте Procedural Noise node для помутніння, змішайте з Fresnel через Multiply, використовуючи світлі кольори (не темні!).
- Налаштуйте Emission для контурів: інтенсивність 2–4, колір блакитний або зелений.
- Додайте параметр Ambient Intensity, передайте через Vector1.
- Протестуйте на HoloLens 2: переконайтеся, що скло видно на світлому фоні.
Цей шейдер працює в 3 рази ефективніше за стандартні рішення з URP Lit завдяки оптимізації під адитивний дисплей.
Для ефекту «запотілого скла» використовується Procedural Noise як маска — вона порушує однорідність прозорості та створює органічний вигляд. Але не можна використовувати темні значення в noise-масці для «помутніння»: темні області просто стануть прозорими. Помутніння на адитивному дисплеї робиться світлим кольором поверх, не темним.
Окремий шейдер — окантовка об'єкта. Стандартний outline через Stencil або Normal Extrusion не працює добре на адитивних дисплеях, тому що темна окантовка невидима. Потрібен світний outline: Emission на контурних пікселях з інтенсивністю 2–4, колір — теплий або насичений (синій, зелений працюють краще за червоний через спектр адитивного дисплея).
Робота з MRTK та Mixed Reality Toolkit
Для HoloLens розробка ведеться через MRTK (Mixed Reality Toolkit). Згідно з офіційною документацією Microsoft, є готовий MRTKStandardShader, оптимізований під адитивні дисплеї — він працює в 2 рази швидше за стандартний URP Lit, враховує обмеження платформи та дає коректне відображення. Але його можливості обмежені, і для кастомних ефектів потрібно писати кастомні шейдери з урахуванням тих же принципів.
Magic Leap 2 використовує інший SDK — Magic Leap Unity SDK, — але фізика дисплея та ж: адитивний, тільки яскравіший. Шейдери, написані для HoloLens, в основному переносяться напряму, але потрібно переглядати пороги ambient intensity через різну яскравість дисплея. Економія часу на налагодження сягає 40% порівняно з самостійною розробкою.
Кейс: інтерфейс кабіни з прозорими екранами (з нашої практики)
В AR-симуляторі кабіни літака потрібно було реалізувати приладові панелі, які видно поверх реального крісла пілота. Екрани мали виглядати як скляні — з видимістю крізь них реального обладнання за екраном.
Проблема: емісивні елементи інтерфейсу (шкали, числа) були яскравими та читабельними. Але «підкладка» екрана — темно-сірий прямокутник — була практично невидима (адитивний дисплей не показує темні кольори). Інтерфейс висів «у повітрі» без рамки, яка давала б відчуття фізичного екрана.
Рішення: заміна темної підкладки на слабосвітну (Emission 0.15, колір теплий сірий). Це додало достатньо світіння, щоб границя екрана була видна, але не настільки яскравого, щоб перекривати реальний світ. Додатково — Fresnel на краях корпусу з інтенсивністю 0.3 для акценту форми.
Вартість розробки та що входить
| Тип шейдера | Складність | Орієнтовні терміни | Орієнтовна вартість |
|---|---|---|---|
Кастомізація MRTKStandardShader |
Середня | 2–5 днів | від $500 |
| Шейдер прозорого скла (ShaderGraph) | Середня | 3–7 днів | від $800 |
| Складний ефект (запотівання, динамічне помутніння) | Висока | 1–3 тижні | від $2000 |
| Портування шейдерів між платформами | Залежить від набору | 1–2 тижні | від $1000 |
Що входить у вартість:
- Вихідні коди шейдерів (HLSL/ShaderGraph).
- Документація з налаштування параметрів (Ambient Intensity, Emission, Noise).
- Інтеграція в ваш проект (Unity package).
- Тестування на HoloLens 2 або Magic Leap 2.
- Підтримка протягом 30 днів після здачі.
- Можливе навчання вашої команди (1 година відеоконференції).
Пропозиція: Ми готові реалізувати проєкт під ключ за 3–7 днів залежно від складності. Економія часу до 40% порівняно з самостійною розробкою. Пишіть нам на пошту або в Telegram — оцінимо ваш проект безкоштовно та надамо комерційну пропозицію.
Наша компанія має понад 10 років досвіду в геймдеві та AR, реалізували більше 50 проєктів. Вартість розробки індивідуальна, точну суму розраховуємо після аналізу вашого проєкту — зв'яжіться з нами для оцінки. Ми гарантуємо коректну роботу на всіх підтримуваних пристроях і надаємо вихідні коди. Отримайте консультацію прямо зараз.