brunch

인스타그램 필터, 개발자 가이드 #1

천천히 사라지는 파티클 효과(Particle effect)

by we ar 위에이알
Mar 21. 2021

안녕하세요, 인스타그램 AR 필터 스튜디오 위에이알(WE-AR)의 개발자 딘입니다.


Java Script를 활용해 파티클(Particle)이 생성된 후 점점 사라지는 효과를 구현하는 방법을 알아보겠습니다.

천천히 제 가이드만 따라오면, 초보 개발자 충분히 만들 수 있습니다 �


1. 프로그램 설치 & 프로젝트 생성 �

① Spark AR 프로그램 설치부터!

여기 를 눌러 Spark AR을 다운로드 합니다.


② 새로운 프로젝트 생성하기

페이스북 계정으로 로그인을 하고 첫 화면에서 New Project를 눌러 프로젝트를 생성해보겠습니다.

[Blank Project] 를 선택합니다.


%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.47.05.png
%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.47.28.png



2. 필터 제작 시작! �

첫 프로젝트를 생성했습니다. 바로, 필터를 만들어보겠습니다.


① 일단 저장 먼저 !

・cmd + s 를 눌러 저장을 먼저 해주세요.


② 스크립트를 생성합시다

・ 페이스북 계정으로 로그인을 하고 첫 화면에서 [New Project]를 눌러 프로젝트를 생성해보겠습니다.

・ [Blank Project] 를 선택합니다.

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.47.05.png
%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.47.28.png


③ FaceTracker 를 생성합니다

좌측 상단의 Scene Panel 에서 FaceTracker를 생성합니다.

・ 간단하게 FaceTracker 생성하는 것만으로도 Spark AR이 지원하는 모든 얼굴인식 기능을 활용할 수 있게 됩니다!

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.52.29.png


④ Particle System 을 생성합니다.

faceTracker0 에 오른쪽마우스를 클릭하여 Particle System을 생성합니다.

faceTracker0을 클릭해서 생성하는 이유는 생성한 Particle 이 faceTracker0 하위에 들어가도록 만들기 위해서에요. 즉, 파티클이 얼굴을 따라 움직이게 된다는 말입니다!

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.54.04.png


⑤ Material 하나를 추가합니다.

Material은 유니티를 포함해 각종 3D 관련 소프트웨어에서 공통적으로 사용하는 요소 중 하나입니다.

Material 이라는 조각상 위에 이미지(Texture)라는 색상을 입힌다고 생각하면 이해가 참..쉽죠..? �

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.55.47.png

⑥ 생성한 Material을 선택해 ShaderType을 Flat으로 변경해줍니다.

외부에서 가져온 3D 에셋을 있는 그대로 사용하기 위해서는 Shader Type을 Flat으로 설정하면 좋습니다. (나중에 각종 Shader Type에 대해서도 살펴봐요!)

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.59.38.png


⑥ 위에서 생성한 Particle System을 선택해 Material을 할당해 줍니다.

뿜어져 나오는 Particle 이 하얀색으로 변경된게 확인 되었나요?

아무것도 없이 체크무늬(empty)로 뿜어져 나오던 Particle System에 Material을 설정한겁니다! �

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.00.48.png
%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.02.44.png


⑦ 이미지를 하나 추가해주세요

아래 해당 이미지를 다운받아 Spark AR 화면 좌측 하단(Asset Panel)에 드래그해서 넣어주세요.

다른 반짝이를 사용하고 싶다면, 구글에서 Sparkle 를 검색하셔서 사용하시면됩니다.

star.png

⑧ Material에 이미지를 할당합니다.

아무것도 입혀지지 않았던 Material에 Texture 를 할당합니다.

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.12.39.png
%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.13.25.png

현재 Camera View를 보면 검은색이 같이 나오는걸 볼수가있는데

Blend Mode 를 Screen으로 변경해줍니다.
(Screen Blender는 배경이 검정색인 이미지를 투명하게 만들어주는 꿀팁 � )


⑨ Particle 사이즈와 수명을 조절합시다! 적.절.하.게.

변경했는데 Camera View에서 파티클의 사이즈가 너무 작은것 같아 보이네요.. 키워보시죠!

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.14.46.png
image.png

Particle System을 눌러 Particle 그룹의 Scale를 변경해줍니다. 0.01 -> 0.1

Lifespan(수명)도 0.4 -> 1 로 변경 해줍니다.

여기 까지 따라오셨나요? 50% 성공했습니다.��


3. 패치 에디터 사용해서 파티클 위치 조정하기

① 이제 파티클을 눈 위치로 변경해봅시다.

cmd + option + p 를 눌러 Patch Editor 를 켜줍니다.

faceTracker0을 드래그하여 Patch Editor 영역 위에 놓아줍시다. (아래)

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.20.48.png
image.png

faceTracker0 노드의 첫번째 Property 를 드래그하여 옆쪽에 놓아 줍니다.

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.22.27.png

Patch를 검색할수있는 창이 뜹니다. Eyelid(눈꺼풀)를 선택해줍니다.

image.png

emitter0(Particle System)을 선택하여 Transformations 그룹의 Position 왼쪽의 화살표를 선택합니다.

해당 패널에서 각 항목 왼쪽 화살표를 누르면 Patch editor에 노란색 패치가 생성됩니다. (아래)

image.png

Eyelid의 첫번째 Property 를 노란색 화살표까지 드래그하여 놓아줍니다.

image.png

왼쪽 눈에 Particle이 붙었습니다! 잘 붙었죠??


그런데..잠깐만요...

지금 Camera View를 보면 Particle이 Lifespan이 끝나면서 뚝!하고 사라지네요? 거슬립니다. �

이제 코드를 작성해봅시다.


4. 코드로 Particle 을 조정해봅시다 �‍�

① 처음에 만든 script.ts파일을 켜줍니다.

https://gist.github.com/KimByungChan/be82f1ff2671e6645590de9974e7b803

② 불필요한건 깔끔하게 정리하고...

③아까 생성한 Particle System을 가져옵시다!

Scene.root.findFirst 메소드를 통해 Scene에 존재하는 요소를 가져올수있습니다.

④ 이제 투명도와 사이즈를 조절 해봅시다.

해당 코드를 작성&Save하고 Camera View를 보면.. 아까보다 더 자연스럽게 사라지고 있죠!?

cf. animation.samplers 관련 글 자세히보기 (클릭)



4. 디바이스에서 실행하기 �

① 인스타그램으로 테스트링크를 쏴주세요 ~! �

image.png

② 폰으로 도착한 링크를 클릭하고 사용해봅시다 �

IMG_797F01A0EA19-1.jpeg

Spark AR 프로그램에 페이스북 로그인이 되어있으면, 이렇게 노티가 올텐데 들어가서 필터를 사용해보시면됩니다.


여기를 눌러 필터를 직접 사용해볼수있습니다. (최대 200번 볼수있어서.. 링크가 만료될수있습니다.)

프로젝트 파일은 여기에 올려두었습니다


잘 따라하셨나요?

오늘 아주 간단~하게~! 인스타그램 필터 만들어봤습니다. �

다음 글에서는 Shader를 사용하는 방법에 대하여 알아보겠습니다!

또 찾아주세요~�




더 많은 AR필터 사례들이 궁금하다면? 위에이알 포트폴리오(클릭)

AR필터 사용법부터 카테고리, 사용 데이터, 광고 세팅 등 모든 것을 알고 싶다면? AR필터백서(클릭)

텍스트 말고 따스한 휴먼의 목소리로 자세히 설명 듣고 싶다면? 문의하기(클릭)


현재 위에이알에서는 WebAR 개발자 및 전직군 경력자를 모집하고 있습니다.

2024 위에이알 채용 | Notion

해당 페이지(notion)를 통해 지원한 합격자에게 50만원의 입사 축하금을 드립니다!

https://we-ar.notion.site/3d133eaa65fd4611bd24d82f76d830d7

 

국내 유일의 비전프로 앱 개발 전문 스튜디오,


위에이알과 새로운 커리어 여정을 시작하세요.

keyword
we ar 위에이알 소속 위에이알 직업 마케터 프로필

기술과 아이디어를 결합해 가장 효과적인 마케팅 솔루션을 제안합니다.

구독자 122
작가의 이전글언택트 시대의 마케팅, 효과적으로 소통하는 방법은?