[HandTris] #1. 모델 선정 및 프로토타입 제작 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)

Hand Pose Detection

모션 기반 게임을 만들기 위해서는 웹캠으로 보이는 손의 형태를 인식하는 모델이 필요하다. 대학교 3학년 때 Object Detection을 활용하여 마스크 착용 여부를 인식하는 프로그램을 만드는 과제를 했던 경험이 있었기에 어떻게 시작해야 할지 막막하진 않았다. 여러 Pose Detection 모델 중 '웹 기반 게임'에 어떤 모델을 사용하는 게 적합할지 테스트해보며, 최종적으로 Tensorflow.js의 Mediapipe Handpose 모델을 사용하기로 했다. 이 모델은 성능이 좋아, 웹 브라우저에서 버벅일 수 있겠다고 생각했다. 사용자 경험을 헤칠 정도이면, OpenPose 모델을 Hand Detection만 하도록 제한해 사용하고자 하였다. 결론은 Mediapipe Handpose를 사용하기로 했다. 성능뿐만 아니라 웹 브라우저에서 매우 잘 구동했기 때문이다.

Mediapipe Handpose 모델

Mediapipe는 '멀티모달 머신 러닝 파이프라인'이라고 한다. 이는 다양한(멀티) 입력 데이터(비디오, 오디오 등)를 처리하고 여러 모델을 조합(앙상블)할 수 있는 파이프라인이다. Mediapipe의 Handpose 모델에 적용시켜 생각해보면 아래와 같다.

1. Multimodal

손의 포즈를 추정할 때는 비디오 프레임(웹캠 이미지)을 입력으로 받아 손의 위치와 포즈를 예측한다.

2. Machine Learning Pipeline

Handpose 모델은 초기 BlazePalm 모델로 이미지 내의 손을 검출하여 bounding box를 찾는다. 이후 bounding box 내에서 손의 21개 랜드마크를 예측한다. 이렇게 컴포넌트별로 모듈화하여 파이프라인을 구성한다.

위 구조로 이미 만들어진 라이브러리를 Javascript 언어로 즉시 사용가능하다. 🫢 매우 매우 놀랍다. 세부적으로 Detection, Tracking confidence, Model complexity를 옵션으로 설정하는 부분이 있지만, 직접 테스트해보며 finetuning 하는 수준에 그친다.

...
    const hands = new Hands({locateFile: (file) => {
        return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
    }});
    hands.setOptions({
        maxNumHands: 1,
        modelComplexity: 1,
        minDetectionConfidence: 0.9,
        minTrackingConfidence: 0.7
    });
...

오른쪽을 pointing하고 있음을 판단하는 것을 알 수 있다.

Prototype

현재 프로토타입 모델은 클라이언트 브라우저에서 script로 Hand Pose를 인식하고, 테트리스 블럭을 이에 맞게 옮기는 방식으로 구동한다. 서버에서 이를 처리해주는 로직이 필요할지 팀 내 의논을 해보았으나 온라인 게임 방식이기에 한 브라우저는 한 명의 user만 모션 인식을 필요로 하므로 클라이언트측에서 처리해주는 게 낫다고 판단했다.

이 모델을 사용해서 하루라도 빨리 프로토타입을 만들어야 했다. 게임이 어떻게 진행되는지 실제로 해봐야 (재밌게)발전시킬 방향을 생각해낼 수 있기 때문이다.

 

Hand Pose Detection으로 게임이 되는 것처럼 모사한 영상이다. 위와 같이 게임이 되려면, 다른 클라이언트의 테트리스 화면이 보여야 한다. 그리고 다른 클라이언트의 영상까지 보여야 한다.

WebSocket with STOMP

게임의 형태를 갖추기 위해서는 다른 클라이언트의 테트리스 정보를 받아서 화면에서 볼 수 있어야 한다. 이를 두 브라우저에서 테스트하기 위해 각 브라우저에서 WebSocket을 연결하고, STOMP를 통해 서버에 연결한다.

*STOMP?

STOMP(Simple(or Streaming) Text Oriented Messaging Protocol)는 messaging protocol로 WebSocket을 쉽게 구현할 수 있게 도와준다. STOMP로 서버에서는 엔드포인트를 구성하고, 클라이언트에서는 특정 topic이나 queue에 구독(subscribe)한다. 한 클라이언트가 메시지를 보내면, 서버가 이를 받아 topic or queue에 구독 중인 다른 클라이언트에 전달한다. STOMP는 메시지 라우팅 중개 역할을 하는 것이며, peer to peer 연결이 아닌 서버를 통한 간접연결이다. 더불어 전달 가능한 최대 message의 크기는 64KB로 영문, 숫자, 공백은 1byte이므로 꽤 많은 텍스트 데이터를 보낼 수 있다.

비효율 제거

위를 구현할 때 내가 STOMP로 보낸 메시지는 나 스스로 받지 않도록 sessionID를 header로 부터 가져와 나와 구분될 경우(=다를 경우)만 메시지를 확인하는 방식으로 진행하고자 하였다. 이렇게 클라이언트측에서 처리할 수도 있지만, 애초에 서버에서 메시지를 메아리처럼 돌아오지 않도록 할 경우 서버 부하도 줄일 수 있다. 가급적 후자의 방향으로 처리할 예정이다.

2024.06.21 - [🧭 KAIST JUNGLE/HandTris] - [HandTris] #2. 프로토타입 통신 테스트 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)

[HandTris] #2. 프로토타입 통신 테스트 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)