Jak zrobić własny filtr na Instagramie

Od pewnego czasu Instagram stale zaskakuje nas nowymi, co raz to bardziej ciekawymi i angażującymi filtrami, które mogą upiększyć nasze zdjęcia i filmy, a nawet całkowicie je zmienić. Wielu z nas prześciga się w wynajdywaniu co raz to bardziej śmiesznych, ciekawych i niesamowitych efektów. Być może sądzicie, że zrobienie własnego filtru jest trudne i czasochłonne? Nic bardziej mylnego! W tym wpisie pokażę Wam jak bardzo jest to proste 🙂

Po co tworzyć własne filtry

Pomijając tak oczywiste powody, jak wieczna sława i podziw znajomych, to stworzenie własnego filtru może być dla nas bardzo użyteczne – szczególnie, jeśli posiadamy markę lub zależy nam na pozyskaniu obserwujących.

Przede wszystkim ciekawy, śmieszny, czy angażujący filtr będzie prowadził do naszego profilu. Obok nazwy filtru zawsze wyświetla się także nazwa profilu jego autora, a kliknięcie w nią przeniesie nas na jego profil. Kiedy znajdę filtr, który mi się podoba, to zawsze sprawdzam, czy osoba, która go stworzyła ma tego więcej 🙂

Filtry mogą mieć też wymiar użytkowy, o czym przekonują nas profile związane z odzieżą czy beauty. Mianowicie: filtry pozwalają nam wirtualnie przymierzyć lub wypróbować niektóre artykuły. Niech przykładem będzie tutaj Kylie Jenner – na jej profilu @kyliecosmetics swojego czasu można było wypróbować kolory szminek, które ma w ofercie!

Jak widzimy motywacji do stworzenia naszego filtru możemy mieć co najmniej kilka. W tym artykule naszym głównym celem jest nauka i pokazanie, że każdy może w prosty sposób stworzyć coś swojego. Z tego też powodu nie będzie to kompleksowy podręcznik, a jedynie poradnik nakreślający najistotniejsze informacje, które musimy przyswoić, żeby zacząć tworzyć własne filtry. Jeśli jesteście gotowi – to zaczynamy!

A dla wszystkich niecierpliwych – nasz filtr znajdziecie TUTAJ 🙂

Instalacja Spark AR

Chociaż tworzenie filtrów do FB i IG było możliwe już wcześniej, to prawdziwe bum zaczęło się, gdy Facebook we wrześniu 2019 roku udostępnił swój program – Spark AR – który służy do tworzenia filtrów i umożliwił uploadowanie ich do Instagrama i Facebooka. My oczywiście też będziemy korzystać z tego narzędzia, dlatego zaczniemy od pobrania go, co możemy zrobić z tego miejsca. Aplikację musimy zainstalować na naszym komputerze. Po instalacji i włączeniu programu, będziemy mogli przejść przez krótki tutorial (w języku angielskim), który wprowadzi nas w interfejs SPARK. Pomimo to, ja też postaram się wytłumaczyć Wam co zobaczycie zaraz po otworzeniu pierwszego projektu w programie.

Interfejs Spark AR

Uwaga! Kiedy czytasz ten wpis, to widok interfejsu i umiejscowienie niektórych opcji może się delikatnie różnić w stosunku do nagrań, które znajdziesz we wpisie. Jest to spowodowane faktem, że Spark AR przechodzi częste aktualizacje. Różnice nie powinny jednak wpływać na możliwość przejścia przez ten tutorial 🙂

Zanim zaczniemy tworzyć nasz filtr dobrze byłoby zaznajomić się z ekranem Spark AR. Okno, w którym będziemy tworzyć nasz filtr możemy podzielić na 6 najistotniejszych dla nas przestrzeni: Viewport, Simulator, Scene panel, Assets panel, Inspector i Layers. Nie zrażajmy się jednak tymi angielskimi nazwami – przejdziemy teraz przez wszystkie 6 i wyjaśnimy sobie ich działanie.

Viewport jest największą sekcją interfejsu i to w niej widzimy efekt, który tworzymy. Znajdują się tu wszystkie obiekty, które zagoszczą w naszym filtrze i możemy je dowolnie przesuwać. Widok możemy obracać trzymając prawy przycisk myszy, a także przybliżać i oddalać kółkiem myszy. Szare linie pokazują nam, które z tych obiektów znajdą się w obiektywie naszego telefonu.

Simulator jest tym, co zobaczymy na ekranie naszego telefonu po wgraniu filtru. Jak wskazuje nazwa, symuluje on efekt końcowy.

Scene panel to lista obiektów, które pojawią się w naszym filtrze. Część z nich zobaczymy także we wspomnianej sekcji Viewport. Warto zauważyć, że są one uporządkowane w hierarchicznej relacji „rodzic” – „dziecko”: obiekt device (czyli nasz telefon) ma dwójkę dzieci – camera i microphone, które mogą mieć kolejne dzieci. Taki sposób grupowania pozwala łatwo zauważyć, jak obiekty współdziałają ze sobą, a także przyspiesza pracę – zmiany, które aplikujemy rodzicowi dotyczą także wszystkich jego dzieci. W tym tutorialu skupimy się tylko na dzieciach kamery.

Assets panel to także lista, ale ona z kolei zawiera wszystkie rzeczy, które nie mogłyby stać się obiektami, ale mogą w jakiś sposób te obiekty wzbogacać. Może być to np. tekstura, która wypełni trójwymiarową kostkę, którą chcemy dodać do filtra, albo nagranie, które zostanie odtworzone przez stosowny obiekt.

Inspector pokazuje nam parametry danego obiektu bądź assetu, które następnie możemy dowolnie modyfikować.

Ostatnią istotną dla nas rzeczą jest Layers panel, czyli panel, w którym tworzymy warstwy i ustalamy ich kolejność. Jeśli miałeś jakiekolwiek doświadczenie z grafiką komputerową, to z pewnością nie muszę tłumaczyć Ci tego konceptu. Jeśli jednak totalnie nie wiesz, o czym mówię, to wyobraź sobie, że chcesz stworzyć filtr, w którym przed Twarzą użytkownika będzie wyświetlało się czerwone kółko. Stworzenie dwóch warstw i przyporządkowanie kółka do tej wyższej, a twarzy do niższej pozwoli nam osiągnąć pożądany efekt.

Okej, przebrnęliśmy przez interfejs Spark AR. Być może czujesz się właśnie odrobinę przytłoczony, albo masz wrażenie, że nie wszystko zrozumiałeś. Nic nie szkodzi. Jestem przekonany, że sprawa rozjaśni się, kiedy zaczniemy pracować. Najważniejsze, że już wiesz, gdzie są najważniejsze panele i kiedy poproszę Cię o zmianę czegoś w sekcji Inspector, nie będziesz mieć wrażenia, że mówię do Ciebie w innym języku 🙂

Plan Gry

Okej, jak widzieliśmy na screenie, który znalazł się na początku tekstu, naszym celem jest stworzenie filtru, w którym za użytkownikiem spada deszcz o wybranym kształcie – w moim wypadku będą to serduszka Instacademy 🙂 Oczywiście wy w waszym filtrze możecie dodać cokolwiek innego, chociażby wasze własne loga. Najważniejsze jest jednak, żebyśmy na samym początku zrozumieli, co chcemy osiągnąć. Przede wszystkim nie chcemy, żeby deszcz padał na nas – chcemy, żeby był on za nami. Dlatego musimy oddzielić postać użytkownika od reszty obrazu, a następnie zamontować nasz deszcz pomiędzy postacią, a tłem. Najpierw zajmijmy się tą pierwszą kwestią.

Dwa przeźrocza

W tej części oddzielimy pojawiająca się w filtrze postać użytkownika od reszty tego, co rejestruje kamera telefonu i stworzymy miejsce na deszcz serduszek. Żeby wytłumaczyć to jeszcze lepiej, posłużę się analogią. Wyobraźmy sobie 3 przeźrocza – na jednym z nich pojawia się tylko postać osoby, którą rejestruje nasza kamera, na kolejnym wszystko poza tą osobą, a na ostatnim nasz deszcz. Pierwsze, co musimy zrobić, to stworzenie 3 warstw, dzięki którym będziemy mogli ustalić kolejność każdego ze wspomnianych przeźroczy. Zrobienie tego jest bardzo proste.

Wchodzimy w panel Layers i za pomocą przycisku + Add Layer dodajemy dwie nowe warstwy (tak, żeby w sumie były ich 3). Klikamy prawym przyciskiem myszy na pierwszą od góry i naciskamy na opcję rename, żeby zmienić jej nazwę na „pierwszy plan”. Kolejną warstwę nazwijmy „środkowy plan”, a ostatnią „tło”. Nazwy te nie mają żadnego znaczenia, ale pozwolą nam zachować porządek i logikę w naszym projekcie.

Teraz pora stworzyć metaforyczne przeźrocza. Jak wiemy, przeźrocze to kawałek przezroczystego materiału, na który nakładany jest obraz. Zacznijmy więc od stworzenia analogicznego materiału w wirtualnym świecie. W panelu Scene kliknijmy na przycisk + Add Object i wybierzmy z listy obiekt rectangle (prostokąt). Kiedy to zrobimy okaże się, że nowo utworzony obiekt rectangle0 automatycznie stał się dzieckiem innego obiektu – canvas0. W Spark AR canvas to obiekt, na którym umieszczane są wszystkie elementy 2D. Jego supermocą jest skalowanie się do szerokości i wysokości ekranu telefonu użytkownika i tym sposobem nie musimy – choć możemy – podawać konkretnych wymiarów obiektów 2D, a możemy bazować jedynie na proporcjach. W tym wypadku oznacza to dla nas, że przeźrocza, które chcemy stworzyć bardzo łatwo dopasują się do telefonu użytkownika. Teraz dodajmy jeszcze jeden obiekt rectangle. Jeden z nich nazwijmy „użytkownik” – jak wskazuje jego nazwa, to na nim będziemy wyświetlać użytkownika, a drugiemu nadajmy imię „reszta”.

Następnie musimy zadbać, żeby przeźrocza zawsze miały wymiar ekranu telefonu użytkownika. Żeby do tego doprowadzić w panelu Scene kliknijmy na prostokąt użytkownik i spójrzmy na panel Inspector. W sekcji Size, która odpowiada za wymiary prostokąta, wybierzmy lewym przyciskiem myszy pierwsze pole z numerkiem – jest to szerokość obiektu – i zaznaczmy opcję Fill Width. Dzięki niej szerokość prostokąta rozciągnie się do szerokości ekranu telefonu. Powtórzmy tę czynność dla wysokości prostokąta, a następnie zróbmy to samo z prostokątem reszta.

W tym momencie pozostaje nam ustalić kolejność przeźroczy. Tak jak powiedzieliśmy sobie wcześniej, chcemy, żeby na pierwszym planie znajdowała się sylwetka użytkownika, za nią padał deszcz, a w tle chcemy mieć wszystko inne, co rejestruje kamera. Jeśli prostokąt reszta cały czas zaznaczony jest w panelu Scene, to w Inspector, na samej górze, wybierzmy warstwę tło, czyli ostatnią w kolejności. Nie musimy nic zmieniać dla prostokąta użytkownik – on domyślnie znajdzie się w warstwie pierwszy plan.

---

---

Obrazy na przeźroczach

Czas, żeby na przeźroczu, które będzie wyświetlać użytkownika pojawił się wreszcie obraz. Zacznijmy od tego, żeby kamera oddzieliła postać, którą zobaczy od tła. W panelu Scene kliknijmy na obiekt camera, a następnie w Inspector kliknijmy na znaczki plusa w sekcjach Texture Extraction oraz Segmentation i… to w zasadzie tyle – stworzone przez deweloperów algorytmy już będą w stanie odróżnić ludzką postać od tła, a w panelu Assets, w sekcji Textures pojawią się dwie nowe tekstury cameraTexture0 oraz personSegmentationMaskTexture0.

Teraz nałóżmy obrazy na przeźrocza. W panelu Scene kliknijmy w prostokąt użytkownik, a w Inspector naciśnijmy znaczek plusa, który znajduje się w sekcji materials. To utworzy nam nowy materiał, który znajdziemy w panelu Assets i będzie on przypisany do użytkownika. Materiały decydują o tym, jak wyglądają obiekty, które dodaliśmy do naszego filtru. Kliknijmy na nowy materiał w panelu Assets i zmieńmy jego nazwę na „materiał użytkownik”.

Następnie w Inspectorze w sekcji Shader Type zmieńmy wybór na Flat. Sprawi to, że materiał nie będzie podatny na wirtualne światło, które możemy umieścić w filtrze. Teraz czas na werbel… Cały czas będąc w Inspector szukamy sekcji Texture i wybieramy dla niej teksturę cameraTexture0. Następnie zaznaczmy boks w sekcji Alpha i tam wybieramy teksturę personSegmentationMaskTexture0. Właśnie oddzieliliśmy naszego przykładowego Pana od tła!

My jednak oczywiście chcemy, żeby tło, na którym pojawia się postać, również znajdowało się w filtrze, dlatego w panelu Scene kliknijmy na prostokąt reszta i w Inspector utwórzmy dla niego nowy materiał. Zmieńmy nazwę nowego materiału na „materiał reszta”. W Inspector zaś zmieńmy Shader Type na flat, a w sekcji Render Options obniżmy wartość opacity do zera. Teraz nadszedł czas na to, aby dodać nasz deszcz.

Zróbmy deszcz!

Żeby rzeczy zaczęły lecieć z nieba, nie potrzebujemy rytualnych tańców. W panelu Scene klikamy na + Add Object i wyszukujemy Particle System, który znajduje się na samym końcu listy. Naszym oczom ukaże się dziwna fontanna – pora zamienić ją w deszcz!

Kliknijmy na nowo powstały obiekt emitter0 i w Inspector dokonajmy kilku zmian. Przede wszystkim znajdźmy sekcję Rotation i w pierwszym polu wpiszmy „180”. Obróci to nasz obiekt do dołu, ale niestety nadal przypominał będzie bardziej strumień z węża ogrodowego niż deszcz. Z tego powodu w sekcji Emitter, w polu Type zmieńmy Point na Line, a właściwość Length na „0,4”. Sprawiliśmy właśnie, że emiter cząsteczek (bo tym właśnie jest obiekt, z którym pracujemy) przestał wyrzucać cząsteczki z jednego punktu, a robi to na długości wyznaczonej przez nas linii.

Dobrze jednak byłoby sprawić, żeby deszcz nie zaczynał się w połowie ekranu i są na to dwa sposoby. Możemy znaleźć w panelu Inspector sekcję Transformations i w drugim polu wpisać wartość, która przesunie obiekt do góry – w moim wypadku było to „0,25”. Innym sposobem jest zaznaczenie obiektu emitera i w ekranie Viewport pociągniecie za strzałkę, która zabierze emiter do góry.

Nasz deszcz jeszcze nie wygląda w pełni deszczowo, ale resztę zmian wprowadzimy po tym, gdy nadamy kropelkom naszego deszczu odpowiedni kształt 🙂

Nadajmy mu kształt

Żeby emitter zaczął generować kształty, jakie chcemy, musimy stworzyć nowy materiał i nadać mu odpowiednią teksturę – tak jak robiliśmy to już wcześniej. W panelu Scene zaznaczmy obiekt emitter0 i ruszmy do panelu Inspector. Znajdźmy sekcję Materials, naciśnijmy znajdujący się przy niej plusik i z rozsuwanego menu wybierzmy opcję Create New Material. W panelu Assets pojawi się nowy materiał. Zmieńmy jego nazwę na „materiał deszcz”.

Teraz musimy odpowiedzieć sobie na pytanie, jak chcemy, żeby wyglądał nasz deszcz. Ja wybrałem dla siebie brzoskwiniowe serduszko, wy możecie ściągnąć jedną z opcji, które dla Was przygotowałem. Są to czarne serduszko, ogień, płacząca ze śmiechu buźka i oczywiście kropelka wody. Możecie też sami przygotować dowolny obrazek, który pojawi się w filtrze: najlepiej jeśli znajdzie się on w pliku .png na przezroczystym tle, a sama grafika będzie w formacie 1:1.

Kiedy podejmiemy decyzję, musimy dodać wybraną grafikę do panelu Assets. Możemy zrobić to na dwa sposoby: po prostu przeciągnąć plik do panelu, albo nacisnąć + Add Asset i Import From Computer…

Teraz pozostaje nam nacisnąć na materiał deszcz i w Inspector zmienić Shader Type na Flat, a w sekcji Texture wybrać teksturę, którą przed chwilą zaimportowaliśmy. Voila! Nasz deszcz właśnie zyskał konkretny kształt 🙂

Czas na poprawki

Przyszła pora odpowiednio dokręcić nasz filtr. Nie będę mówić wam, jak dokładnie macie ustawić wybrane parametry, po prostu opisze Wam je, a wy dobierzecie ich ustawienie pod siebie 🙂 Kliknijmy zatem na obiekt emitter0 i zanurkujmy w odmęty panelu Inspector.

Po pierwsze, może zależeć nam na tym, żeby deszcz nie urywał się w 1/3 ekranu. Żeby to zmienić musimy znaleźć parametr Lifespan w sekcji Particle. Odpowiada on za to, jak długo „żyć” będzie każda wyemitowana cząsteczka. Obecnie cząsteczki znikają tak szybko, ponieważ ich Lifespan jest krótki. Zwiększmy go 2 sekund i spójrzmy na efekt.

Jak na pewno zauważyliście parametr Lifespan ma dwie rubryki, w które możemy wprowadzać wartości. Druga wartość jest wyrażana w procentach. Co to znaczy? Opcja ta pozwala nam wprowadzać losowość do podanej obok wartości. Jeśli ustawiliśmy Lifespan na 2s, a w drugiej rubryce wpisaliśmy „10” (czyli 10%), to nasze kropelki będą żyć pomiędzy 10% krócej i dłużej niż 2s.

Teraz pozostając w sekcji Particle dopasujmy wielkość kropel za pomocą parametru Scale.

Oczywiście, możecie eksperymentować z resztą parametrów – do czego serdecznie Was zachęcam (np. Speed odpowiada za to jak szybko spadają cząsteczki, a Birthrate jak często tworzą się nowe), ale w tym momencie nasz filtr jest już prawie gotowy. Dlaczego prawie? Bo cały czas deszcz pada na postać w kamerze, a nie za nią! Mam nadzieję, że po tym długim tutorialu już wiecie, jak to zmienić, ale jeśli nie: wystarczy, że w panelu Scene naciśniecie obiekt emitter0, a w Inspector, na samej górze zmienicie Layer z pierwszy plan na środkowy plan.

Bonus – obiekt reagujący na uśmiech

Naszym pierwszym pomysłem było zrobienie deszczu serduszek Instacademy. Niestety musieliśmy zmienić nasze plany ze względu na regulamin dodawania filtrów (piszę o tym później). Postanowiłem zatem, że padać będą zwykłe serduszka, a logo Instacademy będzie wyświetlać się przed moim czołem, kiedy się uśmiecham. Jak to zrobiłem?

Na początku dodajemy logo do tekstur, a następnie stwórzmy nowy materiał, który nazwiemy Logo i wybierzmy dla niego nowo dodaną teksturę. Tak jak wcześniej, Shader Type materiału powinien zostać zmieniony na Flat. Nie będę tłumaczył tego bardziej szczegółowo, ponieważ już wielokrotnie robiliśmy to w tym tutorialu 🙂

Teraz w panelu Scene klikamy na przycisk + Add Object i wybieramy opcję Face Tracker. Kiedy nowy obiekt pojawi się na liście, klikamy na niego prawym przyciskiem myszy i w menu wybieramy Add, a następnie Plane. Dla obiektu nowego obiektu plane0 ustawiamy materiał z naszym logo, które w tym momencie powinno pojawić się w symulatorze. Mając zaznaczony obiekt plane0 w panelu Inspector, w sekcji position zmieniłem drugą i trzecią wartość na 0,1 – po to, żeby logo wyświetlało się na czole.

Teraz czas na totalnie nową rzecz. Będziemy tworzyć prosty patch, który sprawi, że logo będzie widoczne, tylko kiedy osoba przed kamerą będzie się uśmiechać. Brzmi strasznie, ale gwarantuje, że to bułka z masłem! Połączymy ze sobą 3 moduły – Face Tracker, który śledzi, to co dzieje się na twarzy, moduł, który rozpoznaje uśmiech oraz parametr, który sprawia, że wyświetla się nasze logo.

W panelu Scene zaznaczmy obiekt plane0 i kierujemy się do panelu Inspector. Następnie klikamy na strzałkę obok parametru visible, która powinna podświetlić się na żółto, gdy na nią najedziemy. To otworzy nam nowy panel Patch Editor z żółtym kwadracikiem, dotyczącym klikniętego przed chwilą parametru. To on decyduje, czy nasze logo się wyświetla. Następnie z panelu Scene przeciągamy obiekt faceTracker0 do panelu Patch Editor. Czas dodać 3 moduł: klikamy prawym przyciskiem myszy w jakiekolwiek wolne miejsce w panelu Patch Editor i z listy wybieramy Interaction, a potem Smile i klikamy na Add Patch.

Teraz musimy połączyć 3 moduły. W panelu Patch Editor szukamy modułu o nazwie faceTracker0 i znajdźmy po jego prawej stronie pierwszą strzałkę wychodzącą od góry – gdy na nią najedziemy będzie podpisana Face. Przeciągnijmy ją do strzałki “wchodzącej” w kwadracik Smile. Teraz strzałkę wychodzącą z modułu Smile połączymy z tą wchodzącą do modułu Visible. Gotowe!

Testy i wrzucenie naszego filtra na IG

Z pewnością zastanawiacie się teraz, jak w praktyce przetestować stworzony filtr. Na szczęście Spark AR umożliwia to bez wgrywania go do dostępnej dla wszystkich użytkowników biblioteki. Nie będziemy jednak opisywać tego procesu, ponieważ sama aplikacja robi to w łatwy i przejrzysty sposób! Wiedzcie jednak, że są na to 2 drogi: możecie albo połączyć się ze swoim telefonem przez kabel USB, albo sparować aplikację ze swoim kontem FB lub IG. Zdecydowanie zachęcam do tej drugiej opcji, ponieważ pierwsza wymaga zainstalowania na telefonie aplikacji Spark AR oraz grzebania w ustawieniach telefonu. Testowanie możemy wygodnie wybrać z bocznego menu – wystarczy kliknąć w odpowiednie miejsce i podążać za wskazówkami.

Publikacja filtra zaczyna się w podobny sposób i jest kilku krokowym procesem. Musimy wybrać nazwę dla naszej pracy, przygotować dla niej ikonkę, która będzie wyświetlać się innym użytkownikom oraz krótki filmik prezentujący działanie filtra. Będziemy musieli przygotować krótki opis w języku angielskim tego, co dokładnie robi filtr, żeby recenzent mógł sprawniej ocenić jego działanie. No i… spełniać wymogi regulaminu.

My mieliśmy trochę przygód z publikacją filtra, bo został odrzucony aż dwa razy – właśnie ze względu na regulamin. Za pierwszym razem stało się tak z dwóch powodów: w filtrze pojawiało się więcej niż jedno logo (może być max jedno), a jego nazwa brzmiała Instacademy Rain – okazało się, że nazwa filtra nie może nawiązywać do nazwy użytkownika. Oczywiście poprawiłem to i kiedy opublikowałem zmieniony filtr z nazwą InstaRain moje zgłoszenie zostało odrzucone właśnie ze względu na przedrostek “insta” – wyszło na to, że w nazwie nie może być nic, co nawiązuje do Instagramu lub FB. Pełny regulamin w języku angielskim znajdziecie TUTAJ.

Mam nadzieję, że ten wpis w łatwy sposób pozwoli Wam na stworzenie swojego własnego filtra. Dajcie znać, czy udało się Wam przejść przez cały proces, no i… czy macie ochotę na więcej tutorialów 😀

---