[Unity] MediaPipe 연동해서 손 상호작용 구현하기

이전 글에서 CVZone 와 MediaPipe 패키지들을 설치하고, 웹캠을 불러와 손을 추적하는 것까지 다뤄봤습니다.

https://vrworld.tistory.com/12

MediaPipe를 이용하여 Hand Tracking & 손 동작 인식 쉽게 테스트 하기

이번 글은 요약하면 아래 5가지로 정리할 수 있습니다.

1. 웹캠으로 감지한 손의 21개 랜드마크 데이터를 불러옵니다.
2. 랜드마크 데이터 리스트를 만들어 해당 값을 UDP 소켓을 통해 Unity로 전송합니다.
3. 전송받은 데이터를 기반으로 Unity 내에서도 "손"을 만듭니다.
4. 실시간으로 웹캠에서 추적한 손이 Unity 내에서 만든 "손"이 연동됩니다.
5. Unity 내에서 연동된 "손" 으로 오브젝트 들과 상호작용(Interaction)할 수 있게 됩니다.

 

 

 

 21개의 랜드마크 데이터

우리가 이전에 PyCharm 환경에서 MediaPipe 패키지를 다운받았을 건데,  이 라이브러리를 통해 추적한 손의 랜드마크를 감지하게 되는데 각 손마다 21개의 랜드마크 데이터를 프레임마다 추론하게 됩니다.

 

while True:
# 웹켐에서 프레임 가져오기
success, img = cap.read()

# Hands
hands, img = detector.findHands(img)

data = []

# 21개의 랜드마크 값들을 UDP 프로토콜을 사용하여 Unity에 보냄.
# Landmark values - (x,y,z) * 21
if hands:
# Get the first hand detected
hand = hands[0]
# Get the landmark list
lmList = hand['lmList']
print(lmList)
for lm in lmList:
data.extend([lm[0], height - lm[1], lm[2]])
print(data)
sock.sendto(str.encode(str(data)), serverAddressPort)

코드의 흐름은 while 반복문으로 웹캠을 프레임마다가 가져오고, fineHands() 메소드를 통해 웹캠에서 손을 감지합니다.

if 문을 통해 만약 손을 감지했다면, 손의 랜드마크 리스트를 출력합니다. (lmList)

또한, 우리가 받아온 랜드마크 리스트 만큼 반복하여 Unity에 보낼 데이터를 "data" 변수에 차곡차곡 넣어주게 되는 거죠.

 

여기서 data.extend() 부분에 lm[0], lm[1], lm[2] 는 각각 x, y, z 값을 가리킵니다. 

height - lm[1]는  OpenCV 와 Unity 가 Y 방향이 서로 반대이기에 Height(세로 해상도)에서 Y값을 빼줌으로써 올바른 데이터를 Unity에 보내주기 위함도 Key Point가 될 수 있습니다.

 

 

 

실행 화면

실행 화면입니다. 실시간으로 랜드마크 데이터를 불러오고 있습니다. 화살표 모양을 자세히 보시면 lmList 변수와 Data 변수 순서로 위 아래 출력되고 있는데, Data 변수에 Helight만큼 Y 값이 감소하여 있고,  Unity에 보내기 위해 각각의 대괄호도 사라진 걸 확인할 수 있습니다.

 

import cv2
from cvzone.HandTrackingModule import HandDetector
import socket

# Parameters
width, height = 1280, 720

# IP WebCam
cap = cv2.VideoCapture("http://Your IP Address/video")

# 일반 WebCam 을 사용할 경우
#cap = cv2.VideoCapture(0)

cap.set(3, width)
cap.set(4, height)

# 손을 감지
detector = HandDetector(maxHands=1, detectionCon=0.8)

# 네트워크
sock = socket.socket(socket.AF_INET,socket.SOCK_DGRAM)
serverAddressPort = ("127.0.0.1", 5052)


while True:
# 웹켐에서 프레임 가져오기
success, img = cap.read()

# Hands
hands, img = detector.findHands(img)

data = []

# 21개의 랜드마크 값들을 UDP 프로토콜을 사용하여 Unity에 보냄.
# Landmark values - (x,y,z) * 21
if hands:
# Get the first hand detected
hand = hands[0]
# Get the landmark list
lmList = hand['lmList']
print(lmList)
for lm in lmList:
data.extend([lm[0], height - lm[1], lm[2]])
print(data)
sock.sendto(str.encode(str(data)), serverAddressPort)


img = cv2.resize(img, (0,0), None, 0.5, 0.5)
cv2.imshow("Image", img)

if cv2.waitKey(1) == ord("q"): # q 누를 시 웹켐 종료
break

 

위 전체 코드에 대한 설명입니다. 참고하시기 바랍니다. 
1. 라이브러리 임포트:
- `import cv2`: OpenCV 라이브러리를 임포트합니다. OpenCV는 영상 처리와 컴퓨터 비전 작업을 위한 라이브러리입니다.
- `from cvzone.HandTrackingModule import HandDetector`: cvzone 패키지에서 HandDetector 모듈을 임포트합니다. 이 모듈은 손을 감지하고 추적하는 기능을 제공합니다.
- `import socket`: 소켓 통신을 위한 socket 모듈을 임포트합니다.

2. 매개변수 설정:
- `width, height = 1280, 720`: 영상의 가로와 세로 해상도를 지정합니다. 이 값은 웹캠의 해상도 설정에 사용됩니다.

3. IP 웹캠 설정:
- `cap = cv2.VideoCapture("http://Your IP Address//video")`: IP 웹캠으로부터 영상을 받아오기 위해 `cv2.VideoCapture` 객체를 생성합니다. `"http://Your IP Address//video"`은 웹캠의 주소를 나타내며, 해당 주소에서 영상을 받아옵니다.

4. 웹캠 설정:
- `cap.set(3, width)`: 웹캠의 가로 해상도를 설정합니다.
- `cap.set(4, height)`: 웹캠의 세로 해상도를 설정합니다.

5. 손 감지 객체 생성:
- `detector = HandDetector(maxHands=1, detectionCon=0.8)`: `HandDetector` 객체를 생성합니다. `maxHands`는 감지할 손의 최대 수를 지정하며, `detectionCon`은 손을 감지하기 위한 신뢰도 임계값을 설정합니다.

6. 네트워크 설정:
- `sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)`: UDP 소켓을 생성합니다. `socket.AF_INET`은 IPv4를 사용하고, `socket.SOCK_DGRAM`은 데이터그램 소켓을 생성합니다.
- `serverAddressPort = ("127.0.0.1", 5052)`: UDP 서버의 주소와 포트를 지정합니다.

7. 영상 처리 루프:
- `while True:`: 무한 루프를 시작합니다.
- `success, img = cap.read()`: 웹캠에서 프레임을 읽어옵니다. `success`는 프레임 읽기가 성공했는지 를 나타내는 불리언 값이고, `img`는 읽어온 프레임 이미지입니다.

8. 손 감지:
- `hands, img = detector.findHands(img)`: `HandDetector` 객체의 `findHands()` 메서드를 사용하여 손을 감지합니다. `img`에는 손 감지 결과가 그려진 이미지가 반환되고, `hands`에는 감지된 손에 대한 정보가 담긴 리스트가 반환됩니다.

9. 손의 랜드마크 값 전송:
- `if hands:`: 손이 감지되었다면 아래 코드를 실행합니다.
- `hand = hands[0]`: 첫 번째로 감지된 손을 선택합니다. - `lmList = hand['lmList']`: 선택된 손의 랜드마크 리스트를 가져옵니다.
- `for lm in lmList:`: 각 랜드마크에 대해 반복합니다.
- `data.extend([lm[0], height - lm[1], lm[2]])`: `data` 리스트에 랜드마크의 x, y, z 좌표 값을 추가합니다. y 좌표는 화면 상에서 뒤집혀 있으므로 `height - lm[1]`로 변환합니다.
- `sock.sendto(str.encode(str(data)), serverAddressPort)`: `data` 값을 문자열로 변환하고, 해당 값을 바이트로 인코딩하여 UDP 소켓을 통해 Unity로 전송합니다.

10. 영상 출력:
- `img = cv2.resize(img, (0,0), None, 0.4, 0.4)`: 출력할 영상의 크기를 조정합니다.
- `cv2.imshow("Image", img)`: `img`에 저장된 이미지를 "Image"라는 창에 출력합니다.

11. 종료 조건:
- `if cv2.waitKey(1) == ord("q"):`: 사용자가 "q" 키를 누르면 루프를 종료합니다.
- `cv2.waitKey(1)`: 사용자의 키 입력을 1밀리초 동안 대기하고, 입력이 있으면 해당 키의 유니코드 값을 반환합니다.
- `ord("q")`: 문자 "q"의 유니코드 값을 반환합니다.
- `break`: 루프를 종료합니다. 이 코드는 IP 웹캠으로부터 실시간으로 영상을 받아와 손을 감지하고, 감지된 손의 랜드마크 값을 Unity로 전송하는 작업을 수행합니다.

 

 

 

 

 

UDP 소켓을 이용하여 랜드마크 데이터를 Unity에 전송

 

https://www.youtube.com/watch?v=RQ-2JWzNc6k 

이제 Unity 내에서 데이터를 전송받을 UDP 관련 스크립트가 필요합니다.

 

UDP 관련 스크립트는 지금까지 참고했던 튜토리얼 영상게시자의 사이트를 들어가 간단한 회원가입 후 무료로 다운받을 수 있습니다.

 

 

 

UDP 관련 스크립트를 다운받고, Unity 에디터로 옮겨주신 다음, 데이터 정보를 받을 빈 오브젝트를 만들어 스크립트를 첨부해 주세요.

 

지금까지 과정을 마친 후, 프로젝트를 실행하면 아까 PyCharm 콘솔 창에서 확인했던 랜드마크 데이터들이 Unity 내에서도 정상적으로 옮겨진 걸 확인할 수 있습니다.

 

 

 

 

Unity에서 전송 받은 데이터를 기반으로 실시간 상호작용 구현

이제 이 전송받은 데이터를 기반으로 Unity 내에서 손 모델을 만들어야 합니다. 손 모델 만드는 과정을 하나하나 적어 나가기에는 글의 양이 많아져 코드 설명과 핵심적인 부분만 짚고, 나머지는 위 튜토리얼 링크를 따라가셔서 차근차근 따라 해 보시면 될 것 같습니다. 

 

HandTracking.cs 코드를 작성하여 Unity에서 우리가 받아온 손의 랜드마크 데이터를 이용하여 손 모델을 표현하게 됩니다.

21가지에 대한 랜드마크 Point들과 받아올 데이터를 가져오기 위한 UDP 소켓을 HandTracking  컴포넌트에 연결해 줍니다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class HandTracking : MonoBehaviour
{
    // Start is called before the first frame update
 
    public UDPReceive udpReceive;
    public GameObject[] handPoints;
 
    void Start()
    {
        
    }
 
    // Update is called once per frame
    void Update()
    {
        // UDP 프로토콜로 전송된 데이터를 받아온다.
        string data = udpReceive.data;
 
        // 가지고 온 데이터에서 대괄호([ ])를 뺀다.
        data = data.Remove(0, 1);
        data = data.Remove(data.Length-1, 1);
 
        // 쉼표를 기준으로 데이터를 분활
        string[] points = data.Split(',');
 
        for ( int i = 0; i < 21; i++)
        {
            float x = 5 - float.Parse(points[i * 3])/100;
            float y = float.Parse(points[i * 3 + 1]) / 100;
            float z = float.Parse(points[i * 3 + 2]) / 100;
 
            handPoints[i].transform.localPosition = new Vector3(x, y, z);
 
        }
 
    }
}

1. 변수 선언:
   • public UDPReceive udpReceive;: UDPReceive 스크립트에 접근하기 위한 변수를 선언합니다. 이 스크립트는 UDP 프로토콜을 통해 데이터를 수신하는 기능을 담당합니다.
   • public GameObject[] handPoints;: 손 모델의 랜드마크 위치를 나타내는 게임 오브젝트 배열을 선언합니다. 이 배열은 손 모델의 각 랜드마크에 대한 위치를 설정하기 위해 사용됩니다.
2. UDP 데이터 수신:
   • string data = udpReceive.data;: UDPReceive 스크립트에서 받아온 UDP로 전송된 데이터를 문자열 형태로 data 변수에 저장합니다.
3. 데이터 가공:
   • data = data.Remove(0, 1);: data 문자열에서 첫 번째 문자인 대괄호 [를 제거합니다.
   • data = data.Remove(data.Length-1, 1);: data 문자열에서 마지막 문자인 대괄호 ]를 제거합니다.
   • string[] points = data.Split(',');: data 문자열을 쉼표 ,를 기준으로 분할하여 문자열 배열인 points에 저장합니다.
4. 랜드마크 위치 업데이트:
   • for (int i = 0; i < 21; i++): 21개의 랜드마크에 대해 반복합니다.
   • float x = 5 - float.Parse(points[i * 3])/100;: x 좌표 값을 가져와서 float 형으로 변환하고, 범위를 조정합니다.
   • float y = float.Parse(points[i * 3 + 1]) / 100;: y 좌표 값을 가져와서 float 형으로 변환하고, 범위를 조정합니다.
   • float z = float.Parse(points[i * 3 + 2]) / 100;: z 좌표 값을 가져와서 float 형으로 변환하고, 범위를 조정합니다.
   • handPoints[i].transform.localPosition = new Vector3(x, y, z);: handPoints 배열에서 i번째 인덱스에 해당하는 손의 랜드마크 위치를 업데이트합니다. localPosition 속성을 사용하여 위치를 지정합니다.

 

 

이제 랜드마크 21가지 Point들을 만들었다면 각각의 Point들을 시작점(Origin)과 도착점(Destination)을 정해 라인(Line)을 그려줘 "손"의 형태를 만들어 주게 됩니다. 

LineCode.cs는 시작점과 도착점 Point들을 받아와 Update() 함수를 거쳐 프레임마다 라인의 위치를 업데이트하여 그려주게 됩니다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class LineCode : MonoBehaviour
{
    LineRenderer lineRenderer;
 
    public Transform origin;
    public Transform destination;
 
    // Start is called before the first frame update
    void Start()
    {
        lineRenderer = GetComponent<LineRenderer>();
        lineRenderer.startWidth = 0.1f;
        lineRenderer.endWidth = 0.1f;
    }
 
    // Update is called once per frame
    void Update()
    {
        lineRenderer.SetPosition(0, origin.position);
        lineRenderer.SetPosition(1, destination.position);
    }
}

1. 라이브러리 임포트:
   • using System.Collections;: Unity에서 제공하는 기본 라이브러리인 Collections을 사용합니다.
   • using System.Collections.Generic;: Unity에서 제공하는 기본 라이브러리인 Generic Collections을 사용합니다.
   • using UnityEngine;: Unity의 기본 라이브러리인 UnityEngine을 사용합니다.
2. 변수 선언:
   • LineRenderer lineRenderer;: LineRenderer 컴포넌트를 사용하기 위한 변수를 선언합니다.
3. Transform 변수 선언:
   • public Transform origin;: 시작점을 나타내는 Transform 변수를 선언합니다.
   • public Transform destination;: 도착점을 나타내는 Transform 변수를 선언합니다.
4. Start 함수:
   • void Start(): 스크립트가 실행될 때 한 번 호출되는 Start 함수입니다.
   • lineRenderer = GetComponent<LineRenderer>();: LineRenderer 컴포넌트를 가져와 lineRenderer 변수에 할당합니다.
   • lineRenderer.startWidth = 0.1f;: 라인의 시작점 너비를 설정합니다.
   • lineRenderer.endWidth = 0.1f;: 라인의 도착점 너비를 설정합니다.
5. Update 함수:
   • void Update(): 프레임마다 호출되는 Update 함수입니다.
   • lineRenderer.SetPosition(0, origin.position);: 라인의 시작점을 origin의 위치로 설정합니다. origin.position은 시작점의 3D 좌표를 나타냅니다.
   • lineRenderer.SetPosition(1, destination.position);: 라인의 도착점을 destination의 위치로 설정합니다. destination.position은 도착점의 3D 좌표를 나타냅니다.

 

 

---

 

실행 영상

 

https://youtu.be/HNpTHFwbNy8

IP WebCam 휴대폰 후면 카메라를 이용했기에 "손"이 좌우 반전되었지만, 정상적으로 오브젝트들과 상호작용하고 있는 모습을 확인할 수 있습니다.