인스타그램 필터, 개발자 가이드 #2
Spark AR의 꽃! Spark SL 로 필터 개발하기
안녕하세요, 인스타그램 AR 필터 스튜디오 위에이알(WE-AR)의 개발자 딘입니다.
이번 글에서는 Spark AR에서 비주얼 표현력을 극대화 시키고 필터의 퀄리티를 높여주는 Spark SL(Shader) 에 대해 알아보겠습니다.
참고로 위에이알은 대부분의 필터에 SparkSL을 활용하면서, 디테일한 부분까지 잡고 있고 있습니다 �
그럼 바로 알아보겠습니다!
1. 쉐이더란?
기본적으로 픽셀을 그리는 함수인데 작동 방식을 이해하는게 더 중요합니다.
쉐이더는 특정한 함수가 픽셀 하나마다 실행되고 모두 한번에 실행되는데
동작 방식을 생각해보면 매우 느릴것같지만 매우 빠르게 동작합니다.
간단하게 설명하면 쉐이더 함수가 모든 픽셀을 통과해 하나의 그림을 그린다라고
생각하면됩니다.
실제로 어떻게 작동하는지 알고싶으면 여기
조금더 이해하고싶다면 여기를 통해서 알아볼수있습니다.
2. Hello, World!
Spark AR에서 쉐이더의 "Hello World!"를 작성해봅시다.
먼저 Shader Code Asset을 생성합니다.
그리고 Shader를 보여줄 Canvas를 생성합니다.
Canvas아래 Rectangle을 생성합니다.
Camera View에 생성된 Rectangle이 좌측상단 구석탱이에 박혀있죠..? 화면을 가득 채워줍시다!
생성된 Rectangle을 클릭하고, 우측 상세 정보 창에서 가로, 세로 꽉차도록 Fill Width, Fill Height를 각각 눌러줍니다.
Material을 생성합니다.
Rectangle에 Material을 추가해줍니다.
좀 전에 생성한 Material을 눌러 Shader Type에서 Shader Code Asset을 눌러줍니다.
위와 같이 별이 나타나면, 이제 Spark SL 작성!! 준.비.완.료.
3. Spark SL
Spark SL은 GLSL 1.0의 슈퍼셋으로 GLSL보다 편리하고 유용한 기능을 제공해줍니다.
문법이 거의 비슷합니다.
본격적으로 Shader 코드를 작성해봅시다.
방금전 생성한 Shader Code 파일을 열어주세요.
여기를 눌러 Visual Studio Code 확장프로그램을 설치할수있습니다.
기본적으로 위와 같은 코드가 작성되어있습니다.
아래 코드처럼 깔끔하게 정리합시다.
(cf. 파일 확장자는 sca인데 위 소스코드는 glsl로 되어있습니다. 컬러 하이라이트를 주기 위함이니, 그냥 무시해주세요!)
정리한 코드를 저장하고, Spark AR로 돌아오면... 웬 무지개가..? �
왜이렇게 나오는지 설명드릴게요!
1. vec2 = 좌표
- vec2는 2차원 벡터이고 좌표를 나타낼 수 있습니다.
2. vec4 = 색상 with 투명도
- vec4는 4차원 벡터이고 투명도가 있는 색상을 나타낼 수 있습니다.
- r, g, b, a의 순서를 가집니다.
- x, y, z, w라고 쓸수도있습니다.
3. uv 변수
- uv라는 변수는 0 ~ 1까지 소수점으로 픽셀의 좌표를 나타냅니다.
위 그림(바둑판..?)은 4x4의 픽셀 쉐이더의 uv가 나타내는 좌표를 표현한 것입니다.
- 쉐이더 함수는 모든 픽셀을 통과해 이미지를 그립니다.
- 그래서 상단에 검은색에서 가로로는 빨간색, 세로로는 초록색이됩니다.
- 대각선으로는 빨간색과 초록색이 합쳐진 노란색이 나오게 됩니다.
...참..쉽죠!? �
3. 원을 그려봅시다
그라데이션이 적용된 원을 볼수가있습니다.
왜 이렇게 작동하는지 이해를 해봅시다.
- 먼저, distance라는 함수는 두 벡터의 거리를 반환하는 함수입니다.
- 첫번째 인자에 vec2(0.5) = x, y 가 0.5인 2차원 벡터
- 두번째 인자에 uv를 그대로 넣어두었습니다. (cf. uv 는 vec2 입니다!)
- 반환 값은 vec4(dist) = x, y, z, w가 dist인 4차원 벡터
말씀드렸듯이, 쉐이더 함수는 모든 픽셀을 통과합니다.
모든 uv값으로 vec2(0.5)를 기준으로 거리값을 4차원 벡터로 반환하는것입니다.
4. 조금더 선명한 원을 그려봅시다.
위 코드를 적용하니, 그라데이션이 사라지고 안과 밖이 뒤집힌 선명한 원이 나타났습니다.
위 코드에서 추가된 6번째 줄을 살펴보면 ...
.
.
.
step..?
step이라는 함수가 추가됐습니다.
기본적으로 내장되어있는 함수이지만, 내부적으로 어떻게 작동하는지 확인해봅시다.
위 코드를 보면, x가 edge 보다 클때 1을 리턴하고 아니면 0을 리턴하는 단순한 함수입니다.
즉, 그라데이션으로 보이는 부분을 step함수를통해 0또는 1로 변경한것입니다.
step을 한 값을 1에서 빼주면 원이 그려집니다. (왜 타원인지는 나중에 다루도록 하겠습니다.)
GLSL에서 기본적으로 원을 그리는 방법을 알아봤습니다.
Spark SL에서 공식적으로 지원하는 방식으로 그려야, 대부분의 디바이스에서 정상적으로 출력되기 때문에..
.
.
.
5. Spark SL의 API를 이용해 원을 그려봅시다
코드를 Spark SL 공식 스타일로 변경했습니다.
결과는 비슷합니다. ( 여기에 Spark SL의 SDF함수들이 자세히 나와있습니다.)
5번째 줄에서 auto라는 타입을 사용했는데
6번째 줄을 참고해서 유추해보면 float를 반환하는 함수를 반환하는것을 알수있습니다.
Spark AR에서 도형을 그릴때 사용해야합니다.
(만약 사용하지 않고 기존 방식대로 사용하면 해상도에따라 깨지는 현상이 발생할수있습니다.)
기본적인 Spark SL 활용법을 알아봤습니다.
모두 잘 따라하셨나요?
앞으로 알려드릴 쉐이더 강의를 차근차근 따라하시다보면 디자인 없이도 멋진 효과를 만들 수 있을 겁니다�
다음에 또 만나요 ��
더 많은 AR필터 사례들이 궁금하다면? 위에이알 포트폴리오(클릭)
AR필터 사용법부터 카테고리, 사용 데이터, 광고 세팅 등 모든 것을 알고 싶다면? AR필터백서(클릭)
텍스트 말고 따스한 휴먼의 목소리로 자세히 설명 듣고 싶다면? 문의하기(클릭)
현재 WE-AR에서 인스타그램 필터 개발자를 모집하고있습니다.
여기에 채용 공고가 있으니 많은 지원 부탁드립니다.
