Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webの技術でできる様々なこと(機械学習・物理演算・デバイス連携など) / HTML5 7th Anniversary

Webの技術でできる様々なこと(機械学習・物理演算・デバイス連携など) / HTML5 7th Anniversary

you(@youtoy)

November 06, 2021
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. Webの技術でできる様々なこと (機械学習・物理演算・デバイス連携など) 2021年11月6日 (土) HTML5 7th Anniversary @オンライン   豊田 陽介

    ( @youtoy )
  2. 豊田陽介(@youtoy) 自己紹介 普段は、某通信会社勤務 Microsoft MVP (2021年10月より ) ガジェット好き その他 IT系イベント主催、運営や登壇なども

    子ども向けの活動いろいろ(IT系以外も) プライベートでの活動 ビジュアルプログラミング・ IoTに関するコミュニティなど
  3. 今日の話題

  4. Webの技術で 様々な仕組みを扱う話 (ブラウザ上で動きます)

  5. 画像の機械学習 音の機械学習 VTuber的なこと 物理演算エンジン WebXR IoT系 ガジェット系

  6. ガジェットを扱う + 音の機械学習

  7. ブラウザで音の認識とガジェットの制御 Teachable Machine(音を対象) + Web Bluetooth API

  8. 構成・仕組みの概要 機械学習で音に反応する仕組み + BLEによる無線通信 PC (Chromo・  内蔵マイク) BLE HTML +

    JavaScript
  9. 構成・仕組みの概要 機械学習で音に反応する仕組み + BLEによる無線通信 PC (Chromo・  内蔵マイク) toio+専用マット BLE ハンドベル・

    卓上ベル・声 音・声 Web Bluetooth API Teachable Machine (音の機械学習) HTML + JavaScript
  10. 【技術の部分1】 音の機械学習モデル作成 +推論

  11. Teachable Machine(画像・音声・ポーズ) Googleさんがオンラインで提供している仕組み ⇒ ブラウザ上の操作で学習ができて推論のお試しも

  12. Webサイト上の操作で音を録音して学習 マイクボタン を押す 録音ボタンを 押し、2秒の間に 声・音を録音 ここに録音データ が並べばOK (現状、データ数が不足  ⇒

    8秒分以上必要)
  13. Webサイト上で音を聞き分ける処理の確認も 声・音をだすと、画面右下の 部分でリアルタイムの結果表示

  14. ブラウザ上で機械学習モデルが作れる!? 裏側の仕組みは TensorFlow.js で 実装

  15. 去年・今年と小中学生向けにコンテストも Teachable Machine の機械学習 モデルが扱える、独自拡張版の Scratch を使ってなど 画像を対象にした機械学習や、 micro:bit での電子工作の

    組み合わせも 参照元: https://www.watch.impress.co.jp/kodomo_it/news/1362765.html
  16. 音を覚えさせる ↓ 作成した機械学習モデルを JavaScript用に出力

  17. 【技術の部分2】 無線通信による ガジェットの制御

  18. Web Bluetooth API による無線通信の例 ・ブラウザから BLE 対応デバイスを制御 ⇒ toio・M5Stack・micro:bit 等に対して使った例

    手の動きに連動した 6台の toio の同時制御 toio の姿勢角 (ロール・ピッチ・  ヨー)のグラフ化 M5Stack Core2 へ 文字送信・表示、 画面の色変更
  19. デバイス系のAPIについてはこんな話も •Appleがプライバシ上の理由から、NFC、Bluetooth、他14のWeb APIの実装を拒否  https://www.infoq.com/jp/news/2020/07/apple-fingerprinting-privacy/ •Mozilla Specification Positions  https://mozilla.github.io/standards-positions/ 自分に閉じて使うパターンではない場合、特に注意! (ユーザが許可する操作なしに利用できないものには

     なっていますが...)
  20. ガジェットを扱う 別事例

  21. ブラウザとガジェット との間の有線通信

  22. 有線でのデータ取得(シリアル通信の例) ブラウザ上で実行可能

  23. 【技術の部分】 シリアル通信を扱う

  24. シリアル通信のための下準備 ブラウザ上で動く開発環境で micro:bit のプログラムを作成 して、micro:bit を PC との間 で USB

    で通信
  25. JavaScript でセンサーの値の受信処理などを Web Serial API(+グラフ描画)

  26. グラフ描画はライブラリを使って

  27. 学習済み機械学習モデル を使った画像認識

  28. ブラウザ上で両手の認識(+3D描画) MediaPipe Hands(両手の認識) + p5.js(WebGLベースの3D描画)

  29. ブラウザ上の処理でVTuber的なこと MediaPipe Holistic(人の顔や 姿勢の認識) + p5.js(画像表示系の処理)

  30. 【技術の部分の話】 人を対象にした画像認識

  31. MediaPipe ・Googleさんが提供している機械学習を使った仕組み ・Python用やスマホ用、C++用などが提供されている ・MediaPipe の JavaScript版(TensorFlow.jsベース)  ・Face Mesh  ・Face Detection

     ・Hands  ・Holistic  ・Pose  ・Selfie Segmentation   など...
  32. 認識できる対象の例(一部抜粋) Hands Face Mesh 参照元: https://google.github.io/mediapipe/

  33. 認識できる対象の例(一部抜粋) Holistic Selfie Segmentation 参照元: https://google.github.io/mediapipe/

  34. JavaScript版を使うと ブラウザ上で処理が可能に

  35. 【技術の部分の話】 2D・3D描画

  36. 複数の画像を切り替えて表示 3Dの立方体を描画 (+サイズ・位置の変更等)

  37. p5.js メディアアート系などで有名な Processing の JavaScript版 •home | p5.js  https://p5js.org/

  38. •p5.js Web Editor  https://editor.p5js.org/ •OpenProcessing  https://openprocessing.org/ オンラインで開発 できる環境も

  39. ブラウザ上で 物理シミュレーション

  40. 重力や衝突・摩擦などを計算してくれる ドラッグ操作を行うと軌跡 の上で円が生成される

  41. 【技術の部分】 物理演算を行う

  42. ブラウザ上で使える物理演算エンジンの1つ Matter.js https://brm.io/matter-js/ 物体の衝突・加速度・摩擦 などといった要素を、良い 感じに扱ってくれる

  43. サンプルでたくさんの例が見られる Matter.js Demo https://brm.io/matter-js/demo/

  44. 物理シミュレーション に画像認識などを組み合わせる

  45. 物理演算エンジンエンジン+手の認識

  46. 手の認識はMediaPipeではない別のもので Handtrack.js https://github.com/victordibia/handtrack.js/ 「手を開いた/閉じた」という のを認識する処理が最初から 入っている

  47. Webの技術を使って ブラウザ上で様々な処理を 扱って楽しめる!

  48. 終わり!