07. 얼굴 필터 만들기(Face Filter)

AR 개발을 위한 프로젝트를 준비하기 위해 Window | Package Manangement 메뉴를 선택하여  Package Manangement 창을 열고 AR 장치 플러그인을 설치합니다.

1장의  ARCore 개발을 위한 환경 구축하기 참고하세요

•  AR 장치용 XR plugins 설치하기
• ARCore XR Plugin 설치하기
• AR Foundation 패키지 설치하기
• Input System 설치하기
• Androd 플랫폼의 ARcore 설정하기
• Player 설정하기

 

1. 기본 AR 장면 만들기

① File | Save As 메뉴를 선택하여  Assets/Scenes/ 폴더에 이름을 BasicARScene으로  저장합니다.

② Hierarchy 창에서 Main Camera를 삭제합니다.

③ GameObject |  XR | AR Session 메뉴를 선택하여 Hierarchy 창에 AR Session을 추가합니다.

④ GameObject |  XR | XR Origin  메뉴를 선택하여 Hierarchy 창에 XR Origin 을 추가합니다.

 

2.  기본 얼굴 오브젝트 출력하기

① Hierarchy 창에서 XR Origin오브젝트를 선택하고 Inspector 창에 Add Component 버튼을 클릭하여 AR Face Manager 컴포넌트를 추가합니다. 

② Hierarchy 창에서 GameObject | XR | AR Default Face을 선택하여 오브젝트를 추가합니다.

③ Hierarchy 창에서 Project 창의 Prefabs 폴더로 AR Default Face  오브젝트를 드래그하여 프리팹으로 만듭니다.

④ Hierarchy 창에서  AR Default Face   오브젝틀르 삭제합니다.

⑤  Hierarchy 창에서 XR Origin 오브젝트를 선택하고 Inspector 창에서  AR Face Manager 의 Face Prefab에 AR Default Face  프리팹을 설정합나다.

 

⑥ Hierarchy 창에서 XR Origin 하위의 Main Camera 를 선택하고 Inspector 창에서 AR Camera Manager 컴포넌트의 Facing Direction의 속성값을 User로 설정합니다.

⑦ 실행하기

 

3.  안경 오브젝트 출력하기

3.1 UI 버튼 만들기

①  메인 메뉴에서  GameObject | UI | Canvas를 선택하여 Canvas를 추가합니다.

② 하이러키 창에서  Canvas를 선택하고 하위에 Button 추가한 후 속성 값을 설정합니다.

- 메인 메뉴에서  GameObject | UI | Button 을 선택하여 Canvas를 하위에 추가하고 이름을 Glasses1Button로 변경합니다. 

- 메인 메뉴에서  GameObject | UI | Button 을 선택하여 Canvas를 하위에 추가하고 이름을 Glasses2Button로 변경합니다. 

- 메인 메뉴에서  GameObject | UI | Button 을 선택하여 Canvas를 하위에 추가하고 이름을 Glasses3Button로 변경합니다. 

3.2 기본 얼굴에 안경 넣기

①   프로젝트창에서 AR Default Face 프리팹을 선택하여 오픈한 후  하위에 안경 모델 Galsses 1, Galsses2, Galsses3을 추가한 후 프리팹으로 만들고 이를 비활성화합니다.

Glasses Models.unitypackage

3.56MB

 

②   AR Default Face 프리팹에서 AR Default Face 오브젝트를 선택하고  인스펙터 창에서 Add Component 버튼을 클릭하여 ChooseGlasses.cs를 추가합니다.

ChooseGlasses.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ChooseGlasses : MonoBehaviour
{
    // 안경 모델 3개에 대한 변수 3개
    public GameObject glasses1;
    public GameObject glasses2;
    public GameObject glasses3;
    
   
    private Button glasses1Button;
    private Button glasses2Button;
    private Button glasses3Button;
 
    void Start()
    {
      
      // 3개의 안경 모델에 대한 변수를 인스턴스화하고 계층 구조에 대한 버튼을 가져옵니다.
      glasses1Button = GameObject.Find("Canvas/Glasses1Button").GetComponent<Button>();
        glasses2Button = GameObject.Find("Canvas/Glasses2Button").GetComponent<Button>();
        glasses3Button = GameObject.Find("Canvas/Glasses3Button").GetComponent<Button>();
      
      // 각 버튼마다 OnClick() 메서드를 추가합니다. AddListener 괄호에 우리가 호출하는 함수를 작성합니다.
        glasses1Button.onClick.AddListener(Classes1Selected);
        glasses2Button.onClick.AddListener(Classes2Selected);
        glasses3Button.onClick.AddListener(Classes3Selected);
    }

    void Update()
    {
        
    }

    private void Classes1Selected()
    {
        glasses1.SetActive(true);
        glasses2.SetActive(false);
        glasses3.SetActive(false);
    }

    private void Classes2Selected()
    {
        glasses1.SetActive(false);
        glasses2.SetActive(true);
        glasses3.SetActive(false);
    }

    private void Classes3Selected()
    {
        glasses1.SetActive(false);
        glasses2.SetActive(false);
        glasses3.SetActive(true);
    }
}

③   추가한 ChooseGlasses.cs  스크립트의 Glasses1,  Glasses2, Glasses3 속성값에 AR Default Face 프리팹 하위의 추가한 Glasses1,  Glasses2, Glasses3 프리팹을 설정합니다.

④ AR Default Face 프리팹에서 AR Default Face 오브젝트를 선택하고  인스펙터 창에서 Material를 Custom=>Mask로 설정합니다.

Shaders.unitypackage

0.00MB

 

⑤ 실행하기