인스타그램 필터, 개발자 가이드 #7
안녕하세요, 인스타그램 AR 필터 스튜디오 위에이알(WE-AR)의 개발자 딘입니다.
오늘은 여기저기서 많이 활용되는 왜곡 효과에 대해 배워보겠습니다.
왜곡 효과를 활용하면 Fisheye 효과, 얼굴이 찌그러지는 웃긴 효과들을 만들 수 있습니다 :)
왜곡효과를 활용한 Fisheye 피쉬아이 필터1. Render Pass Pipeline을 생성합니다.
좌측 상단의 하이라키에서 Device를 선택하고
우측에 Render Pass탭의 Create 버튼을 눌러주시면 생성하실 수 있습니다.
2. Shader Code Asset을 생성합니다.
3. 임시로 코드를 작성합니다.
텍스쳐를 받을 수 있도록 아래와 같이 작성해줍니다.
4. 셰이더와 렌더패스를 연결합니다.
5. 이제 왜곡 렌즈 효과 코드를 작성해봅시다.
생각보다 간단하죠?ㅎㅎ;;; 천천히 설명드리겠습니다!
uv에서 0.5를 빼서 x, y 값이 -0.5 ~ 0.5까지 진행되도록 변경한 후
atan 함수로 현재 uv에 대한 각도를 구합니다.
그리고 uv 대한 벡터의 크기를 radius라는 변수로 넣어주었습니다.
st라는 변수를 생성할 때 angle 변수를 다시 cos, sin으로 x, y 단위 벡터 값을 다시 구해주었습니다.
여기서 중요한 부분은 pow(radius, 2.0) 입니다.
radius 값은 벡터의 크기이기 때문에 무조건 양수이고 절댓값이 1보다 작은 수를 2제곱하면 작아지고 절댓값이 1보다 큰 수를 2제곱하면 커집니다.
이 부분이 왜곡을 만드는 부분입니다.
왼쪽이 1보다 큰 수를 제곱할 때, 오른쪽이 1보다 작은 수를 제곱할 때 uv의 모양입니다.
radius를 2제곱 했을 때
radius를 0.5제곱 했을 때마지막으로 uv를 0.5를 빼준 상태에서 계산을 했기 때문에 0.5를 더해주었습니다.
이런 식으로 왜곡 효과를 만들 수 있습니다.
앞으로 보정에서 많이 활용하게 될 수 있습니다.
더 많은 AR필터 사례들이 궁금하다면? 위에이알 포트폴리오(클릭)
AR필터 사용법부터 카테고리, 사용 데이터, 광고 세팅 등 모든 것을 알고 싶다면? AR필터백서(클릭)
텍스트 말고 따스한 휴먼의 목소리로 자세히 설명 듣고 싶다면? 문의하기(클릭)
현재 WE-AR에서 인스타그램 필터 개발자를 모집하고있습니다.
여기에 채용 공고가 있으니 많은 지원 부탁드립니다.
