[kinect Project] Simple Face Tracking Example in C# -- 준비중..

간단하게 FaceTacking에 관한 예제를 소개해보고자 합니다. 이미 sdk상에서 toolkit의 형태로 제공되고 있고,  예제도 있습니다.

그래서 지금 해보려고 하는건 왼쪽에 있는 간단한 얼굴 형태를 C#으로 구현해보는 겁니다. 

자 일단 Development Toolkit에 보면 다음과 같은 Tool이 있습니다.

이걸 설치하면 하나의 프로젝트가 열리는데 이걸 바로 쓰는 것이 아니라 다른 프로젝트에서도 쓸 수 있게 dll 파일을 만들 겁니다. 일단 생성된 프로젝트를 열고 빌드를 해줍니다.

물론 지금은 x86을 타겟으로 하고 debug 모드에서 쓸 것이기 때문에 그냥 바로 빌드한 것이지 Release mode에서 할 것인지 타겟 머신을 x64에서 할 것인지는 개인이 이 프로젝트를 빌드할 때 설정해줘야 합니다. 빌드를 하고 난 후 프로젝트 폴더의 bin 폴더로 들어가면 같이 파일들이 생성됩니다.

이중에서 Toolkit.FaceTracking.dll 파일을 실제로 만들 프로젝트에 삽입할 겁니다. 

여기서 새로운 프로젝트를 하나 만들고 위에서 만든 FaceTracking.dll  파일과 원래 키넥트 기능을 활성화 시키기 위한 Microsoft.kinect.dll 파일을 Refences에 삽입해줍니다.그러면 References에는 다음과 같이 두개의 파일이 삽입될 겁니다.

자 그럼 본격적으로 코드를 작성해야 하는데 일단 xaml 파일부터 보겠습니다. xaml 파일을 먼저 본다는 건 우리가 실제로 창에 무엇을 띄울지 무엇을 표현할지를 결정하는 단계일텐데요. 우리의 목적상 당연히 앞의 예시와 같이 FaceTracking 의 결과를 보여주는 것과 실제 ColorStream을 보여주면 좋겠지요. 그래서 이 두가지 뷰를 먼저 표현해보겠습니다.

 먼저 ColorStream을 표현하는 창과 FaceTracking 결과를 보여주는 창을 나누는데 전체를 cell로 나누고 왼쪽에 결과를 오른쪽에 ColorStream을 표현하고자 합니다.그러기 위해서는 Grid의 ColumnDefinition을 비율로 조절해주면 됩니다.

저같은 경우는 Height를 480 Width를 1300으로 하고 적당한 비율로 쪼갰습니다. 중간에 0.05로 정한 이유는 두개가 서로 붙어있는게 보기 좋지 않을거 같아서 틈을 준 겁니다. 여기서 앞에서 언급한 대로 ColorStream을 오른쪽에 넣으려면 다음과 같이 해주면 되겠지요.

 

쉽게 말해서 왼쪽부터 0,1,2,... 순으로 보시면 됩니다. 지금 cell을 세개로 나눴으므로 가장 마지막은 2번이 될겁니다. Name을 정하고 나면 이 이름으로 cs 코드에서 호출할 수 있습니다. 자 그럼 일단은 ColorStream부터 먼저 뿌려보겠습니다. 지난 포스트들을 잘 따라가신 분들이라면 쉽게 만들 수 있을 겁니다.

먼저 using 지시자를 통해서 앞에서 추가한 dll 파일들을 읽어올 수 있게 합니다.

그리고 MainWindow 구문에서 키넥트가 동작할 수 있도록 기본적인 설정에 관한 코드를 넣어줍니다.

그리고 AllFrameReady 이벤트 핸들러는 다음과 같이 채워주면 됩니다. 이부분은 이전 포스트에서도 많이 다뤘으므로 자세한 내용은 생략하겠습니다.

여기까지 하면 다음과 같이 ColorStream이 잘 나오는 것을 확인할 수 있습니다.

자 그럼 이제 FaceTracking을 해봅시다. 먼저 Face Tracking SDK에서는 얼굴에 대한 추적을 총 87개 점으로 나눠서 하고 있습니다. 그 점들의 변화를 통해서 사람의 눈썹 위치가 어딘지 눈과 코 입의 모양은 어떤지, 또는 고개의 방향이 어디를 향하고 있는지를 알 수 있게 해줍니다. 

여기서 몇개의 집단으로 나눠지는 것을 볼 수 있습니다. 가령 왼쪽 눈의 모양은 왼쪽 눈의 폭인 {0,1,2,3,4,5,6,7} 오른쪽 눈은 {8,9,10,11,12,13,14,15} 로 되어 있다는 것이지요. 그래서 이런 걸 묶어서 Shape Unit이라는 것으로 표현합니다. 그래서 SDK에는 총 11개의 SU로 나눠서 각 부분을 표현하는데 여기서 가장 기본적인 눈썹과 입만 이 예제에서 다뤄보고자 합니다. 

 그럼 일단 위의 창에 Canvas를 하나 삽입합니다. 당연히 앞에서 했던 방식대로 0번에 넣어줘야 왼쪽에 들어갈 겁니다.

그다음 처음의 얼굴 이미지를 한번 그려줍시다. 눈과 입만 있는 형태로요. 당연히 Ellipse가 있으면 다 표현이 가능할 겁니다. 저같은 경우는 다음과 같이 작성했습니다. 

그러면 디자인뷰에서는 다음과 같이 나타나게 됩니다.

각각에 이름을 붙여넣은 이유는 이 이름을 통해서 cs 코드에서 위치에 변화를 주기 위함입니다. 입이야 언제든지 크기가 변할 수 있으므로 위와 같이 scaleTransform을 사용해서 변화를 줄수 있게 합니다. 여기서 Canvas 자체에 RotateTransform이 들어가 있는데 그 이유는 고개의 방향을 바꿨을 때 얼굴 형태를 변화시키기 보다는 지금의 canvas 자체를 회전하게 하기 위해서 입니다. 

 그런데 이렇게만 하기는 조금 횡합니다. 눈썹도 그려주고 코도 넣어줘야겠지요.