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

Transcript

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

   View Slide

2. 自己紹介
   豊田陽介（ ）
   @youtoy
   ・IT系イベント主催、登壇や運営なども
   ・子ども向けの活動いろいろ
   ・ Microsoft MVP（2021/10 から）
   プライベートでの活動
   ・ガジェット大好き
   ・今年、本2冊出したり、メーカーフェア出展3回
   好きなことなど
   3月発売
   （共著）
   7月発売
   （単著）
   

   View Slide

3. スライドは公開済みなので
   発表中は文字などの記載を
   追わなくても大丈夫です
   

   View Slide

4. 今回の主な内容は
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. 本編へ
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

36. 円が吹き出す仕組みに手を加えると...
    透明度付き
    PNG画像に
    置きかえ 煙が
    吹き出す
    色の
    加算処理
    （合成）
    炎の
    ゆらめき？
    円が出てくる
    （基本のサンプル
    　でよくある）
    

    View Slide

37. 煙のほう
    

    View Slide

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

    View Slide

39. 炎のような見た目
    

    View Slide

40. 色の加算：単純な重ね合わせではない描画
    p5.js の「blendMode()」
    ADD
    SCREEN
    重ねた色は明るくなる
    重ねた色は明るくなるが
    ADD より少し弱め
    単純な
    重畳
    ADD
    SCREEN
    ※ Canvas の「globalCompositeOperation」
    　 という API による
    

    View Slide

41. 炎の見た目単体を取り出すと
    マウスカーソルに追従させる仕組みでお試し
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

45. 有線・無線での通信
    

    View Slide

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

    View Slide

47. ハッカソンで利用してみた事例の話
    ネコのしっぽ
    っぽくした
    ジョイスティック
    （M5Stack ＋
    　　シリアル通信）
    ロボットトイ
    （toio ＋ BLE での通信）
    ネコのしっぽ
    をサーボモーター
    で動かす仕組み
    （micro:bit ＋
    　　シリアル通信）
    

    View Slide

48. 2022年9月のハッカソンでチーム開発
    シリアル通信と BLE
    をそれぞれ利用
    

    View Slide

49. システム構成（機器と通信方法）
    PC
    （Chromo）
    toio
    BLE
    HTML +
    JavaScript
    M5Stack Core2
    ＋
    ジョイスティック
    micro:bit ＋ サーボモーター
    シリアル
    通信
    シリアル
    通信
    

    View Slide

50. ブラウザ（Chrome系）があれば
    デバイスをいっぺんに扱える
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. Bluetoothによる無線通信
    

    View Slide

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
    

    View Slide

56. Webの技術を使って
    ブラウザ上で様々な仕組みを
    実装して楽しめます！
    

    View Slide

57. イベントの告知
    

    View Slide

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

    View Slide

59. 終わり！
    

    View Slide