スターティアラボ WebVR＋AI入門勉強会 Part1
目次
全３回の勉強会をやり切りました！
7月〜９月にかけて月１回勉強会を開催し、全３回やりきりました。
第一回 https://startialab.connpass.com/event/180157/
第二回 https://startialab.connpass.com/event/184941/
第三回 https://startialab.connpass.com/event/188450/
回を重ねるに連れて、参加者の数も１０人→２０人→２４人と増えていき、
プレッシャーを感じつつもやりがいのある勉強会になりました。
今回は３回目の勉強会内容をBlogに投稿します。
作成したもの
パソコンのカメラに映る手を認識して、VR内に表示します。
ピンチジェスチャーを認識し、親指と人差し指をつまむことで、BOXを出力し掴みます。
指をはなすとBOXも離します。
https://startialab-webvr-handpose-handson.glitch.me/
最初の読み込みが遅いため、左下の黒枠にカメラの画像が出るまでお待ちください。
AI概要
AIについてどのようなものかイメージを掴むため、簡単に説明します。
最近話題になっているAIといえば、ディープラーニングのことを指すことが多いです。
このディープラーニングは何なのかを、誤解を恐れずに言うと
1. 大量のデータをニューラルネットワークモデルに入力し
2. データに含まれる特徴を抽出し、学習することで
3. 精度の高い判定機（モデル）を作ることができる
というものです。
この判定機（モデル）を作成する過程を学習といい、学習済み判定機を利用することを推論といいます。
この勉強会では、手の形状を学習済みの判定機を使います。
開発環境設定
今回のハンズオンでは、https://glitch.com/ を利用します。glitch.comとは、Webブラウザ上でコーディング及び外部公開できるWebサービスです。利用する際はアカウントを作成しておきましょう。
glitch.comを詳しく知りたい方は、https://laboradian.com/glitch/ のblogがお勧めです。
基本サンプルコードをGlitchへ
https://aframe.io/ へアクセスし、右側の「GET STARTED」をクリックします。クリックすると、A-Frameのドキュメントサイトへ移動します。
A-frameのドキュメントサイトへ移動後、本文中の「remix the starter example on Glitch」をクリックします。クリックすると、glitch.com上のA-Frameサンプルサイトへ移動します。
ログインしてない場合はここでログインします。ログイン後、右下の「Remix Your Own」をクリックすることで、A-Frameのソースコードを自分のGlitchプロジェクトとしてRemixします。
PCブラウザでの動作確認
Remixしたプロジェクトから、左上のShow→「In a New Window」を選択し、動作確認します。
カメラ画像の取得
WebVRやAIに関係のない処理について、scriptとcssについて事前に用意しています。ダウンロードしてGlitch.comへ取り込みましょう。
script.js
style.css
ソースコード説明
まずはカメラ画像を表示するvideoタグを用意します。
パソコンのWebカメラから画像を取得するためのスクリプトを記載します。
Webカメラの画像は「navigator.mediaDevice.getUserMedia」を使って
Streamを取得し、ビデオタグのsrcに設定しています。
作成したloadCameraメソッドで、Webカメラから取得した画像を反映したビデオタグを取得しています。
この後のAI推論処理のインプットとして利用します。
動作確認
左下の黒枠にWebカメラの画像が表示されています。
黒枠をクリックすると拡大縮小できるようにしています。デバッグ時にご利用ください。
AIモデルを使った手の検出
今回利用する学習済みの推論モデルである、Mediapipe Handposeについて簡単に説明します。
Mediapipe Handposeとは？
Mediapipeとは
ビデオ、オーディオ、時系列データを処理するパイプラインフレームワークのことで、主にエッジデバイス上での快適な推論処理を目的としたものです。ここでは詳細説明は割愛しますので、詳しく知りたい方は以下URLを確認ください。
https://github.com/google/mediapipe
handposeとは？
Mediapipeで用意されている手の3D位置情報を認識する推論モデルです。元々はJavascriptで利用できる形では提供されていなかったのですが、tensowflow.jsチームによってjsで扱える形で提供されています。
https://developers-jp.googleblog.com/2020/04/mediapipe-tensorflowjs.html
https://github.com/tensorflow/tfjs-models/tree/master/handpose
ソースコード説明
まずは、推論モデルを処理するライブラリであるtensorflow.jsと、handposeライブラリを読み込みます。
handposeライブラリより推論モデルデータを取得します。
GPUの強いパソコンの場合は、「await tf.setBackend("webgl")」のコメントを外すとすこし処理が軽くなると思います。
ビデオタグ情報をインプットとして、取得したhandposeモデルの推論メソッドを実行しています。これにより、Webカメラの画像に写っている手の3D位置情報を判定して、手の3D位置情報データをアウトプットします。
requestAnimationFrameを利用することで、パソコンの処理能力に応じた負荷で、推論処理し続けます。
動作確認
推論モデルからアウトプットしたデータは、コンソールに出力しています。
F12を押して開発ツールを表示し、コンソールに出力されたデータを確認します。
今回利用するのは、landmarksデータです。データについてはPart2で説明いたします。
Part2に続く
ここまでで、Webカメラから画像を取得して、AI推論モデルを使って手の3D形状を取得する流れの実装を行いました。
Part2では、取得した手の形状データより、2Dおよび3Dへの表示とジェスチャー認識による簡単なインタラクションの実装を行います。