인스타그램 필터, 개발자 가이드 #1
천천히 사라지는 파티클 효과(Particle effect)
안녕하세요, 인스타그램 AR 필터 스튜디오 위에이알(WE-AR)의 개발자 딘입니다.
Java Script를 활용해 파티클(Particle)이 생성된 후 점점 사라지는 효과를 구현하는 방법을 알아보겠습니다.
천천히 제 가이드만 따라오면, 초보 개발자 충분히 만들 수 있습니다 �
1. 프로그램 설치 & 프로젝트 생성 �
① Spark AR 프로그램 설치부터!
여기 를 눌러 Spark AR을 다운로드 합니다.
② 새로운 프로젝트 생성하기
페이스북 계정으로 로그인을 하고 첫 화면에서 New Project를 눌러 프로젝트를 생성해보겠습니다.
[Blank Project] 를 선택합니다.
2. 필터 제작 시작! �
첫 프로젝트를 생성했습니다. 바로, 필터를 만들어보겠습니다.
① 일단 저장 먼저 !
・cmd + s 를 눌러 저장을 먼저 해주세요.
② 스크립트를 생성합시다
・ 페이스북 계정으로 로그인을 하고 첫 화면에서 [New Project]를 눌러 프로젝트를 생성해보겠습니다.
・ [Blank Project] 를 선택합니다.
③ FaceTracker 를 생성합니다
좌측 상단의 Scene Panel 에서 FaceTracker를 생성합니다.
・ 간단하게 FaceTracker 생성하는 것만으로도 Spark AR이 지원하는 모든 얼굴인식 기능을 활용할 수 있게 됩니다!
④ Particle System 을 생성합니다.
faceTracker0 에 오른쪽마우스를 클릭하여 Particle System을 생성합니다.
faceTracker0을 클릭해서 생성하는 이유는 생성한 Particle 이 faceTracker0 하위에 들어가도록 만들기 위해서에요. 즉, 파티클이 얼굴을 따라 움직이게 된다는 말입니다!
⑤ Material 하나를 추가합니다.
Material은 유니티를 포함해 각종 3D 관련 소프트웨어에서 공통적으로 사용하는 요소 중 하나입니다.
Material 이라는 조각상 위에 이미지(Texture)라는 색상을 입힌다고 생각하면 이해가 참..쉽죠..? �
⑥ 생성한 Material을 선택해 ShaderType을 Flat으로 변경해줍니다.
외부에서 가져온 3D 에셋을 있는 그대로 사용하기 위해서는 Shader Type을 Flat으로 설정하면 좋습니다. (나중에 각종 Shader Type에 대해서도 살펴봐요!)
⑥ 위에서 생성한 Particle System을 선택해 Material을 할당해 줍니다.
뿜어져 나오는 Particle 이 하얀색으로 변경된게 확인 되었나요?
아무것도 없이 체크무늬(empty)로 뿜어져 나오던 Particle System에 Material을 설정한겁니다! �
⑦ 이미지를 하나 추가해주세요
아래 해당 이미지를 다운받아 Spark AR 화면 좌측 하단(Asset Panel)에 드래그해서 넣어주세요.
다른 반짝이를 사용하고 싶다면, 구글에서 Sparkle 를 검색하셔서 사용하시면됩니다.
⑧ Material에 이미지를 할당합니다.
아무것도 입혀지지 않았던 Material에 Texture 를 할당합니다.
현재 Camera View를 보면 검은색이 같이 나오는걸 볼수가있는데
Blend Mode 를 Screen으로 변경해줍니다.
(Screen Blender는 배경이 검정색인 이미지를 투명하게 만들어주는 꿀팁 � )
⑨ Particle 사이즈와 수명을 조절합시다! 적.절.하.게.
변경했는데 Camera View에서 파티클의 사이즈가 너무 작은것 같아 보이네요.. 키워보시죠!
Particle System을 눌러 Particle 그룹의 Scale를 변경해줍니다. 0.01 -> 0.1
Lifespan(수명)도 0.4 -> 1 로 변경 해줍니다.
여기 까지 따라오셨나요? 50% 성공했습니다.��
3. 패치 에디터 사용해서 파티클 위치 조정하기
① 이제 파티클을 눈 위치로 변경해봅시다.
cmd + option + p 를 눌러 Patch Editor 를 켜줍니다.
faceTracker0을 드래그하여 Patch Editor 영역 위에 놓아줍시다. (아래)
faceTracker0 노드의 첫번째 Property 를 드래그하여 옆쪽에 놓아 줍니다.
Patch를 검색할수있는 창이 뜹니다. Eyelid(눈꺼풀)를 선택해줍니다.
emitter0(Particle System)을 선택하여 Transformations 그룹의 Position 왼쪽의 화살표를 선택합니다.
해당 패널에서 각 항목 왼쪽 화살표를 누르면 Patch editor에 노란색 패치가 생성됩니다. (아래)
Eyelid의 첫번째 Property 를 노란색 화살표까지 드래그하여 놓아줍니다.
왼쪽 눈에 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. 디바이스에서 실행하기 �
① 인스타그램으로 테스트링크를 쏴주세요 ~! �
② 폰으로 도착한 링크를 클릭하고 사용해봅시다 �
Spark AR 프로그램에 페이스북 로그인이 되어있으면, 이렇게 노티가 올텐데 들어가서 필터를 사용해보시면됩니다.
여기를 눌러 필터를 직접 사용해볼수있습니다. (최대 200번 볼수있어서.. 링크가 만료될수있습니다.)
프로젝트 파일은 여기에 올려두었습니다
잘 따라하셨나요?
오늘 아주 간단~하게~! 인스타그램 필터 만들어봤습니다. �
다음 글에서는 Shader를 사용하는 방법에 대하여 알아보겠습니다!
또 찾아주세요~�
더 많은 AR필터 사례들이 궁금하다면? 위에이알 포트폴리오(클릭)
AR필터 사용법부터 카테고리, 사용 데이터, 광고 세팅 등 모든 것을 알고 싶다면? AR필터백서(클릭)
텍스트 말고 따스한 휴먼의 목소리로 자세히 설명 듣고 싶다면? 문의하기(클릭)
현재 위에이알에서는 WebAR 개발자 및 전직군 경력자를 모집하고 있습니다.
국내 유일의 비전프로 앱 개발 전문 스튜디오,
위에이알과 새로운 커리어 여정을 시작하세요.
