Facemesh2Scratchは2020年よりオープンソースかつ無料で提供しており、学校や各種プログラミング教室はじめさまざまな場所で利用されております。継続して開発を続けるためには、使っていただいている皆さまからの支援が必要です。
一杯のコーヒーという形でサポートをいただけると大変ありがたく思います。
Facemesh2Scratchは、WebカメラのみでフェイストラッキングができるScratch3向け拡張機能です。
468ヶ所の顔の部位を認識でき、それらのx座標とy座標を推定します。以下が、各特徴点が顔のどの部位にあたるかを示す図です。
出典: https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection
MediaPipeとTensorFlow.jsが提供するfacemeshパッケージを利用しています。背景にある技術を知りたい方は、"Face and hand tracking in the browser with MediaPipe and TensorFlow.js"を参照ください。
- Chromeで https://stretch3.github.io/ (ほかのオリジナル拡張機能が使用できます)または https://champierre.github.io/facemesh2scratch/ を開きます。
- 拡張機能一覧よりFacemesh2Scratchを選びます。
- 468ヶ所の部位のうち、毎回ランダムでひとつ表示(プログラムは一番シンプルです): https://github.com/champierre/facemesh2scratch/raw/master/sample_projects/random.sb3
- 顔の468ヶ所の部位を表示: https://github.com/champierre/facemesh2scratch/raw/master/sample_projects/facemesh.sb3
- 変数highlightに部位の番号を入れると、その部位だけハイライト表示: https://github.com/champierre/facemesh2scratch/raw/master/sample_projects/highlight.sb3
Facemesh2Scratchには AGPL-3.0 license が適用されます。オープンソースで、誰でも自由に利用できます。授業やワークショップで使用でき、商用利用も認められています。あなたやあなたの生徒さんがFacemesh2Scratchを使用して何か面白いプロジェクトを作成したときは、ぜひハッシュタグ #facemesh2scratch を使用してSNSで共有するか、連絡先までお知らせください。以下の「活用例」に追加させていただきます。
- OS
- Windows 8 (TBD)
- Windows 10 (TBD)
- MacOS
- iOS
- Browser
- Chrome
- Safari(iOS)
Chrome の拡張機能を使用している場合に、正常に動作しないことがあるので、もしうまく動かないという場合には、ゲストモードに切り替えてお試しください。
-
Q. Facemesh2Scratch拡張機能が正常に動作しません。
-
A. Chromeのデベロッパーツールを開き、Consoleタブを確認してください。「Error: WebGL is not supported on this device」というエラーが表示されている場合、ChromeでWebGLが使えない場合の対処方法にある対処方法を試みてください。Chromeの「設定」画面より「詳細設定」を選び、「ハードウェア アクセラレーションが使用可能な場合は使用する」が無効になっている場合は、有効にしてChromeを再起動してみてください。
- Setup LLK/scratch-gui on your computer.
% git clone [email protected]:LLK/scratch-gui.git
% cd scratch-gui
% npm install
- In scratch-gui folder, clone Facemesh2Scratch. You will have facemesh2scratch folder under scratch-gui.
% git clone [email protected]:champierre/facemesh2scratch.git
- Run the install script.
% sh facemesh2scratch/install.sh
- Run Scratch, then go to http://localhost:8601/.
% npm start