Як зробити свою маску для інстаграма? докладна інструкція

Із серпня будь-який користувач інстаграма може зробити свою маску для сториз — і випустити її в офіційний каталог, щоб усі бажаючі могли її спробувати. Щоб це зробити, доведеться розібратися у спеціальній програмі Spark AR Studio, але це не дуже складно. І «Медуза» вам у цьому допоможе прямо зараз.

0. Що треба знати перед тим, як почати користуватися цією інструкцією

Перше: Spark AR та платформа для масок в інстаграмі все ще активно розвиваються. Оновлення програми виходять раз на пару тижнів, і часом вони можуть змінити інтерфейс, набір функцій або ще щось. Тому якщо ви не бачите кнопку, яку ми згадуємо, у потрібному місці, подивіться на всі боки — можливо, її кудись перенесли. Для історії: ця інструкція заснована на Spark AR 73.1.0 для macOS.

Друге: ми не можемо в рамках однієї інструкції розповісти взагалі про всі функції Spark AR, їх дуже багато. Зате ми розповімо, як зібрати свою першу маску і куди дивитися далі.

Третє: не забувайте час від часу зберігати ваш проект. Spark AR іноді працює нестабільно і якщо програма раптом закриється з помилкою, ваша робота може загубитися.

1. Завантажте Spark AR

Зайдіть на цю сторінку і завантажте програму – вона доступна як для Windows, так і MacOS. Крім того, ви можете поставити на телефон програму Spark AR Player, яка дозволяє швидко переглядати зібрані вами маски. Воно є на  Android та  iOS .

При першому запуску вас попросять увійти до свого облікового запису у фейсбуці — без цього ніяк. Введіть свій логін та пароль від соцмережі, щоб продовжити (Spark AR Studio належить Facebook, так що це має бути безпечним).

2. Почніть новий проект

Коли ви відкриєте Spark AR на комп’ютері, він запропонує вивчити один із базових проектів-прикладів. До цього ви зможете повернутися пізніше, а поки що просто створіть новий проект за допомогою кнопкиCreate Project.

3. Огляньтеся

Перед інтерфейсом Spark AR. Він складається із трьох смислових областей.

У лівій частині – там, де блоки з назвами Scene, Layers і Assets – збираються об’єкти і розставляється “сцена” маски.

У центрі — загальний вигляд на ту саму «сцену» та окремо те, що бачитиме користувач у фронтальну камеру. У Spark AR вбудовано кілька зациклених відео з особами людей, щоб було простіше приміряти свою маску. Перемикання між особами (а також веб-камерою комп’ютера) відбувається за допомогою кнопкиVideoу лівого краю екрана.

У правій частині з’являтимуться різні властивості об’єктів, які ви виділятимете.

4. Додайте до проекту трекінг особи

Одна з найважливіших функцій для масок – пошук облич у кадрі та визначення їх точних координат. На щастя, із цим Spark AR справляється сам. Ось що треба зробити:

1. У лівій панелі у блоціSceneнатиснути на кнопкуAdd Object
2. Знайти у списку пунктFace Tracker
3. Вибрати його та натиснутиInsert

У проекті майже нічого не зміниться — лише в області, де видно сцену, з’являться осі координат із центром у центрі обличчя. Це нормально.

Тепер у блоціSceneклацніть правою кнопкою на об’єктfaceTracker0та виберіть пунктAdd, а потім – Face Mesh. Тепер ви бачите, як програма виділила обличчя у кадрі та пофарбувала його у чорно-білу текстуру.

5. Ого, це вже маска? (Спойлер: так, але не зупиняйтесь)

Технічно, у вас вже вийшла найпростіша маска, яка вміє знаходити обличчя людини та покривати її шахівницею. Можете її випробувати. Є два способи:

• За допомогою Spark AR Player. Підключіть телефон до комп’ютера по дроту, відкрийте на телефоні програму Spark AR Player, а потім у Spark AR на комп’ютері натисніть кнопку із зображенням телефону в лівій частині екрана (вона називаєтьсяTest on Device).
• За допомогою фейсбука або інстаграма. Натисніть на ту ж кнопкуTest on Deviceв Spark AR, а потім на кнопку Send навпротиFacebook CameraабоInstagram Camera. Коли процес завантаження на сервер закінчиться, вам прийде повідомлення у фейсбуці або інстаграмі — натисніть на нього, і відкриється камера з вашою маскою.

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

6. Створіть матеріал для обличчя

Поверніться до Spark AR і натиснітьfaceMesh0у тому ж блоціScene. У панелі у правого краю програми з’являться властивості цього об’єкта – видимий він чи ні (галочкаVisible), чи залишає він отвори дома очей і рота людини (галочкиEyesі Mouthвідповідно – у нашому випадку обидві галочки повинні бути включені), його координати, розміри та зсув.

Серед цих параметрів є пунктMaterials. Натисніть на іконку з плюсикомправоруч від нього – так ви створите свій перший матеріал. Матеріали – це об’єкти, які включають набір різних властивостей, що впливають на те, як виглядатиме об’єкт (скоро зрозумієте). Кожному об’єкту може відповідати лише один матеріал, але один матеріал можна застосувати до кількох об’єктів.

Поки що у вас лише стандартний матеріал без текстури, тому маска замість шахової стала просто сірою. Це нормально!

7. Пограйте з матеріалом

У блоціAssetsу лівій панелі інтерфейсу з’явилася папкаMaterials, всередині якої лежить ваш перший матеріал material0. В Assets будуть потрапляти й інші типи об’єктів, які ви додасте до своєї «сцени»: текстури (тобто зображення, якими покривають об’єкти), 3D-моделі та скрипти.

Якщо натиснути на material0, у лівій панелі відкриється багато параметрів. Спробуйте поперемикати деякі та стежити за результатами. Наприклад, якщо у вкладціShader Properties – Diffuseнатиснути на прямокутник біля рядкаColorі вибрати якийсь колір (скажімо, червоний), маска пофарбується в червоний. А якщо після цього включити галочку у рядку Specular, вона почне ще й блищати.

У верхній частині цієї панелі є перемикачShader Type. Він впливає на те, як виглядатиме маска: за замовчуванням встановлено параметрStandardякий підходить для реалістичної симуляції 3D-об’єктів. Крім того, можна вибратиFlat(тоді об’єкт не буде реагувати на освітлення),Physically-Based(ще більш реалістичні поверхні, ніж за умовчанням),Retouching(Для ретушування особи),Blended(для змішування текстур та кольорів) та Face Paint(Для малювання на шкірі обличчя).

В рамках цієї інструкції ми пробуватимемо намалювати маску Джокера (найбанальніше, що тільки може бути), тому перемикайтеся на Face Paint. Маска «прилипне» до обличчя, але зробить його безбарвним. Скоро ми це виправимо.

8. Відкладіть Spark AR. Час намалювати текстуру!

Spark AR дозволяє збирати в «сцені» двовимірні та тривимірні об’єкти, а також текстури та інші елементи – але це не універсальний редактор всього світу. Якщо ви захочете створити свою 3D-модель, доведеться перейти до 3D-редактора. Якщо потрібно намалювати текстуру, доведеться відкривати відповідну програму.

У нашому випадку підійде графічний редактор, який підтримуватиме шари. Це може бути і Adobe Photoshop, і безкоштовний Gimp .

Крім того, треба завантажити з сайту Facebook архів, у якому лежать файли для роботи з масками. Зайдіть на цю сторінку і клацніть на посилання в рядку«Download the Face Reference Assets».

В архіві виявляться дві папки. В папціMeshлежать тривимірні моделі обличчя, вони потрібні для створення 3D-моделі правильного масштабу. А в папціTexture – Декілька текстур, які правильно накладаються на модель обличчя.

Нам знадобиться файлfaceMasculine.jpgабоfaceFeminine.jpg. Відкрийте його у графічному редакторі, створіть прозорий шар поверх існуючого та намалюйте там «грим Джокера». Намажте на обличчя білу основу і додайте червоні та сині деталі навколо рота, носа та очей.

У нас вийшло ось так:

Тепер сховайте або видаліть нижній шар із зображенням обличчя та збережіть зображення як PNG-файл із прозорістю.

9. Поверніться до Spark AR і приміряйте текстуру

Знову відкрийте Spark AR, виберіть матеріалmaterial0і знайдіть у списку його параметрів рядокTexture. КлікнувшиChoose File…, ви зможете додати текст текстуру з диска комп’ютера. У нашому випадку слід вибрати PNG з макіяжем з попереднього кроку.

10. Вітаємо, у вас вийшов Джокер!

Принаймні щось віддалено на нього схоже.

На цьому кроці ви можете знову переглянути свою маску на телефоні.

Нагадуємо, як це зробити

Далі ми розповімо, як додати нескладну анімацію та логіку до проекту. Якщо це не потрібно масці вашої мрії, можете відразу перейти до пункту 17, щоб дізнатися, як завантажити її в інстаграм.

11. Додайте сльози

Наступне, що ми робитимемо з Джокером – змусимо його плакати. Для цього поверніться до панеліSceneу лівій частині інтерфейсу та натиснітьAdd Object. Знайдіть у списку пунктParticle Systemі додайте його до «сцени».

Particle System – це генератор однотипних об’єктів, які народжуються в якійсь точці, кудись відлітають і потім зникають. Швидше за все, на цьому етапі ви побачите генератор чорно-білих прямокутників, що вилітають із центру «сцени». У блоціSceneперетягніть об’єктemitter0щоб він опинився всередині об’єктаfaceTracker0. Тепер прямокутники мають почати вилітати з носа людини.

Але нам потрібні сльози із очей, а не прямокутники з носа! Спочатку розберемося із зовнішнім виглядом потоку: клацніть на щойно перетягнутий emitter0 і погляньте на масу налаштувань у правій частині інтерфейсу.

Знайдіть вкладкуShape, розкрийте її і у меню, що випадаєShapeперейдіть на пунктSphere. У пунктіRadius, який з’явиться нижче, виставте значення 0,3 – щоб сльози були занадто великими.

Ще нижче є рядокMaterials. Натисніть там на плюс і виберітьCreate New Material – так ви створите окремий матеріал для сліз. У блоці Assets у лівій частині інтерфейсу клацніть по новомуmaterial1та змініть його налаштування. Для простоти цього разу використовуємо не текстуру, а просте заливання кольором – залиштеShader Typeу положенніStandard, а нижче у вкладціDiffuseвиставте значенняColorна той колір, який вам більше подобається (напевно, логічно буде використовувати відтінок блакитного).

Нижче є блок Render Options — тут можна виставити кулям напівпрозорість, щоб вони більше були схожі на краплі: посуньте повзунокOpacityна становище у районі 60-70%.

У результаті ви повинні отримати Джокера, у якого з носа вертикально вилітають блакитні краплі.

У Spark AR можна програмувати логіку за допомогою JavaScript-коду, але це шлях для підготовлених людей. Ми підемо простіше. Натисніть у головному меню програми у верхній частині інтерфейсу на кнопкуViewта виберіть пунктShow/Hide Patch Editor. У центрі екрана з’явиться порожнє поле Patch Editor – це місце, в якому можна з’єднувати різноманітні блоки і задавати логіку масці.

Для початку натисніть кнопкуAdd Patchв куткуPatch Editorі додайте два об’єкти – Face Finderі Face Select. Перший знаходить і рахує особи у кадрі, а другий — вибирає одну з цих осіб для подальших маніпуляцій.

Тепер блоки треба поєднати між собою. Клацніть мишкою на вихідFacesу блоціFace Finderта проведіть лінію до входуFacesв Face Select.

Ми хочемо, щоб сльози текли з очей людини, що відкрила маску – тому тепер у Patch Editor треба додати ще один об’єкт,Eyelid(«Століття»). З’єднайте єдиний вихід із Face Selectз єдиним входом у EyelidЩоб маска знала, повіку на якому з осіб їй потрібно знайти.

У блоку Eyelid маса виходів, відповідальних координати різних частин ока. Не лякайтеся – нам знадобиться лише пара з них. Але спочатку нам потрібно додати до Patch Editor об’єкт, який відповідає за координати точки, з якої вилітають наші сльози.

Ось як це зробити: виберіть у блоціSceneв лівій частині інтерфейсу програми об’єктemitter0, а потім у списку параметрів праворуч знайдіть блокTransformations. На початку рядкаPositionє невелика стрілочка – натисніть на неї, і в Patch Editor додасться відповідний об’єкт. Ви помітите, що рядок Position став жовтим, а змінити координати вручну не можна — тому що тепер це робиться програмно.

Останній крок – у Patch Editorз’єднайте вихідLeft Outside Corner Positionзі входом3D Positionнашогоemitter0.

13. Поміняйте напрямок сліз

Підсумком попереднього кроку має стати маска з гримом Джокера, у якої з кута одного з очей вертикально вгору вилітає потік сліз.

Щоб змінити напрямок сліз, у блоціSceneклацніть по emitter0та перегляньте налаштування у правій частині інтерфейсу. Нас цікавить блокSpray Angle. Перший стовпець, в якому осередки підписані як X, Y та Z, відповідає за кут у відповідній площині. Другий стовпець – це похибка в градусах, в межах якої змінюватиметься напрямок польоту частинок. У нашому випадку потрібно змінити лише коміркуZ – Впишіть туди число-100(З мінусом). Тепер сльози вилітатимуть з ока вбік.

Трохи нижче є рядокSpeedщо відповідає за швидкість польоту частинок. Змініть у першому осередку значення з 0,2до 0,1 — щоб сльози рухалися не так швидко. А ще нижче розкрийте блокParticleі в рядкуLifespanвиставте нове значення – 1 замість 0,4. Тепер сльози летітимуть повільно — але досить швидко, щоб можна було встигнути насолодитися їхнім рухом.

14. Додайте сльози для другого ока

Це простіше, аніж було з першим. Клацніть правою кнопкою миші на об’єктemitter0у колонціSceneта виберіть пунктDuplicateу меню, що випало. Так у «сцені» з’явиться другий потік сліз, але він починається в носі.

Щоб виправити це, виберіть новийemitter1, у колонці з параметрами натисніть на стрілочку біля рядкаPosition. У Patch Editorз’явиться новий об’єкт, що відповідає за положення цього потоку – протягніть до нього мишкою лінію від виходуRight Outside Corner Positionтого ж об’єктаEyelidякий використовувався для першого ока.

Зрештою, у списку параметрівemitter1у блоціSpray Angleпоміняйте в осередкуZзначення з -100на просто100. Тепер потік із кожного ока буде спрямований у потрібний бік.

15. Ще трохи

У принципі, на цьому можна зупинитись. Але ж наша маска зовсім не інтерактивна. А що якщо сльози вилітатимуть з очей не завжди, а тільки коли людина перед камерою посміхається? Адже, як казав Джокер, “я думав, моє життя це трагедія, але зараз я зрозумів, що це комедія”.

Перейдіть до Patch Editor і натисніть кнопку Add Patch. Знайдіть у меню об’єктSmileі додайте його. Це – детектор посмішки. Spark AR також дозволяє прив’язати дії до моргання та відкривання рота, але цього разу ми зупинимося саме на усмішці.

Підключіть вихід із Face Select, який вже є в полі для програмування, до входу Smile. Залишилось зв’язати це все зі сльозами. По черзі виберіть у блоціSceneу лівій частині вікна об’єктиemitter0і emitter1та натисніть на стрілочки біля рядкаVisible. Так у Patch Editor з’являться властивості потоків, які відповідають їх видимість.

Залишилося з’єднати вихід із Smileзі входами в обидва нові об’єкти. У вас повинен вийти такий ланцюжок:

16. Ура! Перевірте, що у вас вийшло

Маска — така, якою ми її задумали у цій інструкції, — готова. Тепер можете відправити її зі Spark AR на телефон і протестувати.

17. Надішліть маску в каталог

Поки що вашою маскою можете користуватися тільки ви і ваші друзі, яким ви відправите пряме посилання. Щоб вона з’явилася в інстаграмі – в каталозі та у вашому профілі, – потрібно відправити її на схвалення модераторам.

Для цього у головному меню Spark AR натиснітьFile– Exportі у вікні, що з’явилося, зновуExport. Збережіть проект на комп’ютері та відкрийте сторінку facebook.com/sparkarhub . Натисніть синю кнопку Upload Effect (або «Завантаження ефекту») та пройдіть усі кроки. У процесі від вас знадобиться кілька речей:

• Експортований файл проекту
• Ім’я маски
• Іконка (як їх малювати, читайте тут )
• Коротке відео з демонстрацією ефекту
• Опис модератора англійською мовою

Всі! Тепер доведеться дочекатися, поки вашу маску схвалять або відхилять з поясненням причин. Цей процес може зайняти тиждень, а може й місяць, як пощастить. Але рано чи пізно у вашому профілі в інстаграмі з’явиться маска, зроблена вашими руками. І будь-хто зможе зняти фото або відео з нею.

18. Що далі?

По-перше, спробуйте тренувальні проекти, які відкриваються у Spark AR під час запуску програми.

По-друге, вивчіть документацію на сайті Facebook: її дуже багато, часом вона заплутана, але за бажання можна знайти опис потрібної функції. Або навіть покроковий урок.

По-третє, завітайте у фейсбук-спільноту Spark AR Community . Там можна надихнутися чужими прикладами та запитати поради.