인스타그램 필터, 개발자 가이드 #4
쉐이더의 기본, 하프톤 만들기
개요
안녕하세요, 인스타그램 AR 필터 스튜디오 위에이알(WE-AR)의 개발자 딘입니다.
Spark AR에서 효과를 극대화 시키기위해
가장 중요한 셰이더를 이용해 하프톤 필터를 만들어봅시다.
1. Render Pass Pipeline을 생성합니다.
좌측 상단의 하이라키에서 Device를 선택하고
우측에 Render Pass탭의 Create 버튼을 눌러주시면 생성하실 수 있습니다.
2. Shader Code Asset을 생성합니다.
3. 먼저 원을 그려볼까요?
sdfCircle을 사용해서 원을 그려주었습니다.
Shader Code Asset을 Patch Editor 영역으로 드래그하고
Output을 Device와 연결해주면!
짜잔! 원이 그려졌습니다.
이제 원을 반복시켜봅시다!
4. 반복하기
sdfRepeat함수를 통해 그려진원을 반복해서 그리도록 추가하였습니다.
10번줄의 repeat는 반복횟수인데 이 변수를 줄이거나 늘리면 원의 개수를 조절할수있습니다.
이런식으로 그려지게됩니다.
이제 텍스쳐를 추가합시다.
out vec4 Color 매개변수전에 diffuseTexture라는 Texture2d 타입의 변수를 추가해주었습니다.
5. 모자이크
Patch Editor로 돌아가보면 Input이 하나 생겼는데 Render Pass에서 나오는 Output과 연결 해줍시다.
이렇게 작성해주시면
이런식으로 모자이크가 된걸 확인하실 수 있습니다.
여기에서 dist를 col변수에 곱해주면!?
짜잔! 하프톤이 벌써 완성되었습니다!
모자이크 이미지와 반복된 원들을 서로 곱하면 원의 모양과 모자이크의 색상이 합쳐지게되는것입니다.
하지만 조금더 개선해볼까요?
원의 크기를 색상에따라 조절해보고, 원과 원사이에 하프톤을 하나 더 겹쳐봅시다!
mosaic를 계산하는 로직을 위로 올려주고
기존 radius에서 grayscale값에따라 최대 radius의 반절만큼 빼주었습니다.
원과 원사이에 똑같은 하프톤을 겹쳐보도록하죠
6. 겹치기
halftone이라는 함수를 만들고 offset을 받아 조금이동하여 그려지게하고
마지막에 blending을 이용해서 합쳐주었습니다.
radius가 줄어드는 부분은 삭제되었습니다. (그럼 왜넣은거야)
짜잔 이렇게 겹치면 점묘법으로 그려진 그림의 느낌이 나게됩니다!
지금까지 Spark SL을 이용해 halftone을 만들어보았습니다!
더 많은 AR필터 사례들이 궁금하다면? 위에이알 포트폴리오(클릭)
AR필터 사용법부터 카테고리, 사용 데이터, 광고 세팅 등 모든 것을 알고 싶다면? AR필터백서(클릭)
텍스트 말고 따스한 휴먼의 목소리로 자세히 설명 듣고 싶다면? 문의하기(클릭)
현재 WE-AR에서 인스타그램 필터 개발자를 모집하고있습니다.
여기에 채용 공고가 있으니 많은 지원 부탁드립니다.
