- Кількість кредитів 3
- Тип Обов'язковий
- Семестри 5, 11
- Рівень вищої освіти Бакалавр, Магістр
- Підсумковий контроль Залік
⚡Квест: Проєктування HUD та WebGPU-сцен!
Хочеш створювати інтерфейси, які оживають у коді? Зведи візуальний борг до нуля! Опануй розробку ігрових HUD-систем за класифікацією Фейджера. Програмуй інтерактивні 3D-сцени на JavaScript за допомогою Three.js та WebGPU на базі обчислювальних шейдерів. Впроваджуй легку декларативну анімацію Lottie JSON без навантаження на CPU, оптимізуй векторний код SVG та пакуй ассети в Sprite Sheets у Photoshop.
🚀Зітри межу між кодом та медіамистецтвом!
🛠Стек: Three.js, WebGPU, Lottie JSON, Figma, Photoshop, DaVinci Resolve, Reaper, Git.
🎒В рюкзак: Клікабельний Game UI Pack та інтерактивна тривимірна вебсцена.
⚡Квест: Підкори декларативну анімацію, приручи Three.js і WebGPU та стань Technical Artist у розробці ігрових інтерфейсів!
🌐Опис місії
У сучасній IT-індустрії розробка інтерфейсів давно вийшла за межі статичних картинок. Індустрія потребує унікальних фахівців — Technical Artists, здатних безшовно інтегрувати дизайн у високопродуктивний код та створювати емоційне занурення користувача. Цей квест — твій інструмент ліквідації «візуального боргу» та занурення у світ тривимірних вебсцен і геймдев-ергономіки. Ми навчимо тебе проєктувати складні ігрові HUD-системи, оптимізувати векторний SVG-код, реалізовувати інтерфейсний рух за допомогою математичних функцій плавності (easing) та програмувати тривимірну графіку прямо у браузері. Ти дізнаєшся все про класифікацію ігрових інтерфейсів Еріка Фейджера, пакування текстурних атласів для зменшення Draw Calls, обчислювальні шейдери нового API WebGPU та створення професійного медіа-контенту. Опануй інженерні стандарти медіавиробництва та створюй інтерфейси, від яких неможливо відірвати погляд!
🛠Твій інструментарій
Vector Design, Game UI & Animation Platforms: Figma, Penpot (проєктування HUD, інвентарних сіток, дерев навичок), LottieFiles, Jitter (декларативна моушн-анімація у форматі JSON).
Web 3D Programming & GPU API: Three.js Core Library, судова підсистема WebGPURenderer (Compute Shaders), WebGL, технологія Real-time Raycasting.
Raster Graphics & Technical Art Stacks: Adobe Photoshop (художнє скінування, PBR-карти: Albedo, Roughness, Metalness, Normal Maps, створення Sprite Sheets / HUD Atlases).
Media Production & Video FX Engines: DaVinci Resolve (нелінійний монтаж, Color Grading, кодеки H.264/AV1, контейнери WebM/MP4).
Digital Audio Engineering & Sound Design: Audacity, DAW Reaper (запис, очищення шумів, Foley саунд-дизайн, концепція Audio Sprites).
AI-Driven Design Engines: Midjourney, Stable Diffusion (генерація безшовних текстур та іконок), Photoshop Generative Fill, Runway, Luma Dream Machine (динамічні прототипи анімації).
Version Control & Knowledge Bases: Git / GitHub, Notion, Miro (інтерактивні розкадровки, HUD-карти).
🚀Що прокачаєш (Суперсили)
Advanced Game UI Architecture: Навчишся проєктувати діегетичні, недієгетичні, мета- та просторові інтерфейси за Фейджером, адаптуючи ергономіку під PC, консолі та тач-пристрої.
SVG & Declarative Motion Engineering: Опануєш програмний аудит та мініфікацію векторного коду, а також впровадження мікровзаємодій через Lottie JSON без навантаження на CPU.
Interactive Web 3D & WebGPU: Навчишся створювати інтерактивні 3D-об'єкти кодом, налаштовувати камери, світло, динамічні тіні, парсити файли glTF/GLB та переносити розрахунки трансформацій на GPU через Compute Shaders.
Complex Media & Sound Production: Прокачаєш навички пошарового сторібордингу, нелінійного відеомонтажу з суворою оптимізацією бітрейту та створення унікальних Foley-звуків, упакованих у концепцію звукових спрайтів.
🎒Що покладеш у рюкзак (Портфоліо)
На фінальному захисті у форматі Pitch-доповіді ти презентуєш Інтерактивний мультимедійний пакет цифрового продукту з інтегрованою HUD-системою, завантажений на GitHub:
Brand-Contract & Logobook: Унікальний логотип ІТ-продукту з математично розрахованою геометрією знаків, охоронними зонами та адаптивними версіями.
Production-Ready Game UI Pack: Розбита за векторними сітками логічна архітектура екранів (меню, HUD стану персонажа, інвентар), упакована в оптимізовані текстурні атласи (Sprite Sheets) для зниження Draw Calls.
Lottie JSON Motion Grid: Налаштовані інтерфейсні лоадери та тригери метрик у форматі Lottie, інтегровані в реактивні Front-end фреймворки з мінімальним часом завантаження сторінки (TTI).
Interactive 3D WebGPU Engine: Програмний код інтерактивної 3D-сцени в Three.js на базі WebGPURenderer з PBR-матеріалами, процедурними симуляціями часток (VFX) та Raycasting-взаємодією з об'єктами.
Product Video Teaser & Sound Script: Промо-відеоролик (до 1 хвилини) з колірною корекцією в DaVinci Resolve та кастомним саунд-дизайном, синхронізованим з відеорядом та оптимізованим під вебстандарти.
💼Твій майбутній тайтл
Цей унікальний стик інженерії та Technical Art відкриває двері до провідних продуктових та геймдев-студій:
Technical Artist / Graphic Programmer.
Game UI/UX Developer / HUD Designer.
Front-end Developer (with 3D/WebGPU specialization).
Multimedia Software Engineer / L&D Media Producer.
