인스타그램 필터, 개발자 가이드 #6
Spark SL의 blending 기능을 사용해봅시다.
개요
안녕하세요, 인스타그램 AR 필터 스튜디오 위에이알(WE-AR)의 개발자 딘입니다.
이번글에서는 Spark SL의 blend 함수에 대해서 알아보겠습니다.
(여기를 클릭하여 공식문서를 확인할 수 있습니다)
blend라는 단어의 사전적 정의를 살펴보면 [섞다, 혼합하다] 라는 뜻입니다.
Spark SL에서 똑같이 '섞고, 혼합'하는 기능으로 작동합니다.
앞으로 필터를 만드시면서 색상을 합칠 일이 매우 많습니다.
미리 간단하게라도 숙지해두시면 나중에 많은 도움이 됩니다.
0. Shader Code Asset 생성
Shader Code Asset 하나를 생성하고
위와 같이 blending 모듈을 임포트 해줍니다.
Texture2d 타입의 diffuseTexture를 인자로 받아서 샘플링 한 다음에 segmentationTexture의 투명도와 곱해서 리턴해줍시다.
1. Canvas
Camera Texture와 Person Segmentation을 생성해줍니다.
Canvas를 하나 생성하고 Rectangle에 아까 생성한 Shader Code를 등록해줍니다.
Material을 눌러서 cameraTexture, segmentationTexture를 추가해줍니다.
그럼 위 사진처럼 사람만 남아있는 상태가 됩니다!
2. Blending
blend 함수 문서를 살펴보면
vec4 blend(vec4 src, vec4 dest, function<vec3(vec3, vec3)> blendFunc);
몇가지 오버로딩이 되어있습니다.
저희가 지금 사용하는 방식은 위와 같습니다.
src는 위에 올릴 색상이고, dest는 받침이 되는 색상입니다.
blendFunc은 색상을 어떻게 합치는지 나타내는 함수입니다.
uv 를 복사하고 0.5를 빼준뒤 i로 곱해 가운데를 중심으로 키우고 다시 0.5를 더해주었습니다.
for문을 통해 조금씩 키워가면서 계속 blend하도록 하겠습니다.
이런식으로 Volume Metric같은 효과를 낼수있습니다.
Material의 Blend Mode 를 Add나 Screen으로 변경하면 조금더 신비로운 효과를 표현할 수 있습니다.
지금까지 Spark SL의 blending 모듈을 사용하는 방법을 알아보았습니다.
더 많은 AR필터 사례들이 궁금하다면? 위에이알 포트폴리오(클릭)
AR필터 사용법부터 카테고리, 사용 데이터, 광고 세팅 등 모든 것을 알고 싶다면? AR필터백서(클릭)
텍스트 말고 따스한 휴먼의 목소리로 자세히 설명 듣고 싶다면? 문의하기(클릭)
현재 WE-AR에서 인스타그램 필터 개발자를 모집하고있습니다.
여기에 채용 공고가 있으니 많은 지원 부탁드립니다.
