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

続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 8th Anniversary

続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 8th Anniversary

you(@youtoy)

October 23, 2022
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. 続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜 2022年10月23日 (日) HTML5 8th Anniversary @オンライン 豊田陽介( )

    @youtoy
  2. 自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10 から)

    プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 (共著) 7月発売 (単著)
  3. スライドは公開済みなので 発表中は文字などの記載を 追わなくても大丈夫です

  4. 今回の主な内容は

  5. 昨年の話の一部を深掘り+α 昨年の話に出していた内容のキーワード 画像の機械学習 音の機械学習 VTuber的なこと 物理演算エンジン WebXR IoT系 ガジェット系 昨年の資料の

    URL
  6. 昨年の内容は 聞いてなくてもOKです

  7. 先日のイベントの内容と一部は重複 重複してない部分をいろいろ盛り込みつつ その時の資料

  8. ライブデモ多めで 紹介していきます

  9. 本編へ

  10. 学習済み機械学習モデル を使った画像認識 + 描画ライブラリ

  11. いきなりですが デモをご覧ください

  12. ライブデモ! 機械学習による手の認識 + パーティクルの描画

  13. 【動画】ブラウザで手・指の位置検出+p5.jsによる描画 両手の指先に炎が 灯っていく

  14. 【動画】ブラウザで手・指の位置検出+p5.jsによる描画 光学迷彩・透明マント のような表現 その2

  15. 「MediaPipe」のJavaScript版のHands MediaPipe Hands 画像から手のキーポイント の位置(複数)を認識 ※ 指を立てたかどうかの判定は   位置座標などから自前で計算

  16. TensorFlow.jsベースのため ブラウザ上で動作

  17. カメラ付きPCがあれば 手軽にデモを作れる/試せる

  18. 手軽に試せる JavaScript版の 公式デモも紹介

  19. ここから試せます! Hands

  20. ライブで オプションの一部も 説明などしつつ

  21. 【ライブデモ】MediaPipe Hands https://mediapipe.dev/demo/hands

  22. 実際に試していきます https://google.github.io/mediapipe/getting_started/javascript

  23. MediaPipe JavaScript版で扱えるもの 手を対象としたもの以外の一部を紹介 MediaPipe Face Mesh MediaPipe Holistic

  24. ここから試せます! https://google.github.io/mediapipe/getting_started/javascript Face Mesh Holistic

  25. 【ライブデモ】 https://mediapipe.dev/demo/face_mesh https://mediapipe.dev/demo/holistic

  26. また先ほどのページへ https://google.github.io/mediapipe/getting_started/javascript

  27. 自分が作ったもののデモ! MediaPipe Holistic による顔・上半身の認識

  28. 【動画】顔のキーポイント検出・姿勢推定とアニメーション 目・口・体の動きと ネコ画像が連動

  29. 描画周りも説明してみる

  30. デモしたものの描画部分:p5.js メディアアート系などで有名な Processing の JavaScript版 •home | p5.js  https://p5js.org/

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

  32. 炎のような 見た目を作った部分

  33. パーティクル・システムについて ゲーム物理、モーショングラフィックス、コンピュータ グラフィックなどで使われる技術のひとつで、たくさん の細かいスプライト画像、3Dモデル、またはその他のCG オブジェクトを使って、ある種の「ファジー」な現象を シミュレートするもの 出典: Wikipedia「パーティクル・システム」より

  34. 公式デモを ライブで試す

  35. p5.js公式:パーティクル・システム https://p5js.org/examples/simulate-particle-system.htm

  36. 円が吹き出す仕組みに手を加えると... 透明度付き PNG画像に 置きかえ 煙が 吹き出す 色の 加算処理 (合成) 炎の

    ゆらめき? 円が出てくる (基本のサンプル  でよくある)
  37. 煙のほう

  38. シンプルな図形のパーティクルを画像に アルファチャネル付 の PNG画像を利用

  39. 炎のような見た目

  40. 色の加算:単純な重ね合わせではない描画 p5.js の「blendMode()」 ADD SCREEN 重ねた色は明るくなる 重ねた色は明るくなるが ADD より少し弱め 単純な

    重畳 ADD SCREEN ※ Canvas の「globalCompositeOperation」   という API による
  41. 炎の見た目単体を取り出すと マウスカーソルに追従させる仕組みでお試し

  42. 画像からの機械学習と 描画ライブラリは セットで活用しやすい

  43. デバイスを 連携させる話へ

  44. JavaScriptで外部デバイスとの通信 ブラウザ上で実行 Node.js  ・Web Serial  ・Web Bluetooth  ・Fetch API  ・axios等を利用

     ・WebSocket API  ・MQTT.js等を利用  ・Node Serialport  ・noble・bleno  ・Fetch API  ・axios等を利用  ・ws等を利用  ・MQTT.js等を利用 シリアル通信   BLE   HTTPリクエスト   WebSocket   MQTT
  45. 有線・無線での通信

  46. プロトタイピングに使った事例 (【コンセプト】遠隔にいるネコ同士が  コミュニケーション)

  47. ハッカソンで利用してみた事例の話 ネコのしっぽ っぽくした ジョイスティック (M5Stack +   シリアル通信) ロボットトイ (toio +

    BLE での通信) ネコのしっぽ をサーボモーター で動かす仕組み (micro:bit +   シリアル通信)
  48. 2022年9月のハッカソンでチーム開発 シリアル通信と BLE をそれぞれ利用

  49. システム構成(機器と通信方法) PC (Chromo) toio BLE HTML + JavaScript M5Stack Core2

    + ジョイスティック micro:bit + サーボモーター シリアル 通信 シリアル 通信
  50. ブラウザ(Chrome系)があれば デバイスをいっぺんに扱える

  51. 有線でのシリアル通信

  52. シリアル通信(Web Serial API) 手っ取り早く試すなら

  53. こちらのページが便利 https://googlechromelabs.github.io/serial-terminal/

  54. Bluetoothによる無線通信

  55. Web Bluetooth API での 3つの処理 ・Read、Write、Notification Read Write Notification センサーの値を任意の

    タイミングで読み取る LED・モーターなどの 制御情報を送る デバイスから通知される 値を読み取る 定期的な送信や状態変化 の際に送信される等 •Web Bluetooth  https://webbluetoothcg.github.io/web-bluetooth/ •DataView - JavaScript | MDN  https://developer.mozilla.org/ja /docs/Web/JavaScript/Referenc e/Global_Objects/DataView •BufferSource - Web API | MDN   https://developer.mozilla.org/ja/docs/We b/API/BufferSource
  56. Webの技術を使って ブラウザ上で様々な仕組みを 実装して楽しめます!

  57. イベントの告知

  58. 「ガジェット」に興味がある方へ! 「ガジェット・enebular」に興味がある方 へ! https://enebular.connpass.com/event/250779/ 10/27(木) オンライン開催 enebular developersコラボのイベント

  59. 終わり!