인스타그램 필터,
개발자 가이드 #3
텍스쳐 타일링 모드(Texture Tiling Mode) 만들기
개요
안녕하세요, 인스타그램 AR 필터 스튜디오 위에이알(WE-AR)의 개발자 딘입니다.
이번 글에서는 Texture Tiling Mode를 통해 반복적인 패턴 애니메이션을 구현해봅시다.
오늘 내용을 잘 활용하면 Light Leak 효과를 만들때 응용할 수 있습니다.
1. 에셋 준비, Tiling Mode 설정
2의 거듭제곱인 사이즈의 패턴(반복될 수 있는) 텍스쳐가 필요합니다.
없다면 위 텍스쳐를 사용하셔도됩니다.
2의 거듭제곱이 아닌경우 아래 보이는 Tiling Mode 탭이 비활성화 됩니다.
위와 같이 텍스쳐를 추가한다음 Tiling Mode U, V 모두 Repeat로 변경!
2. 쉐이더 코드 작성
위와 같이 Shader Code Asset을 하나 추가한다음에
이렇게 입력해줍니다.
3. Material 설정
그리고 Material을 하나 생성한뒤 아까 생성한 쉐이더 코드 에셋을 선택합니다.
patternTexture 파라미터에 텍스쳐를 추가하고
movement 파라미터를 패치로 가져옵니다.
Loop Animation 을 통해 movement 파라미터에 애니메이션을 추가합니다.
4. Scene에 보여주기
Canvas를 추가합니다.
Rectangle 추가하고
가로와 세로를 스크린 사이즈 100%로 맞춰주세요.
그리고 방금 만든 Material을 할당합니다.
5. 완성
추가로 Material의 Blend Mode를 Add로 변경해보셔도 좋습니다!
지금까지 Texture Tiling Mode를 사용하는 방법을 알아봤습니다.
이처럼 코드를 활용해서 더 심도있는 디자인을 만들어낼 수 있습니다.
작은 디테일이 전체 퀄리티를 크게 높여준다는 것 꼭 명심하세요!
다른 콘텐츠도 궁금하시다면, 구독과 좋아요~!
더 많은 AR필터 사례들이 궁금하다면? 위에이알 포트폴리오(클릭)
AR필터 사용법부터 카테고리, 사용 데이터, 광고 세팅 등 모든 것을 알고 싶다면? AR필터백서(클릭)
텍스트 말고 따스한 휴먼의 목소리로 자세히 설명 듣고 싶다면? 문의하기(클릭)
현재 WE-AR에서 인스타그램 필터 개발자를 모집하고있습니다.
여기에 채용 공고가 있으니 많은 지원 부탁드립니다.
